[CSS] display | border | 그림자속성 | 벤더 프리픽스

24.03.13 20일차

목차

1. display

2. border

3. 그림자속성

4. 벤더 프리픽스

---

 

1.display

display: inline;  : block 타입을 inline으로 지정

inline으로 지정되었기 때문에 style 설정으로 박스 크기를 설정했지만 적용되지 않음

display: inline-block;  : 상하좌우 모두 margin과 padding을 적용 가능

 

 

diaplay hidden : 통채로 사라짐

visibility hidden : 보이지는 않지만 여백으로 자리를 차지함

 

2. border

1. 테두리 설정

스페이스바로 위의 세줄 명령어를 한줄에 입력 가능

 

2. border-radius : 테두리가 둥근 사각형 설정

 *사각형의 테두리를 각각 지정할 수 있다(시계방향)

시계 방향대로 50, 40, 20, 10

 

 

3. 그림자속성

1. text-shadow : 오른쪽 아래 흐림도 색상

text-shadow

글자 그림자

 

2. box-shadow : 오른쪽 아래 흐림도 색상

box-shadow

박스 그림자

 

 

4. 벤더 프리픽스

CSS 속성이 브라우저에 관계 없이 모든 곳에서 적용되도록 하는 것