티스토리 뷰

HTML and CSS

CSS 강좌 4강 - CSS속성(2/3)

ServerWorld 2016.07.07 10:36



WIDTH, HEIGHT


• Block 요소의 가로, 세로 사이즈를 지정




width, height 


width : 150px ;

width : 50% ;

height : 300px ;

height : 100% ;




MARGIN, PADDING


• 엘리먼트의 바깥여백(margin)과 안쪽 여백(padding)을 지정





1. margin

• margin-top

• margin-right

• margin-bottom

• margin-left


2. padding

• padding-top

• padding-right

• padding-bottom

• padding-left 


margin, padding 속성


margin-top: 10px;

margin-right:40px;

margin : 10px 40px 20px 10px ;

padding : 20px ;

margin : 20px 10px;

margin : 20px 10px 30px;


• 축약형의 순서는 위, 오른쪽, 아래, 왼쪽 시계방향으로 인식





MARGIN 병합


• 세로 방향으로 마진을 지정한 두개의 서로 다른 요소가 수직 방향으로 접해 있을 때,

두 요소 사이의 마진 간격은 두 요소의 마진값 중 큰값으로 병합


<style type="text/css">

body {margin:0; padding:0;}

.margin_box {width:100%; height:30px; margin:20px 0 50px; background-color:#dcdcdc;}

</style>

<div class="margin_box"></div>

<div class="margin_box"></div>

<div class="margin_box"></div>

<div class="margin_box"></div> 




MARGIN 을 이용한 BLOCK BOX 의 중앙 정렬


• Block box는 margin 좌우 속성값을 auto로 지정해 중앙에 위치시킬 수 있음

• 단, 정렬하려는 Block 요소에 width를 지정해야 함


<style type="text/css">

 .box1 {width:200px;height:100px;margin:0 auto;background-color:red;}

</style>

<div class="box1"></div>




BORDER


• 엘리먼트 바깥에 선을 그려줌(외곽선)

• 방향에 따라 스타일을 따로 지정가능

• width, height 값과는 별개로 엘리먼트의 padding 바깥쪽에 영역을 차지


1. border

• border-width

• border-style

• border-color 



2. border-방향

• border-방향-width

• border-방향-style

• border-방향-color 


3. border-style 속성

• solid (실선)

• dashed (끊어진 실선)

• dotted (점선)


border 축약형


border : 1px solid red ;

border : 1px dotted #0000FF ; 




BACKGROUND


• 엘리먼트 영역에 색상, 이미지를 채우는 속성


1. background-color : #fafafa ;

  • 색상이름/색상코드

  • transparent(투명)


2. background-image : url(http://... .gif) ;


3. background-repeat : no-repeat ;

  • repeat, no-repeat, repeat-x, repeat-y


4. background-position : 0px 10px ;

  • 0px 0px (left,top 기준)

  • left(right), top(bottom), center


background 축약형


background : #FF0000 url(daum.gif) no-repeat 0px 10px ;

background : red url(daum.gif) repeat-y left top ;

background : url(daum.gif) repeat-x 0px 0px ;


※ download & Next Menu



저작자 표시 비영리 변경 금지
신고
댓글