smarti,스마트아이

CSS padding, border

padding

padding 속성은 내용(content)과 테두리(border) 사이의 간격인 패딩 영역의 크기를 설정한다.
이러한 패딩 영역은 background-color 속성으로 설정하는 배경색의 영향을 함께 받는다.
CSS를 사용하면 패딩 영역의 크기를 방향별로 따로 설정할 수 있다.

padding 속성

CSS에서는 HTML 요소의 패딩 영역을 설정하기 위해 다음과 같은 속성을 제공한다.

 - padding : 모든 padding 속성을 이용한 스타일을 한 줄에 설정할 수 있음

 - padding-top : 윗쪽의 패딩(padding) 값을 설정함
 - padding-right : 오른쪽의 패딩(padding) 값을 설정함
 - padding-bottom : 아래쪽의 패딩(padding) 값을 설정함
 - padding-left : 왼쪽의 패딩(padding) 값을 설정함

div.pad {
    padding-top: 50px;
    padding-right: 10px;
    padding-bottom: 30px;
    padding-left: 100px;
}

패딩 축약 표현 (padding shorthand)

모든 padding 속성을 이용한 스타일을 한 줄에 설정할 수 있다.

div.four { padding: 20px 50px 30px 50px; }
div.three { padding: 20px 50px 30px; }

4개의 padding 속성값을 가질 때는 top, right, bottom, left 순으로 설정한다.
ex) padding: 10px 20px 30px 40px;
(위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있다.)
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;

 

3개의 padding 속성값을 가질 때는 top, right와 left, bottom 순으로 설정한다.
ex) padding: 10px 20px 30px;
(위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있다.)
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 20px;

 

2개의 padding 속성값을 가질 때는 top과 bottom, right와 left 순으로 설정한다.
ex) padding: 10px 20px;
(위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있다.)
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;

 

1개의 padding 속성값을 가질 때는 모든 패딩값을 같게 설정한다.
ex) padding: 10px;
(위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있다.)
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;

 

border

border 속성은 내용(content)과 패딩(padding) 영역을 둘러싸는 테두리(border)의 스타일을 설정할 수 있게 해준다.

CSS border 속성은 다음과 같다.

속성	설명
border	모든 border 속성을 이용한 스타일을 한 줄에 설정할 수 있음.
border-style	테두리(border)를 다양한 모양으로 설정함.
border-width	테두리(border)의 너비를 설정함.
border-color	테두리(border)의 색상을 설정함.
border-top	테두리(border)의 top 부분 속성을 한 번에 설정함.
border-top-style	테두리(border)의 top 부분의 스타일을 설정함.
border-top-width	테두리(border)의 top 부분의 너비를 설정함.
border-top-color	테두리(border)의 top 부분의 색상을 설정함.
border-right	테두리(border)의 right 부분 속성을 한 번에 설정함.
border-right-style	테두리(border)의 right 부분의 스타일을 설정함.
border-right-width	테두리(border)의 right 부분의 너비를 설정함.
border-right-color	테두리(border)의 right 부분의 색상을 설정함.
border-bottom	테두리(border)의 bottom 부분 속성을 한 번에 설정함.
border-bottom-style	테두리(border)의 bottom 부분의 스타일을 설정함.
border-bottom-width	테두리(border)의 bottom 부분의 너비를 설정함.
border-bottom-color	테두리(border)의 bottom 부분의 색상을 설정함.
border-left	테두리(border)의 left 부분 속성을 한 번에 설정함.
border-left-style	테두리(border)의 left 부분의 스타일을 설정함.
border-left-width	테두리(border)의 left 부분의 너비를 설정함.
border-left-color	테두리(border)의 left 부분의 색상을 설정함.

border-style 속성

border-style 속성을 이용하면 테두리(border)를 다양한 모양으로 설정할 수 있다.

 - dotted : 테두리를 점선으로 설정함.
 - dashed : 테두리를 약간 긴 점선으로 설정함.
 - solid : 테두리를 실선으로 설정함.
 - double : 테두리를 이중 실선으로 설정함.
 - groove : 테두리를 3차원인 입체적인 선으로 설정하며, border-color 속성값에 영향을 받음.
 - ridge : 테두리를 3차원인 능선효과가 있는 선으로 설정하며, border-color 속성값에 영향을 받음.
 - inset : 테두리를 3차원인 내지로 끼운 선으로 설정하며, border-color 속성값에 영향을 받음.
 - outset : 테두리를 3차원인 외지로 끼운 선으로 설정하며, border-color 속성값에 영향을 받음.
 - none : 테두리를 없앰.
 - hidden : 테두리가 존재하기는 하지만 표현되지는 않음.

.dotted {border-style: dotted;}
.dashed {border-style: dashed;}
.solid {border-style: solid;}
.double {border-style: double;}
.groove {border-style: groove;}
.ridge {border-style: ridge;}
.inset {border-style: inset;}
.outset {border-style: outset;}
.none {border-style: none;}
.hidden {border-style: hidden;}
.mix {border-style: solid dashed dotted double;}

border-color 속성

