태그 선택자 속성
selector 주로 CSS와 함께 사용하며
id와class를 사용해서 해당 태그에 이름을 부여하거나 그룹을 지어줄 수 있다.
<div id="box1" class="box">BOX1</div>
<div id="box2" class="box">BOX2</div>
<div id="box3" class="box">BOX3</div>class 속성
- 여러 태그들을 하나의 그룹으로 지정
- 같은 값을 부여하고 싶은 여러 태그들을 하나의 그룹으로 만들어 중복 코드를 방지할 수 있음
id 속성
- 고유의 값으로 태그당 하나의 태그에만 적용
example 1
.box {
width: 50px;
heigth: 50px;
}
#box1 {
color: "red";
}
#box2 {
color: "blue";
}
#box3 {
color: "green";
}example 2
<div class="container">
<div class="item item1">item1</div>
<div class="item item2">item2</div>
<div class="item item3">item3</div>
</div>.item { height: 40px; }
.item1 { color: red; }
.item2 { color: blue; }
.item3 { color: green; }태그에 직접 style 속성을 사용할 수 있지만 HTML과 CSS의 역할을 나눌 수 있는 장점이 사라지기 때문에 추천하지 않음.
주석
보통 코드를 설명하거나 섹션을 나눌때 사용한다
<!-- 안에 내용은 보이지 않는다. -->HTML | JavaScript 적용
html 내부에 작성할 수 있지만 보통 외부에 따로 js파일을 만들어 코드를 작성
<!-- <script> 태그는 <body> 태그 최하단에 넣는것이 좋다. -->
<body>
<footer>
<footer>
<script src="main.js"></script>
</body><head>에 넣으면 DOM을 사용할 수 없고 (<body>를 읽지 못한다.)
<body> 최하단에 넣으면 DOM을 사용할 수 있다. (<body> 안의 내용들을 위에서 부터 읽어와서 사용하는 느낌)
DOM - 도큐먼트가 하나의 객체로 취급하고 그 객체를 자바스크립트로 이용해서 작동하도록 만드는 것
script 태그를 최하단에 넣는 이유를 알기 위해 브라우저가 어떤식으로 해당 코드를 읽어주는지 알아야한다.
1. HTML을 읽는다.
2. 읽은 HTML을 파싱한다.
3. DOM Tree를 생성한다.
4. Render Tree (DOM Tree + CSSOM Tree) 생성한다.
5. 클라이언트 즉, 유저에게 보여준다.
위의 과정에서 브라우저는 HTML을 읽는 과정에 <script>를 만나면 파싱을 중단하고 모든 권한을 javascript 엔진에게 부여하며 javascript 파일을 로드 후 javascript 코드를 파싱한다. 그 뒤에 javascript 파싱이 완료되면 중단된 HTML파싱을 이어간다.
즉, HTML을 파싱하고 DOM Tree를 만드는데 텀이 생기고 그만큼 Display에 표시되는것이 지연되게 된다.
또한 DOM Tree가 생성되기 전에 javascript가 생성되지도 않은 DOM의 조작을 시도할 수 있습니다.
HTML TIP
- 의미 없는 글자를 만들어 내기 위해서 p태그를 이용할 수 있다.
lorem뒤에 숫자를 적으면 된다.
<p>lorem10</p>
<!-- 결과 -->
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorum, dolorem.</p>- a태그는 주소 말고 전화 및 문자를 적을 수 있다.
<a href="tel:01012341234" target="_blank">전화걸기</a>
<a href="sms:01012341234" target="_blank">문자하기</a>- 이미지 태그에는 반드시 alt 속성을 넣어줘야 한다.
<!-- 이미지가 나오지 않을 경우 설명해줄 수 있는 역할을 하기도 하지만 시각장애인들을 위한 설명이기도 하다. 웹 표준 -->
<img alt="블로그사진" src="img.png"/>- input 태그와 같이 쓰이는 label 태그는 거의 모든 input 태그와 함께 쓰는 것이 좋다.
<label for="phoneNum">핸드폰 번호</label>
<imput type="number" id="phoneNum">