① display 속성 ⭐
display 속성을 상속되지 않음
- block : block 특성을 가지는 요소로 지정
- inline : inline 특성을 가지는 요소로 지정
- inline-block : inline-block 특성을 가지는 요소로 지정
- none : 해당 요소를 화면에 표시하지 않음. (공간조차 사라짐)
1. block 레벨 요소
따로 설정하지 않아도 일반적으로 태그가 갖게 되는 기본값.
- 항상 새로운 라인에서 시작
- 화면 크기 전체의 가로폭을 차지 (width 100%)
- width, height, margin, padding 속성 지정이 가능
- block 레벨 요소 내에 inline 레벨 요소를 포함할 수 있음
block 레벨 요소의 예시) div, h1 ~ h6, p, ol, ul, li, hr, table, form
<head>
<style>
div:nth-of-type(1) {
background-color: #FFA07A;
padding: 20px;
}
div:nth-of-type(2) {
background-color: #FF7F50;
padding: 20px;
width: 300px;
}
</style>
</head>
2. inline 레벨 요소
컨텐츠를 감쌀 정도의 크기만 갖게 됨.
- 새로운 라인에서 시작하지 않으며 문장의 중간에 들어갈 수 있음
- width, height, margin-top, margin-bottom 프로퍼티를 지정할 수 없음. 상, 하 여백은 line-height로 지정
- inline 레벨 요소 뒤에 공백이 있는 경우, 정의하지 않은 space(4px)가 자동 지정
- inline 레벨 요소 내에 block 레벨 요소를 포함할 수 없음
inline 레벨 요소의 예시) span, a, strong, img, br, input, select, textarea, button
3. inline-block 레벨 요소
inline과 block의 특성을 합쳐놓은 속성.
기본적으로 inline의 속성을 지니고 있으나(content 너비만큼 가로폭 차지), 임의로 크기 변경이 가능.
- block 레벨 요소처럼 width, height, margin, padding 프로퍼티를 모두 정의할 수 있음
- 상, 하 여백을 margin과 line-height 두가지 속성 모두를 통해 제어할 수 있음
- inline-block 레벨 요소 뒤에 공백이 있는 경우, 정의하지 않은 space(4px)가 자동 지정
<ul>
<li>one</li
><li>two</li
><li>three</li>
</ul> /* → 공백 제거 방법 */
② visibility 속성
요소를 보이게 할 것인지 보이지 않게 할 것인지를 정의
- visible : 해당 요소를 보이게 함 (기본값)
- hidden : 해당 요소를 보이지 않게 한다.
display: none;
과 다르게 해당 요소의 공간은 사라지지 않고 남아있다.
- collapse : table 요소에 사용하며 행이나 열을 보이지 않게 함
- none : table 요소의 row나 column을 보이지 않게 함
③ opacity 속성
요소의 투명도를 정의.
0.0 (투명) ~ 1.0 (불투명)
div:hover, img:hover {
opacity: 1.0;
}
🎁 참조 및 출처