HTML/기초

BODY 태그(div, image), feat.웹 표준 검사 --> HTML 문서의 구조

컴공 윤서혜 학습일기 2020. 12. 22. 19:35

<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

 

The W3C Markup Validation Service

Validate by File Upload Note: file upload may not work with Internet Explorer on some versions of Windows XP Service Pack 2, see our information page on the W3C QA Website.

validator.w3.org