안녕하세요.
Hynn 입니다.
앞선 글 포스팅에 이어서 HTML에서 사용되는 주요 Element 를 정리하고, 사용방식에 대해서 정리하려고 합니다.
다만, 이전 포스팅에서는 <Head> 항목에 관련된 주요 항목을 정리하였고, <Body> 에서 다루는 항목을 정리하고자 하려고 하는데요.
정리하기에 앞서, <Body> 에서 사용되는 항목은 반드시 알아야 할 개념을 하나 정리 후 작성하고자 합니다.
1. Block 과 In-Line 은 무엇인가?
2. Block 과 In-Line의 원리
3. Element 유형 및 예제
1. Block과 In-Line은 무엇인가?
Block과 In-Line 은 HTML을 올바르게 작성하기 위해서, 반드시 개발자가 알아야 할 특성입니다.
이는 "Display Porperty" 라고도 하는데, 이 속성은 이 주제에서 다루는 Block, In-Line 외에도 "In-line-block" 이라는 속성과 "None" 이라는 속성이 존재합니다.
하지만 대표적으로 위의 두가지 속성을 이해한다면, 나머지 두가지의 속성도 쉽게 이해가 가능하기 때문에, 이를 설명 후 다음 글로 넘어가고자 합니다.
2. Block과 In-Line의 원리
먼저 작성 예제 코드를 사용하여, Block과 In-Line의 예시 그림을 가지고 설명해보겠습니다.
아래와 같이 작성하면, 우리는 아래와 같은 그림을 볼 수 있습니다.
여기서 Block이라고 표현한 Porperty 는 한 영역의 전체를 사용합니다.
하지만 In-Line 이라고 표현한 영역은 작성된 만큼의 영역만을 차지합니다.
위의 세가지 그림을 가지고 이해가 어려울 수 있기 때문에, 아래와 같은 영역표시도를 예시로 들자면 다음과 같습니다.
그림실력이 좋지 못하지만.. 충분히 예시로 이해가 될 것이라고 생각합니다.
아래의 그림처럼, Block은 입력물과 상관없이 하나의 줄을 모두 차지하는 Porperty 입니다.
하지만 In-Line은 입력된 영역만큼만 차지하는 Porperty 입니다.
다음 글에서 다루게 될 모든 Element 는 항목마다, 위의 특성을 적용하여 사용하도록 되어 있습니다.
따라서, 이 Element 를 사용할 때 반드시 Block 인지 In-Line인지를 알고 적용해야 합니다.
<div>Block1</div>
<div>Block2</div>
<span>In-Line1</span>
<span>In-Line2</span>
<div>Block3</div>
<span>Block4</span>
<span>Block5</span>다음 글에서는 BODY 내에 Block 과 In-Line 별의 Element 를 나누어 정리해보도록 하죠.
'개발공부일지 > HTML' 카테고리의 다른 글
| HTML/CSS - Table 을 사용하여 표 만들기 (0) | 2022.11.21 |
|---|---|
| HTML/CSS - Display Flex 에 관하여 (0) | 2022.10.28 |
| HTML HTML 기본 개념 정리 및 가이드 - Inline Element (0) | 2022.10.21 |
| HTML HTML 기본 개념 정리 및 가이드 - Block Element (0) | 2022.10.21 |
| HTML 기본 개념 정리 및 가이드 - 기초 (0) | 2022.10.20 |
댓글