div로 박스(box)만들기 [01]

전자책에서 많이 사용되는 box 만들기 [01]

CSS에 내용입력 후 HTML에서 구현

CSS에서 만들고 싶은 박스에 대한 정보를 div에 설정 후 HTML에서 입력해주면 됩니다.

 

[css]

div.box01 { border: 1px solid #000000; padding: 0.5em; } css

* border는 선을 의미하고 1px는 선의 두께 solid는 실선, #000000은 검정색으로 선의 색을 의미합니다.

pddding은 만들어진 테두리 안에  텍스트 입력시 내부 여백을 의미합니다. 아래 미리보기를 보면 텍스트 위, 아래, 옆으로 0.5em의 여백이 들어가 있습니다. padding을 설정하지 않으면 글자 주변으로 테두리가 타이트하게 붙고 padding의 숫자를 높게 넣으면 테두리 안의 여백이 더 커지게 됩니다.

 

 

여기서는 solid를 사용해서 아래의 미리보기에서 실선으로 나오지만  solid 부분에 다른 코드를 넣으면 다른 형태의 box를 구현할 수 있습니다.

solid: 실선, dashed: 파선(선으로 된 점선), dotted: 점선(원으로 된 점선), double: 이중선(double을 사용할 경우 px부분에서 4px이상을 사용해야 이중선이 구현이 됨)

 

[HTML]

<div class="box01"> <p>넣고싶은 내용</p> </div> html

 

 

[미리보기]

 

응용된 버전의 테두리는 [02]에서 자세히 설명드리겠습니다.