border-color 속성은 테두리(border)의 색상을 설정한다.
기본적인 color 속성값들뿐만 아니라 투명한 선을 나타내는 transparent 속성값을 사용할 수도 있다.
border-color 속성값이 설정되지 않으면 해당 요소의 color 속성값을 그대로 물려받는다.

.red { border-color: red; }
.green { border-color: rgb(0,255,0); }
.blue { border-color: #0000FF; }
.mix { border-color: red green blue maroon; }
.color { color: teal; }

border의 개별 설정

CSS를 사용하면 테두리의 위쪽, 오른쪽, 아래쪽, 왼쪽 부분에 대하여 개별적으로 스타일을 적용할 수 있다.

.mixA {
    border-top-style: dotted;
    border-right-style: double;
    border-bottom-style: dotted;
    border-left-style: double;
}
.mixB { border-style: dotted double; }

4개의 border-style 속성값을 가질 때는 top, right, bottom, left 순으로 설정한다.
ex) border-style: dotted dashed solid double;
(위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있다.)
border-style-top: dotted;
border-style-right: dashed;
border-style-bottom: solid;
border-style-left: double;

 

3개의 border-style 속성값을 가질 때는 top, right와 left, bottom 순으로 설정한다.
ex) border-style: dotted dashed solid; 

(위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있다.)

border-style-top: dotted;

border-style-right: dashed;

border-style-bottom: solid;

border-style-left: dashed;

 

2개의 border-style 속성값을 가질 때는 top과 bottom, right와 left 순으로 설정한다.
ex) border-style: dotted dashed;
(위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있다.)
border-style-top: dotted;
border-style-right: dashed;
border-style-bottom: dotted;
border-style-left: dashed;

 

1개의 border-style 속성값을 가질 때는 모든 테두리의 스타일을 같게 설정한다.
ex) border-style: dotted;
(위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있다.)
border-style-top: dotted;
border-style-right: dotted;
border-style-bottom: dotted;
border-style-left: dotted;
테두리 축약 표현(border shorthand)

 

border 속성을 이용한 스타일을 한 줄에 설정할 수 있다.

.good { border: 3px solid teal; }
.wrong { border: 5px teal; }

border 속성을 설정하기 위해서는 반드시 border-style 속성이 먼저 설정되어 있어야 한다.

 

CSS3 테두리(border)

CSS3에서는 테두리의 모서리를 둥글게 만들거나, 테두리에 이미지를 사용할 수 있다.

CSS3에서 새롭게 추가된 border 속성은 다음과 같다.

속성	설명
border-radius	모든 border-radius 속성을 이용한 스타일을 한 줄에 설정할 수 있음.
border-top-left-radius	테두리(border)의 top-left 부분 모서리의 스타일을 설정함.
border-top-right-radius	테두리의 top-right 부분 모서리의 스타일을 설정함.
border-bottom-right-radius	테두리의 bottom-right 부분 모서리의 스타일을 설정함.
border-bottom-left-radius	테두리의 bottom-left 부분 모서리의 스타일을 설정함.
border-image	모든 border-image 속성을 이용한 스타일 설정이 한 줄에 가능함.
border-image-source	테두리로 사용할 이미지를 설정함.
border-image-slice	테두리로 사용할 이미지를 자르는 방법을 설정함.
border-image-width	테두리로 사용할 이미지의 너비를 설정함.
border-image-outset	테두리 영역 너머로 테두리로 사용할 이미지가 얼마만큼 넘어갈지를 설정함.
border-image-repeat	테두리로 사용할 이미지의 중간 부분의 처리를 반복으로 할지 늘릴지를 설정함.

CSS3 border 속성 지원 버전

CSS3 테두리(border) 속성을 지원하는 주요 웹 브라우저의 버전은 다음과 같다. 또한, 브라우저별로 벤더 프리픽스(vendor prefix)를 이용해 이 기능을 최초로 지원한 버전도 같이 표기했다.

속성	ie	chrome	firefox	safari	opera
border-radius	9.0	5.0 4.0 -webkit-	4.0 / 3.0 -moz-	5.0 / 3.1 -webkit-	10.5
border-image	11.0	16.0 / 4.0 -webkit-	15.0 / 3.5 -moz-	6.0 / 3.1 -webkit-	15.0 / 11.0 -o-

border-radius 속성

CSS3에서는 모든 HTML 요소에 border-radius 속성을 설정하여 모서리를 둥글게 만들 수 있다.

#p_01 { height: 150px; width: 200px; border-radius: 25px; }
#div_01 { height: 150px; width: 200px; border-radius: 25px; }
#p_02 {
    background: url(/images/img_background_test.png);
    background-position: left top;
    background-repeat: repeat;
    border-radius: 25px;
}

border-radius 속성은 실제로 다음 네 가지 속성의 스타일을 한 줄에 설정한 것이다.
따라서 다음 속성들을 각각 사용하면 모서리별로 따로 스타일을 설정할 수 있다.

 - border-top-left-radius
 - border-top-right-radius
 - border-bottom-right-radius
 - border-bottom-left-radius

다음 예제는 모서리별로 다른 크기의 둥근 모서리를 설정하는 예제이다.

