HTML/기초

HTML 문서의 구조

컴공 윤서혜 학습일기 2020. 5. 31. 12:47

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

 

 

DIV(막쓰는 태그)

<div></div>는 division의 약자로 분할을 뜻하고 문서의 부분이나 섹션을 정의한다. 명확한 의미를 가지지 않기 때문에 정말 많은 경우 단순히 특정 범위 묶는 wrap 용도로 사용한다. 보통 이렇게 묶인 부분들에 CSS나 JS를 적용하게 된다.

 

cf.막사용된다는것이 부정적인것보다 긍정적인 의미에 더 가깝다. 그래서 다양하게 사용할 수 있고, 의미가 없는곳 조차도 사용할 수 있기 때문에 모양을 만들어내는데 굉장히 특화되어서 사용 될 수 있다. 아무렇게나 묶고 묶음을 어떠한형태로도 만들 수 있기 때문에 JS나 CSS로 제어하는 용도로 사용이 된다.

//소스코드 예시. div는 div를 감쌀수 있다. 이렇게 어떠한 형태로도 다 사용이 가능하다.
<body>
    <div>
        <p></p>
    </div>

    <div>
        <div>
            <h1></h1>
            <p></p>
        </div>
    </div>
</body>

 

 

IMG(이미지 넣는 태그)

<img>는 HTML에 이미지를 삽입할 때 사용한다.

(웹페이지에 이미지를 삽입하는 방식은 크게 2가지로, 'HTML에서 삽입(IMG)'와 'CSS에서 삽입(Background)'가 있다.)

<body>
    <img src = "./kitty.png" alt = "cat">
</body>

<body>
    <이미지 경로 = "./kitty.png" 대체텍스트 = "cat">
</body>
속성 의미
src (필수) 이미지 URL URL
alt (필수) 이미지 대체 텍스트(alternate)를 지정  

 

'HTML > 기초' 카테고리의 다른 글

선언방식  (0) 2020.06.03
웹 표준 검사하기  (0) 2020.06.02
HTML 문서의 범위 및 기초 코딩방법  (0) 2020.05.31
태그란  (0) 2020.05.31
JPG, PNG, GIF, WEBP, SVG  (0) 2020.05.30