<body></body> 안에서 사용하는 태그들은 HTML 문서의 구조를 나타낸다.
1. DIV(막 쓰는 태그)
<div></div>의 'div'는 division의 약자로 분할을 뜻하고 문서의 부분이나 섹션을 정의한다. 명확한 의미를 가지지 않기 때문에 정말 많은 경우 단순히 특정 범위를 묶는 용도로 사용한다. 보통 이렇게 묶인 부분들에 CSS나 JS를 적용하게 된다.
<body>
<div>
<p></p>
</div>
<div>
<div>
<h1></h1>
<p></p>
</div>
</div>
</body>
<!-- 다음과 같이 이해할 수 있습니다. -->
<body>
<묶음1>
<p></p>
</묶음1>
<묶음2>
<묶음2-1>
<h1></h1>
<p></p>
</묶음2-1>
</묶음2>
</body>
2. IMG(이미지 넣는 태그)
<img>는 HTML에 이미지를 삽입할 때 사용한다.
웹 페이지에 이미지를 삽입하는 방식은 크게 2가지로, 'HTML에서 삽입(IMG)'와 'CSS에서 삽입(background)'가 있다.
<body>
<img src="./kitty.png" alt="냥이">
</body>
<!-- 다음과 같이 이해할 수 있습니다. -->
<body>
<이미지 경로="./kitty.png" 대체텍스트="냥이">
</body>
속성 | 의미 | 값 |
src | (필수) 이미지의 URL | URL |
alt | (필수) 이미지의 대체 텍스트(alternate)를 지정 |
3. 웹 표준 검사하기
우리가 작성한 HTML 문서가 표준에 부합하는지 테스트를 해볼 수 있다.
W3C validator에 접속하여 작성한 HTML 문서를 업로드하고 테스트를 시작할수 있다. 기본적인 표준 여부를 판단할 수 있으며, 특히 입문자라면 익숙해질 때까지 자주 확인하는것이 좋다.
validator.w3.org/#validate_by_upload
'HTML > 기초' 카테고리의 다른 글
HEAD 태그 (TITLE, META, LINK, STYLE, SCRIPT) --> HTML 문서의 정보 (0) | 2020.12.22 |
---|---|
HTML 문서의 범위 & DOCTYPE(DTD) (0) | 2020.12.22 |
빈 태그(Empty tag) (0) | 2020.12.22 |
부모요소(Parent Element) & 자식 요소(Child Element) (0) | 2020.12.22 |
속성(Attribute)& 값(Value) (0) | 2020.12.22 |