CSS 속성 종류2_CSS

기본 설정 div {border 1px solid #000;}

padding

<div class="my-padding01 tbr">안녕하세요.</div>
<div class="my-padding02 tbr">안녕하세요.</div>

- 안쪽 여백, 전체 혹은 상하좌우 별도 안쪽 여백 설정 가능

 

.my-padding01 {padding:10px;}

.my-padding02 {padding-left:20px;}

​

margin

<div class="my-margin01 tbr">안녕하세요</div>

- 밖 여백, 전체 혹은 상하좌우 별도 밖 여백 설정가능

- 고정적인 사이즈

.my-margin01{margin:20px;}

.my-margin02{margin-top:30px;}

 

width, height

- 블럭요소의 가로, 세로 사이즈 지정

.my-size01{width:500px;heighit:300px;}

<span class="my-size01 tbr">인라인 요소 테스트</span>

.my-size01{width:500px;height:300px;}

}

<div class="my-size01 tbr">블럭 요소 테스트</div>

 

background

<div class="my-bg01 tbr">배경 색상 테스트</div>

- 배경 색상 및 배경 이미지 설정

- 배경 이미지 위치 및 패턴 설정 등 가능

.my-bg01 {background:#000;color:#fff

;}

.

my-bg03 {background-image:url("http://www.ksmart.or.kr/layouts/bluebDesign/_var/home/logoImage.png"); height:300px;}

- 배경 이미지 반복 설정

repeat-x : 가로 반복

repeat-y : 세로 반복

no-repeat : 반복 없음

- 배경 이미지 위치 설정 : background-position