HTML 기본개념 정리

• Box와 Item

HTML의 구성요소를 크게 나누어 보자면
사용자에게 보여지지 않는 Box와
사용자에게 보여지는 Item으로 나눌 수 있다.

Box의 요소로는 아래와 같은 태그들이 있고

<Header>, <footer>, <section>, <article>, <nav>, <div>

Item의 요소는 아래와 같은 태그들이 있다.

<a>, <button>, <input>, <label>, <img>

HTML 화면을 Box단위로 나누어서 헤더, 내비게이션바, 사이드바, 메인(세션-아티클), 푸터로 나눌 수 있다.

• Tag의 구성요소

태그 Element의 구성은 Open tag <> 와 Closing tag </>가 짝을 이루어 만들어지고 그 안에 내용이 포함되는 <> Content </>형태로 구성된다.

<div>Content</div>

• Block 레벨, Inline 레벨

태그의 종류로는 Block 레벨 태그와 Inline 레벨 태그가 있는데
아래와 같은 경우에는 태그 안 내용이 나란히 표현된다.

<span>Hello</span> <span>world!</span>

👉 결과 예시: Hello world!

위 사용된 태그는 Inline 레벨 태그이기 때문에 Content가 나란히 표시될 수 있는 것이다.

반면에 아래와 같은 태그를 사용한다면 태그 안 내용의 길이와는 상관없이 나란히 표현되지 않고 줄이 바뀌어서 표현된다.

<div>Hello</div> <div>world!</div>

👉 결과 예시:

위 사용된 태그는 Block 레벨 태그이기 때문에 줄이 바뀌어서 표현된다.

• Tag의 Attribute(속성)

태그에는 Attribute(속성)을 지닐 수 있는 태그가 있는데 예를 들어서

<ol>
<li></li>
<li></li>
<li></li>
</ol>

위와 같이 순서가 있는 리스트를 만드는 경우 별다른 속성을 입력하지 않는다면 아래와 같이 1. 2. 3.의 순서가 자동으로 매겨지게 된다.

👉 결과 예시:

<ol type="i">
<li>첫번째</li>
<li>두번쨰</li>
<li>세번쨰</li>
</ol>

위와 같이 속성으로 type="i"로 지정하게 되면 로마 숫자 순서로 리스트가 만들어지게 되고 예시는 아래와 같이 구현된다.

👉 결과 예시:

1. 첫번째
2. 두번째
3. 세번째

------------------------------------------------------------------------------

학습기록의 내용은 드림코딩 사이트 엘리 강의를 바탕으로 정리했습니다.
출처 - https://academy.dream-coding.com/