이번에 정리를 해볼 것은 block형 태그와 Inline형 태그입니다. 태그를 사용할 때 이 점을 유의해서 사용하면 훨씬 수월하게 페이지를 구성할 수 있다고 하더군요. 한번 정리해보고 공부해보겠습니다!
1. Block 태그? Inline 태그?
1) Block 태그
Block 태그는 box를 치는 태그들이라고 생각하면 편하다. 전체적인 틀을 짠다던지 구조를 만들 때 사용하는 태그들은 Block 태그들이다. 특징은 아래와 같다.
- 항상 새로운 줄에 태그가 생성
- 좌우 너비가 100%라서 한 줄을 독차지
- 오른쪽에 공간이 남아있더라도 새로운 태그는 다음 줄에 생성된다.
2) Inline 태그
Inline 태그는 위에 block 태그와는 다르게 내용을 적는 태그라 생각하면 된다. 블록 태그로 짜여진 틀 안에 내용을 적을 때 사용하는 태그들이다. 특징은 아래와 같다
- 좌우 공간을 필요한 만큼만 차지한다.
- 이전 이후 태그 사이에 공간이 있다면 그 공간에 배치된다.
- 다른 태그와 같은 줄에 배치될 수 있다.
2. 태그 분류 및 정리
Block형 | Inline형 |
<header>, <section>, <footer>, <article>, <nav>, <div>, <form>, <ul>, <ol>, <p>, <h1>, <h2>, <h3>, ... | <a>, <span>, <button>, <input>, <img>, <video>, <audio>, <script>, <textarea>, <strong>, ... |
3. Block 태그 예시
See the Pen Untitled by KwonRakhyun (@nack1400) on CodePen.
4. Inline 태그 예시
See the Pen Untitled by KwonRakhyun (@nack1400) on CodePen.
이상 인라인 태그와 블록 태그를 알아보고 분류해보았습니다!
'HTML, CSS' 카테고리의 다른 글
[HTML/CSS] #2 position 속성 정리 (박스 위치 고정, 설정, static, relative, absolute, fixed, sticky) (0) | 2021.12.26 |
---|---|
[HTML/CSS] #1 display 속성 정리 (태그 줄바꿈, 블록, 인라인, 인라인블록) (0) | 2021.12.26 |
[HTML] #8 테이블 (테이블, 테두리, 열 합치기, 행 합치기, 테이블 제목 설정) (0) | 2021.12.02 |
[HTML] #7 리스트 (순서가 있는 리스트 ol, 순서가 없는 리스트 ul, 리스트 모양, 숫자 바꾸기) (0) | 2021.12.02 |
[HTML] #6 html 링크와 이미지 (a 태그, 이미지 삽입) (0) | 2021.11.30 |