HTML 구조 및 특징

서지우·2023년 6월 22일

HTML / CSS

목록 보기

4/12

HTML 구조

아래 주석으로 설명함.

s03.html(실습)

<!-- DOCType은 문서의 타입을 명시한다. -->
<!-- 아래와 같으면 html5버전임을 알린다 -->
<!DOCTYPE html>
<!-- html태그는 문서의 시작을 알린다. -->
<!-- 무조건 html문서에 포함되어야 한다. -->
<html lang="en">
<!-- head는 문서의 메타데이터가 들어간다 -->
<!-- 무조건 html문서에 포함되어야 한다 -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>내 홈페이지</title>
</head>
<!-- body는 문서의 내용이 들어가는 부분이다. -->
<!-- 무조건 html문서에 포함되어야 한다. -->
<body>
    
</body>
</html>

HTML 특징

block

블록은 화면의 한줄만 포함.
높이와 넓이를 가질 수 있음.

inline

태그가 내용만 감싼다

inline-block

기본적으로 inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치되지만, block 엘리먼트처럼 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능.

다시 말해서, 내부적으로는 block 엘리먼트의 규칙을 따르면서 외부적으로 inline 엘리먼트의 규칙을 따르게 되는 것

s04.html(실습)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        div {
            background-color: red;
            height: 100px;
        }
        span {
            background-color: blue;
            /* inline태그인 span태그는 높이와 넓이가 세팅이 되지 않는다 */
            height: 100pxs;
        }
        .ib {
            background-color: green;
            height: 100px;
        }
    </style>
    <title>Document</title>
</head>
<body>
    <div>블록 태그입니다</div>
    <span>인라인 태그입니다</span>
    <span>인라인 태그입니다</span>
    <div class="ib" style="display: inline-block;">인라인 블록 태그입니다</div>
    <div class="ib" style="display: inline-block;">인라인 블록 태그입니다</div>
</body>
</html>

부모 자식 형제

태그 안의 태그를 자식이라고 한다.

자신을 감싼 태그를 부모라고 한다.

자신과 같은 범위에 있는 태그를 형제라고 한다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
        .first {
            background-color: red;
        }
    </style>
    <title>Document</title>
  </head>
  <body>
    <div>
        <div class="first">첫째</div>
        <div>둘째</div>
        <div>
            <div>첫째손자</div>
        </div>
    </div>
  </body>
</html>