Younho9 NotesCSS 속성 06. display
❗️ 해당 글은 패스트캠퍼스 - 프론트엔드 개발 강의에서 HTML & CSS, SASS(SCSS) Part의 박영웅 강사님의 강의자료를 정리한 것입니다.
display
요소의 박스 타입(유형)을 설정
속성 값
| 값 | 의미 | 기본값 |
|---|---|---|
| block | 블록 요소( div 등) | |
| inline | 인라인 요소( span 등) | |
| inline-block | 인라인-블록 요소( input 등) | |
| 기타 | table , table-cell , flex 등 | |
| none | 요소의 박스 타입이 없음(요소가 사라짐) |
☝️ inline-block 은 기본적으로 inline 으로 수평으로 쌓이는데, width , height 를사용할 수 있고 margin , padding 의 top , bottom 을 사용할 수 있는 block 의 특성을 갖고 있다
인라인(Inline) 요소과 블록(Block) 요소의 margin padding
- 인라인 요소
<span></span>
<span></span>
span {background: orange;padding-top: 10px;padding-right: 10px;padding-bottom: 10px;padding-left: 10px;}
span {background: orange;padding-top: 10px;padding-right: 10px;padding-bottom: 10px;padding-left: 10px;}
인라인 요소에서 padding-top 은 값을 바꾸어도 계속 0 이었고, padding-right , padding-left 는 값에 따라 변화했다. padding-bottom 은 padding-right 또는 padding-left 이 0 이 아닌 경우에 값에 따라 변화했다.
span {background: orange;padding: 10px;margin-top: 10px;margin-right: 10px;margin-bottom: 10px;margin-left: 10px;}
span {background: orange;padding: 10px;margin-top: 10px;margin-right: 10px;margin-bottom: 10px;margin-left: 10px;}
인라인 요소에서 margin-top 과 margin-bottom 이 모두 값을 바꾸어도 변화하지않았고, margin-left 와 margin-right 는 모두 값에 따라 변화했다.
- 블록 요소
<div></div>
<div></div>
div {width: 100px;height: 100px;padding: 100px 100px 100px 100px;margin: 100px 100px 100px 100px;background: tomato;}
div {width: 100px;height: 100px;padding: 100px 100px 100px 100px;margin: 100px 100px 100px 100px;background: tomato;}
블록 요소의 padding , margin 은 모두 값에 따라 변화했다.
- 인라인-블록 요소
<input type="text">
<input type="text">
input {width: 100px;height: 100px;margin: 50px 0;padding: 10px 0;}
input {width: 100px;height: 100px;margin: 50px 0;padding: 10px 0;}
인라인-블록 요소인 input 태그는 인라인 요소가 갖지 못하는 width , height , margin-top , margin-bottom , padding-top , padding-bottom 의 속성을 모두가질 수 있다.
display: none;
display: none; 은 opacity: 0; 가 존재하지만 보이지 않게만 하는 것과는 달리요소가 완벽히 존재하지 않는 것처럼 만들어준다.
Reference
패스트캠퍼스 - 프론트엔드 개발 강의 - HTML & CSS, SASS(SCSS) Part by ParkYoungWoong