오늘도 지난 시간에 이어서 세번째로 CSS3를 정리해보려고 합니다.

박스 모델

기존 HTML tag는 사각형 박스로 다루어지며, 이 박스 크기나 배경색, 여백, 간격을 css로 조절할 수 있습니다.

구성

• 콘텐츠 - HTML tag의 텍스트나 이미지가 출력되는 부분입니다.

• 패딩 - 콘텐츠를 직접 둘러싸고 있는 내부의 여백 부분입니다.

• 테두리 - 패딩 외부의 테두리 부분입니다.

• 여백 - 테두리 바깥의 공간으로 인접한 이웃된 tag의 박스와의 거리입니다.

박스 편집

실제로 박스는 css로 아래와 같이 편집합니다.

div { width : 100px; 
height : 500px; 
margin : 400px; 
border-width : 300px; 
padding : 200px; }

점선 테두리

점을 나타내려면 dotted을 씁니다.

border-style : dotted;

border : 3px dotted blue

위와 같이 두께와 점선 그리고 색상까지 한번에 지정하여 적용할 수 있습니다.

둥근 모서리를 가진 테두리

둥근 모서리 테두리 만들때는 border-radius를 사용합니다.

border-radius : 10px 10px 10px 10px

위와 같이 각각의 모서리를 각각 지정할 수 있으며.

border-radius : 10px

이렇게 모두 동일하게 효과를 줄 수도 있습니다.

이미지 테두리

이미지 테두리를 만들 때는 border-image를 사용합니다.

테두리에 이미지를 입힐 수 있습니다.

박스 배경

<div> 박스에 배경을 꾸미려면,

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

위와 같이 하면되며, 이러면 사진이 커버하지 못한 공간에도 배경색이 출력됩니다.

그림자

텍스트 그림자를 만들 때는 text-shadow를 사용합니다. 박스에 그림자를 만들 때도 역시 box-shadow를 사용합니다.