[CSS] - 박스 모델

박스 모델

CSS에서 레이아웃과 공간 배치를 다루는 개념
HTML 요소들은 모두 사각형 박스로 간주되며, 여러가지 속성을 가지고 있다.

1. 콘텐츠 영역
width, height
2. 패딩
padding-top, padding-right, padding-bottom, padding-left
padding : 24px 0px 0px 24px (시계방향)
3. 테두리 영역
border-style, border-width, border-color
4. 마진 영역
margin-top, margin-right, margin-bottom, margin-left

실제 너비: width + padding-right + padding-left + border-right-width + border-left-width + margin-right + margin-left
실제 높이 (마찬가지!)

---

 

박스 모델을 구성하는 CSS3 프로퍼티

 

---

 

<div> 태그의 박스 모델 사례

 

 

---

 

박스 모델의 색, 테두리, 단축프로퍼티

 

---

 

 

둥근 모서리 테두리 만들기 - border-radius

 

---

 

배경 다루기

 

 

background-color, background-image
둘다 지정되면 배경 이미지가 출력되지 않는 영역에 배경색 출력                    

div {
     background-color : skyblue;
     background-image : url("media/spongebob.png");
    }

         

배경 이미지의 위치, background-position   

 background-position : center center; /* 박스 중간에 이미지 출력 */

 

배경 이미지 반복 출력, background-repeat

background-repeat : repeat-y; /* 위에서 아래로 이미지 반복 출력 */

 

 

---

 

텍스트 그림자, text-shadow

 

 

---

 

box-shadow로 박스 그림자 만들기

 

 

 

 

 

마우스 커서 제어, cursor