#p_01 {
    border-top-left-radius: 20px;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 60px;
    border-bottom-left-radius: 80px;
}

또한, border-radius 속성을 이용해도 모서리별로 다른 크기의 둥근 모서리를 설정할 수 있다.

#p_01 { border-radius: 20px 40px 60px 80px; }
#p_02 { border-radius: 20px 40px 60px; }
#p_03 { border-radius: 20px 40px; }
#p_04 { border-radius: 20px; }

4개의 border-radius 속성값을 가질 때는 top-left, top-right, bottom-right, bottom-left 순으로 설정된다.
ex) border-radius: 20px 40px 60px 80px; 

(위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있다.)

border-top-left-radius: 20px;

border-top-right-radius: 40px;

border-bottom-right-radius: 60px;

border-bottom-left-radius: 80px;

 

3개의 border-radius 속성값을 가질 때는 top-left, top-right와 bottom-left, bottom-right 순으로 설정된다.
ex) border-radius: 20px 40px 60px;
(위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있다.)
border-top-left-radius: 20px;
border-top-right-radius: 40px;
border-bottom-right-radius: 60px;
border-bottom-left-radius: 40px;

 

2개의 border-radius 속성값을 가질 때는 top-left와 bottom-right, top-right와 bottom-left 순으로 설정된다.
ex) border-radius: 20px 40px;
(위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있다.)
border-top-left-radius: 20px;
border-top-right-radius: 40px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 40px;

 

1개의 border-radius 속성값을 가질 때는 border-radius 속성값이 모두 같은 값으로 설정된다.
ex) border-radius: 20px;
(위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있다.)
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;

 

border-image 속성

CSS3에서는 요소를 둘러싸는 테두리(border)에 이미지를 사용할 수 있다.

border-image 속성은 다음과 같은 순서로 동작한다.

 - 테두리(border)로 사용할 이미지를 결정한다.
 - 이미지의 어느 부분을 자를 것인지 결정한다.
 - 테두리 중간 부분의 이미지 처리를 반복되게 할지 아니면 그냥 늘릴지를 결정한다.

우선 테두리로 사용할 이미지를 결정한다.

border-image 속성은 설정된 이미지를 바둑판처럼 9조각으로 나눈다.

그 후에 top, right, bottom, left에 해당하는 영역의 처리를 반복되게 할지 아니면 그냥 늘릴지를 결정하게 된다.

다음 예제는 round 속성값을 사용하여 테두리 중간 부분의 처리를 반복으로 설정한 예제이다.

#p_01 {
    border: solid 20px transparent;
    -webkit-border-image: url(/examples/images/img_css3_pattern.png) 34 round;
    -moz-border-image: url(/examples/images/img_css3_pattern.png) 34 round;
    -o-border-image: url(/examples/images/img_css3_pattern.png) 34 round;
    border-image: url(/examples/images/img_css3_pattern.png) 34 round;
}

border-image 속성을 설정하기 위해서는 반드시 border 속성이 먼저 설정되어 있어야 한다.

다음 예제는 stretch 속성값을 사용하여 테두리 중간 부분의 처리를 늘리는 것으로 설정한 예제이다.

#p_01 {
    border: solid 20px transparent;
    -webkit-border-image: url(/examples/images/img_css3_pattern.png) 34% stretch;
    -moz-border-image: url(/examples/images/img_css3_pattern.png) 34% stretch;
    -o-border-image: url(/examples/images/img_css3_pattern.png) 34% stretch;
    border-image: url(/examples/images/img_css3_pattern.png) 34% stretch;
}

위의 예제에서 볼 수 있듯이 border-image 속성값으로 전달되는 인수의 기본 단위는 %이다.

또한, 수직 테두리와 수평 테두리의 처리 방식을 다르게 설정할 수도 있다.

#p_01 {
    border: solid 20px transparent;
    -webkit-border-image: url(/examples/images/img_css3_pattern.png) 34 round stretch;
    -moz-border-image: url(/examples/images/img_css3_pattern.png) 34 round stretch;
    -o-border-image: url(/examples/images/img_css3_pattern.png) 34 round stretch;
    border-image: url(/examples/images/img_css3_pattern.png) 34 round stretch;
}

border-image 속성은 실제로 다음 5가지 속성의 스타일을 한 줄에 설정한 것다.

 - border-image-source
 - border-image-slice
 - border-image-width
 - border-image-outset
 - border-image-repeat

 

 

[세상살이] - 온라인에서 무료로 이미지, 동영상 용량 줄이기

온라인에서 무료로 이미지, 동영상 용량 줄이기

[코딩공부] - CSS 이미지스프라이트, 네비게이션바, 드롭다운

CSS 이미지스프라이트, 네비게이션바, 드롭다운

[코딩공부] - HTML5 API 1

HTML5 API 1

[세상살이] - 구글 메시지를 이용, PC에서 문자 보내기

구글 메시지를 이용, PC에서 문자 보내기

[디자인공부] - 포토샵으로 만화 텍스트 효과 문자 만들기

포토샵으로 만화 텍스트 효과 문자 만들기