1. display
display은 웹페이지 상에서 요소들이 화면에서 어떻게 보여지는지, 다른 요소와 어떻게 상호 배치되는지를 결정한다.주로 태그마다 display기본값이 다르며, 주로 사용되는 속성값은 아래와 같다.
- none : 화면에 표시하지 않음
- block : 블록 박스
- inline : 인라인 박스
- inline-block : block과 inline의 중간 형태
2. display 속성
1. none
display : none
화면에서 표시하지 않고 영역도 차지 하지 않는다.
2. block
display : block
Block 태그는 블럭 형태로 영역을 잡는 태그로 한 줄에 하나만 나타나는 박스형태이다.
기본적으로 좌우 너비 100%이며 가로 영역을 모두 채운다.
해당 태그 다음에 오는 새로운 태그는 줄바꿈이 되어 다음줄에 나타난다. 항상 새로운 줄에 태그가 시작된다. width, height, margin, padding 속성 모두 반영 된다.
<div>, <form>, <li>, <ul>, <ol>, <p>, <h1>, <h2>, <h3> ...
3. inline
display : inline
Inline 태그는 박스가 아닌 내용을 포함하는 태그로 block 과 달리 줄 바꿈이 되지 않는다. 내용만큼(글자만큼) 공간을 차지하기 때문이다.
다른태그와 같은 줄에 배치 될 수 있다.
width와 height를 지정 할 수 없고, 지정하더라도 무시된다.
인라인 태그를 이용해서 개별 글자, 문장에 볼드 밑줄 색상 등의 효과를 줄 수 있다.
<a>, <span>, <button>, <input>, <img>, <video>, <audio>, <textarea> ...
4. inline-block
display : inline-block
block과inline의 중간 형태
block과 다르게 줄 바꿈이 되지 않아서 한 줄에 여러개가 올 수 있고, inline과 다르게 크기를 지정 할 수 있다.
3. display:none과 visibility:hidden 차이
visibility 속성을 hidden으로 설정한 것은 내용은 보이지 않지만 영역은 차지한다. 빈 공간이 생긴다.
display : none으로 설정하면 내용도 없고, 영역도 잡히지 않는다.
'WEB > CSS' 카테고리의 다른 글
Box Model / content-box, border-box / background-clip / 배경 이미지 설정 태그 (1) | 2022.05.31 |
---|---|
넘치는 텍스트, 공백 표현하는 태그 : overflow, text-overflow, white-space (0) | 2022.05.30 |
목록태그 CSS : 리스트 블릿기호 변경, 들여쓰기/내어쓰기 (0) | 2022.05.30 |
font-size : medium, smaller, larger, px, % / em, rem 비교 / 줄 바꿈, 글자 간격, 단어 간격 (0) | 2022.05.30 |
CSS, CSS 적용방법 / 선택자 - 태그, id선택자, 클래스, 전체 / 조합선택자 - 그룹, 자식, 자손, 형제 (2) | 2022.05.30 |