Developer Factory

[css] 박스 border 본문

Developer/Css

[css] 박스 border

Jeremy.Park 2014. 6. 16. 10:18
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- 박스
=>
1. border
; 엘리먼트의 테두리 지정
; border-top, border-left, border-right, border-bottom (개별 지정 가능)

2. padding
; 테두리와 내용 사이의 여백 지정
; padding-top, padding-left, padding-right, padding-bottom (개별 지정 가능)
; 사용법은 아래의 margin과 같다.

3. margin
; 테두리 바깥 여백 지정
; margin-top, margin-left, margin-right, margin-bottom (개별 지정 가능)
; margin: top left bottom right (순서로 값 지정)
; margin: top/bottom left/right (두개의 값으로 지정 가능)
; margin: 값 (한개의 값을 지정하면 사방 모두에 적용)
; 위의 엘리먼트 마진과 아래의 엘리먼트 마진은 겹쳐진다.(주의)
-> 상단 엘리먼트에서 bottom에 준 마진과 하단 엘리먼트에서 top에 준 마진중 더 큰 것이 적용된다


-->
<html>
<head>
<meta http-equiv="Content-Type" content= "text/html; charset=UTF-8">
<title> CSS006</title >

<style type="text/css" >
#d1 {
  border: 1px solid red;
  border-left: 5px solid red;
  border-right: 20px solid red;
  padding-left: 10px;
  margin-top: 10px;
  margin-bottom: 20px;
}

#d2 {
  width: 180px;
/*   height: 180px; */
  margin-top: 10px;
  border: 1px dotted blue;
}


</style>

</head>
<body>

오호라.. 비트교육센터...

<div id="d1" >
       <div id="d11" >
             <h1 id="header01" class= "c1 c2">테스트1 </h1>
             <p class="c1 c2" >테스트...01</ p>
             <h1 id="header02" >테스트2</ h1>
             <p> 테스트...02</p >
       </div>
      
       <div id="d12" >
             <h1 id="header03" class= "c2">테스트3 </h1>
             <p class="c2" >테스트...03</ p>
             <h1 id="header04" >테스트4</ h1>
             <p> 테스트...04</p >
       </div>
</div>

<div id="d2" >
       <h1 id="header05" class= "c1">테스트5 </h1>
       <p class="c1" >테스트...05</ p>
       <h1 id="header06" >테스트6</ h1>
       <p> 테스트...06</p >
       <div id="d21" >
       <h1> 테스트7</h1 >
       <p> This document interoperability of the Web.</p >
       </div>
</div>
</body>
</html>


저작자표시

'Developer > Css' 카테고리의 다른 글

[css] 이미지 파일로부터 일부 이미지 추출  (0) 2014.06.16
[css] 엘리먼트의 배치  (0) 2014.06.16
[css] 폰트 다루기  (0) 2014.06.16
[css] 의사(pseudo) 셀렉터(셀렉터의 상태)  (0) 2014.06.16
[css] 복잡한 선택 조건  (0) 2014.06.16
'Developer/Css' Related Articles more