overflow
- 요소의 크기 이상으로 내용이 넘쳤을 때, 보임을 제어하는 속성
- 기본값 visible
hidden : 넘친 내용을 잘라냄
scroll : 스크롤바 생성 / 넘치지 않은 영역도 같이 생성 됨.
auto : 넘친 부분만 스크롤바 생성
overflow: visible; overflow: hidden;
overflow: scroll; overflow: auto;
- 개별속성 : overflow-x , overflow-y
display
- 요소의 화면 출력(보임) 특성
- block - 상자 요소
- inline - 글자 요소
- inline-block - 글자 + 상자 요소
==> 위 세 가지는 html의 각 요소에 이미 지정되어 있는 값이 기본값이다.
- flex - 플렉스 박스 (1차원 레이아웃) => 요소의 수평 정렬 시 유용함.
- grid - (2차원 레이아웃)
- none - 화면에서 사라짐.
<body>
<span>Hello</span>
</body>span {
display: block;
width: 100px;
height: 100px;
background-color: yellowgreen;
}=> 인라인 요소인 span 태그에 display 값을 block으로 지정하여 가로 / 세로 너비를 가질 수 있게 만들 수 있다.
<body>
<div class="parent">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>.parent {
display: flex;
}
.box1 {
width: 100px;
height: 100px;
background-color: blueviolet;
border: 2px solid black;
}
.box2 {
width: 100px;
height: 100px;
background-color: blueviolet;
border: 2px solid black;
}
.box3 {
width: 100px;
height: 100px;
background-color: blueviolet;
border: 2px solid black;
}=> 수직으로 쌓이는 block 요소를 dispaly: flex를 통해 쉽게 수평으로 정렬할 수 있다.
opacity
- 요소의 불투명도
- 기본값 1 (불투명)
- 0~1 사이의 소수점으로 투명도 조절
opacity: 1; opacity: .7; opacity: .5; opacity: .2; opacity: .07;
=> 소수점 사용 시 앞에 0은 생략 가능.
'코드 정리 > CSS' 카테고리의 다른 글
| CSS 기본 속성(4) 배경 속성 (0) | 2022.11.24 |
|---|---|
| CSS 기본속성(3) 글꼴과 문자 속성 (0) | 2022.11.24 |
| CSS 기본 속성 (1) (0) | 2022.11.15 |
| CSS 단위와 색상표현 (0) | 2022.11.15 |
| CSS 스타일의 상속과 선택자 우선순위 (0) | 2022.11.15 |
