블록속성과 인라인속성 태그
▶블록이란? 블록 방식에서는 HTML 요소가 브라우저 화면에 표시될 때 전체 행을 차지하여 앞 뒤로 자동 줄바꿈이 일어난다.
| 인라인(inline) : 문자를 꾸미는 서식 관련 태그 多 | 블록(block) : 보통 레이아웃에 관한 태그 多 |
| <span>, <a>, <img>, <input>, <textarea>, <br>, <button>, <select>, <option>, <script> 등 | <div>, <p>, <h1~6>, <form>, <table>, <ul>, <ol>, <li>, <video>, <header>, <footer>, <section>, <table>, <form>, <address>, <fieldset>, 시멘틱 태그 등 |
▶인라인이란? 인라인 방식에서는 HTML 요소를 브라우저 화면에 수평 방향으로 표시하고 줄 바꿈이 일어나지 않는다.
속성의 특징
▶인라인(inline) 방식의 특징
⑴ 수평 방향으로 요소가 배치되며 줄 바꿈이 적용되지 않는다.
⑵ 박스의 크기를 설정하는 width와 height 속성이 적용되지 않는다. = 가로/세로 값 부여X
⑶ 상하단 마진인 margin-top과 margin-bottom 속성이 적용되지 않는다. = 좌/우측만 부여가능
▶블록(block) 방식의 특징
⑴ 해당 요소의 앞 뒤에 자동 줄 바꿈이 일어나 새로운 줄에 요소가 표시된다. = 수직방향으로 요소배치
⑵ 박스의 크기를 설정하는 width와 height 속성이 적용
⑶ 모든 마진 설정이 가능
※단, 일부요소는 (address, h1~6, p 등) 블록요소를 포함 할 수 없다.
▶인라인 블록(inline-block) 방식의 특징
⑴ 인라인 방식에서와 같이 요소가 수평 방향으로 배치되고, 줄 바꿈은 일어나지 않는다.
⑵ 블록 방식에서와 같이 박스의 크기 설정이 가능
⑶ 블록 방식에서와 같이 모든 마진 설정이 가능
▶인라인 블록 태그의 종류 : <img>, <input>, <button>, <textarea>, <select>, <video>
▶차이
⑴ 인라인 요소 안에는 인라인 요소만 포함 할 수 있다.
⑵ 블록 요소는 블록과 인라인 모두를 포함 할 수 있다.
⑶ 인라인 블록 요소는 기본 인라인 요소이기 때문에 기본 너비가 콘텐츠의 너비값만 차지한다.
'코린이 개념잡기 > HTML' 카테고리의 다른 글
| <img> : 이미지 태그 (0) | 2023.03.12 |
|---|---|
| HTML 태그 (0) | 2023.03.12 |
| DIV 태그 VS SPAN 태그 / 시멘틱 태그(sementic tag) (0) | 2023.03.12 |
| 인코딩, 디코딩 (0) | 2023.03.12 |
| HTML과 웹의 개념 (0) | 2023.03.09 |