Programming Learning Diary

BODY 태그(div, image), 웹 표준 검사

페이지 정보

작성일 21-01-14 08:32

본문

HTML 문서의 구조

<body></body> 안에서 사용하는 태그들은 HTML 문서의 구조를 나타냅니다.

DIV(막 쓰는 태그)

<div></div>의 ‘div’는 ‘division’으로 약자로 ‘분할’을 뜻하고 ‘문서의 부분이나 섹션을 정의’합니다.
명확한 의미를 가지지 않기 때문에 정말 많은 경우 단순히 특정 범위를 묶는(wrap) 용도로 사용합니다.
보통 이렇게 묶인 부분들에 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>


“DIV는 아무 의미가 없다. 왜냐하면 아무 의미가 없기 때문이다.”

IMG(이미지 넣는 태그)

<img>는 HTML에 이미지를 삽입할 때 사용합니다.
(웹 페이지에 이미지를 삽입하는 방식은 크게 2가지로, ‘HTML에서 삽입(IMG)’과 ‘CSS에서 삽입(background)’이 있습니다)

<body>
<img src="./kitty.png" alt="냥이">
</body>
<!-- 다음과 같이 이해할 수 있습니다. -->
<body>
<이미지 경로="./kitty.png" 대체텍스트="냥이">
</body>


속성의미
src(필수)이미지의 URLURL
alt(필수)이미지의 대체 텍스트(alternate)를 지정

위 표에서 ‘(필수)’라고 되어 있는 속성들(srcalt)은 <img>를 사용할 때 반드시 포함되어야 할 속성(필수 속성, Required Attributes)입니다.
만약 <img src="./kitty.png">라고 작성하여 alt 속성이 누락되었다면 이는 웹 표준에 어긋납니다.

웹 표준 검사하기

우리가 작성한 HTML 문서가 표준에 부합하는지 테스트를 해볼 수 있습니다.
W3C validator에 접속하여 작성한 HTML 문서를 업로드하고 테스트를 시작하세요!
기본적인 표준 여부를 판단할 수 있습니다.
특히 입문자라면 익숙해질 때까지는 자주 확인하는 것이 좋습니다.

웹 표준 검사 결과 alt 누락

위에서 <img src="./kitty.png">라고 작성했을 때 나오는 결과입니다.
HTML 문서를 작성하면서 지켜야하는 이러한 규칙들이 많이 있습니다.

테스트 통과가 웹 표준/웹 접근성의 준수 여부를 최종적으로 결정하진 않습니다. 이 테스트는 사실 기본 문법 검사에 가깝습니다.

또는 사이트(페이지) 주소로 검사할 수도 있습니다.
다음은 naver.com을 검사한 결과입니다.

웹 표준 검사 결과 naver.com



댓글목록

등록된 댓글이 없습니다.