박스 모델
border-radius : 박스 테두리 지원
-둥근 모서리 : border-radius : 50px;border-image : 이미지 테두리 지원
- border-image : url("이미지url") "이미지에서 떼어낼 px" "배치형태"
-이미지 테두리 만드려면
1) border-width가 0이 아니어야 함.
2) border-style이 먼저 지정되어 있어야 함.
시각적 효과
-
text-shadow : 텍스트 그림자, box-shadow : 박스 그림자
- h-shadow, v-shadow : 원본과 그림자 사이의 수평/수직 거리(필수)
- blur-radius : 흐릿하게 번지는 정도
- color : 그림자 색
- none : 그림자 효과 없음
<box-shadow에만 있는 설정>
- spread-radius : 그림자 크기
- inset : 음각 박스
배치
-
position : 박스 배치
- static : 정적 배치(디폴트)
- relative : 상대 배치(현재 위치 기준으로 박스 위치 조절)
- absolute : 절대 배치(브라우저 상 위치 조절)
- fixed : 고정 배치(뷰포트 상 위치 조절)
- float left, right : 유동 배치(왼/오른편 배치)
-
z-index : 겹치는 위치 >> position이 relative/absolute일 경우에만 적용
-
visibility : hidden - 화면에서 요소 숨기기. 공간 할당 o
-
display : none - 화면에서 요소 없애기. 공간 할당 x
