07_영역 관련 스타일

kojam9041·2022년 4월 13일
0

KH정보교육원 - CSS

목록 보기
6/11

여백 및 간격

1. padding

내용물영역(content)과 테두리영역(border)사이의 거리(여백)을 조정하는 스타일속성
(패딩을 따로 지정하지 않으면 0px이 잡힘.)
<style>
  .test{
  		background-color: yellow;
  		border : 10px solid black; /*div요소는 border영역까지 포함*/
  		width:100px;
  		height:100px; 
  		/*width와 height는 content영역의 크기를 지정*/  
  }
</style>  
<body>
    <h4>기준 div</h4>
    <div class="test">기준 div</div>
</body>  
<style>
/*  
.test{
  	  background-color: yellow;
  	  border : 10px solid black; 
      // div요소는 border영역까지 포함
  	  width:100px;
  	  height:100px; 
  	  // width와 height는 content영역의 크기를 지정 
}
*/  
#test1{
       padding : 100px;  /*위, 아래, 좌우로 균일하게 100px*/
}
#test2{
       padding-top : 50px; /*위쪽에만 50px*/
       padding-left : 100px;
}
#test3{
       padding : 50px 20px 10px 0px; /*위부터 시계방향으로 순차적으로 패딩값을 지정*/
       padding : 50px 20px; /*위아래, 좌우로 각각 묶어서 패딩값 지정*/
}  
</style>  
<body>
    <div id="test1" class="test">콘텐츠 영역</div>

    <div id="test2" class="test">콘텐츠 영역</div

    <div id="test3" class="test">콘텐츠영역 </div>
    <!-- 위쪽 , 오른쪽, 아래쪽, 왼쪽 -->
</body>

2. margin

 타 요소들 간의 간격을 조정할 때 사용
 (바깥여백, 실제 요소의 범위가 아님)
<style>
#test4{
       margin : 50px /* 상하좌우로 50px 떨어짐. */
}
        
#test5{
       margin-top : 50px;
       margin-left : 20px;
}

#test6{
       /* margin : 30px 20px 10px 0px; */
       margin : auto; 
  	   /* 화면 크기가 변화할 때, 좌우 간격을 중간으로 자동으로 맞춰줌. */
}  
</style>  

<body>
    <div id="test4" class="test">콘텐츠 영역</div>
  
  <div id="test5" class="test">콘텐츠 영역</div>
  
    <div id="test6" class="test">콘텐츠 영역</div>
   
    <!-- margin설정을 주지 않을 시, 영역이 붙어있음.-->  
</body>
profile
kojam9041
이전 포스트

06_목록 관련 스타일

다음 포스트

08_테두리 관련 태그

0개의 댓글