반응형
- 태그2_개념_class
- 태그에 이름 짓는거에 2가지 방법이 있다.
- 1 - id로 변수명을 지을 수 있다.
- 2 - class로도 지을 수 있다.
- 출력이 이상하게 된다. 태그가 출력이 되는게 아니라.
- class는 배열에 담긴다.
- HTML.Collection(1) 이렇게 출력이 된다.
- 없는것을 선택하면.
- 빈배열이기 때문에.
- HTML.Collection(0) => 0 빈배열로 잡힌다.
- 사이즈가 0이다.
- id는 변수에 저장이 된다. 1개만 잡힘
- 출력할때 [ ] 대괄호를 넣어야 한다.
-
console.log($a[0].innerHTML);
- 한개짜리는 id로 잡고
- 여러개는 class로 한다.
- 반복문을 쓸 수도 있다.
- 반복문을 쓸 수 있다.
- body에 적은 것은 웹페이지에서 출력이 된것이고.
- 반복문은 콘솔에서 반복되게 출력하고 싶으니. 반복문을 사용한 것이다.
- 우선 변수를 지정하고. p태그를 가져왔으니까. 앞에 $a를 써서 변수를 지정하고
- 콘솔 출력을 반복문을 이용해서 출력한다.
- 클래스 이름은 같고. 안에 텍스트는 다르게 적어도 된다.
- 클래스 이름이 같기 때문에. 변수를 한번 적어서 반복문을 적을 수 있다.
- <p> **paragraph(문단)**의 줄임말이에요.
- 글을 쓸 때 문단을 나눌 때 쓰는 태그
- 웹페이지에서 어떤 글을 "덩어리로" 나누고 싶을 때 주로 사용합니다
- test라는 클래스가 1개가 아니라.
- <p>태그가 5개 각각 따로 존재하고, 각각이 class="test" 라고 같은 이름표를 붙이고 있는 것
- "test"는 이름표(label) 같은 것.
- 각각의 <p>는 개별 상자예요.
- 그런데 그 상자들에 모두 "test"라는 같은 라벨이 붙어 있는 것이죠.
- 그래서 자바스크립트에서 getElementsByClassName("test")를 쓰면,
"test 라벨이 붙은 모든 상자(p태그)를 가져와 줘" 라는 뜻이 됩니다.
- $a[i].innerHTML = arr[i];
- $a[i].innerHTML => i번째 <p> 태그의 **안쪽 내용(HTML)**을 의미해요.
- “i번째 <p> 태그 안에, i번째 이름을 넣어라” 라는 뜻입니다.
- $a[i] → "i번째 상자"
- innerHTML → "상자 안에 든 글자"
- arr[i] → "넣을 내용"
- 📥 "i번째 상자 안에 i번째 글자를 넣어줘!"
- 김철수,남,10,87 이렇게 만들고 싶은데.
- $a[i].innerHTML = ""; //빈것
- 빈것. 즉 큰 따음표에 원하는 것을 추가하는 것
- <body>와 <script>의 역할과 차이, 그리고 스크립트가 왜 필요한지를
- <body> 태그의 역할
- 👉 사용자에게 "보여주는 것"을 담당합니다.
- <body> 안에 있는 태그들은 대부분 눈에 보이는 콘텐츠예요.
- HTML = 집
- <body>는 집을 짓는 설계도에 따라 방을 만들고, 가구를 놓는 것
→ 즉, 웹페이지의 눈에 보이는 부분을 "만드는" 것 - 웹에 보이는 "기본 구조"를 만듦
- <script> 태그의 역할
- 보여지는 것을 "제어하고 조작"하는 코드를 쓰는 공간입니다.
- <script>
document.getElementById("myTitle").innerText = "바뀐 제목!";
</script> - 이런 코드는 실제로 화면에 표시된 걸 바꾸거나, 숨기거나, 새로 추가하거나,
사용자 반응(클릭, 입력 등)에 따라 동작을 바꾸는 일을 합니다. - JavaScript = 사람 . 두뇌
- <script>는 집 안에서 불을 켜거나, 에어컨을 조절하거나, 버튼을 누르면 작동되게 만드는 것
→ 즉, 웹페이지를 "제어, 조작" 하는 역할 - 그 구조를 제어하고 바꾸는 "행동"을 담당
- 그럼, script는 왜 존재하나?
- 자바스크립트는 웹을 "정적인 페이지"가 아니라 "동적인 앱처럼" 만들기 위해서 생긴 언어입니다.
- script가 body를 제어한다.
- <body> 안에 있는 건 전부 HTML이다.
- <body> 안에 적는 건 전부 **HTML 요소(=태그)**입니다.
- 자바스크립트는 script 태그 안에 적는 건가요?
- <script> 태그 안에 자바스크립트 코드를 적어야 브라우저가 "아! 이건 JS 코드구나!" 하고 인식해요.
- <script>는 HTML 태그이고,
- 그 안의 내용이 자바스크립트 코드인 거예요.
- 🔧 HTML은 웹의 **뼈대(구조)**를 만들고,
🧠 JavaScript는 그 구조에 동작을 추가하는 언어입니다. - HTML은 "무엇을 보여줄까?"에 집중
- JavaScript는 "어떻게 움직일까?"에 집중
반응형
'코딩 > 1-JavaScript' 카테고리의 다른 글
| 태그3_개념_tag , 태그4_개념_name , 태그5_개념_queryselector (0) | 2025.05.21 |
|---|---|
| 프론트엔드 . 백엔드 . api (1) | 2025.05.21 |
| D01_dom_태그 - 태그1_개념_id (0) | 2025.05.21 |
| C1406클래스와전체static (0) | 2025.05.21 |
| D학기 - 자바스크립트 - 프론트엔드 (0) | 2025.05.21 |