1.border 이해하기 2.border의 속성 3.border-radius 이해하기(css3) 4.box-shadow를 이용한 박스에 그림자 효과 주기(css3)

1. 처음부터 다시 배우는
HTML5&CSS3
실전 웹 표준 사이트 제작까지
양용석(ugpapa@gmail.com)

2. 처음부터 다시 배우는 HTML5 & CSS3
강의 목차
1. border 이해하기
2. border의 속성
3. border-radius 이해하기(css3)
4. box-shadow를 이용한 박스에 그림자 효과 주기(css3)

3. 처음부터 다시 배우는 HTML5 & CSS3
border 이해하기
CSS로 레이아웃을 디자인할 때 border는 가장 많이 사용되는 요소 중 하나입니다.
디자인적으로도 상당히 유용하게 사용할 수 있지만 웹 페이지 레이아웃 버그를 잡을 때도 사용할 수 있
습니다.
여기서 “레이아웃 버그를 잡는다.”는 의미는 블록 태그의 요소들이 값의 중첩으로 인하여 엉뚱한 위치
에 가 있는 경우가 있습니다. 이럴 경우 border를 이용해서 그 블록 부분을 화면상에서 표시해 주면 레
이아웃이 중첩되어 있는 부분 그리고 왜 엉뚱한 위치에 블록이 위치해 있는지 찾아낼 수 있습니다.
또한 CSS3에서는 border-radius 요소를 도입하여, 이전 버전의 CSS에서는 편법으로 둥그런 테두리를
만들었던 것을 하나의 코드로 만들어 버립니다.
필자가 CSS3에서 이 기능을 보고 왜 이제야 이런 기능이 나왔는지 원망할 정도로 border-radius 기능은
포토샵의 힘을 빌리지 않고서도 멋진 디자인 효과를 낼 수 있습니다.

4. 처음부터 다시 배우는 HTML5 & CSS3
border의 속성
border의 속성도 margin과 padding 값을 입력할 때와 마찬가지로 단축형과 일반형 두 가지 방법이 있습
니다.
방법1 일반형
border-width : 속성값;  두께를 지정합니다.
border-style: 속성값;  여기에는 dashed, dotted, double, groove, inset, outset, ridge, solid, none 을
지정할 수 있습니다.
border-color: 속성값;  여기는 색상값을 지정합니다.
방법2 단축형
border: 두께 스타일 컬러 ;  속성을 부여하는 순서는 상관없습니다.

5. 처음부터 다시 배우는 HTML5 & CSS3
border의 속성
위에서부터 아래로
순서대로
➊
dashed(➊),
➋ dotted(➋),
double(➌),
➌
groove(➍),
➍ inset(➎),
outset(➏),
➎ ridge(➐),
solid(➑),
➏
none(➒)
➐
의 속성을 지정해 줬습
➑ 니다.
➒
border 속성 source/ch07/pic7-6.html 다양한 브라우저에서 결과를 확인해 보세요.

6. 처음부터 다시 배우는 HTML5 & CSS3
border의 속성
앞 페이지의 그림을 보면 브라우저에 따라 결과의 차이가 있는 것을 볼 수 있습니다. 구글 크롬에서는
모든 값이 정확하게 표현되지만 IE 9에서는 double 이후의 값들은 동일하게 표현되는 것을 알 수 있습
니다. 특히 브라우저에서 dashed 와 dotted를 표현하는 방식은 모든 브라우저에서 약간의 차이를 보입
니다. 그래서 dashed와 dotted를 사용할 때는 각 브라우저들만의 표현 방식을 비교하면서 사용해야 합
니다.
border 또한 네 방향을 지니고 있습니다. 그렇기 때문에 다음과 같이 각 방향에 속성을 따로 따로 부여
할 수도 있습니다.
border-top: 속성값 ;
border-left: 속성값;
border-right: 속성값;
border-bottom: 속성값;

7. 처음부터 다시 배우는 HTML5 & CSS3
border의 속성
이렇게 방향성을 따로 줄 수 있다면 상속에 의해 각각 다른 값을 부여할 수도 있습니다.
예를 들어,
border:1px solid #666;
border-top: 2px dotted #000;
이렇게 값을 정의하면 border-top이 마지막에 나왔기 때문에 전체 박스의 상단 부분만 값의 변화를 줄
수 있습니다. 결과는 그림과 같습니다.
source/ch07/pic7-7.html

8. 처음부터 다시 배우는 HTML5 & CSS3
border-radius 이해하기(css3)
border-radius가 출현하면서 웹 디자이너들은 정말 열광했습니다. 이전까지는 둥근 모서리를 만들기 위
해서 엄청난 편법과 기법들이 난무했습니다. 이미지를 이용해서 둥근 모서리 만들기, 단순한 CSS만으
로 둥근 모서리 만들기 등 둥근 모서리 박스를 만들기 위한 방법을 수 페이지에 걸쳐 설명한 책도 있었
습니다.
하지만 CSS3가 출현하면서 간단한 코드만 입력해도 원하는 완벽한 둥근 모서리를 지닌 박스를 만들어
낼 수 있게 되었습니다. 기본적인 속성은 다음과 같이 지정되며 속성값은 보통 px, %, em으로 지정합니
다.
border-radius: 속성값;

9. 처음부터 다시 배우는 HTML5 & CSS3
border-radius 이해하기(css3)
border-radius 또한 방향성을 가지고 있기 때문에 다음과 같이 각 방향을 지정할 수 있습니다.
border-top-left-radius: 속성값;
border-top-right-radius: 속성값;
border-bottom-left-radius: 속성값;
border-bottom-right-radius: 속성값;
글을 쓰고 있는 현재 시점에서 최신의 브라우저인 IE9, FF4, 구글 크롬11, 사파리5 에서는 모든 값이 정
확하게 적용됩니다. IE9 이전의 버전에서는 border-radius 값이 전혀 적용되지 않습니다.
하지만 IE9 이외의 브라우저, 최신 브라우저가 아닌 하위 버전 브라우저는 각각 다른 방식으로 border-
radius를 적용합니다. 즉 border-radius가 웹 표준이지만, FF4 이전 버전과 사파리5 이전 버전은 각 브라
우저에 맞는 border-radius 값을 사용해야 합니다.

10. 처음부터 다시 배우는 HTML5 & CSS3
border-radius 이해하기(css3)
아래와 같이 IE를 제외한 FF4 또는 사파리5 등 최신버전의 브라우저가 아닐 때는 해당 브라우저에 맞는 스타일을 적용해
야 합니다. (주의: IE는 IE9을 제외하고는 border-radius를 정식으로 적용하는 방법이 없습니다 – 편법으로 가능)
● 모질라 계열의 브라우저(파이어폭스)
-moz-border-radius: 속성값;
● webkit을 이용한 브라우저(사파리, 구글 크롬)
-webkit-border-radius: 속성값;
● 모질라 계열의 방향성 지정 방식(웹 표준과는 조금 다릅니다)
-moz-border-radius-topleft: 속성값;
-moz-border-radius-topright: 속성값;
-moz-border-radius-bottomleft: 속성값;
-moz-border-radius-bottomright: 속성값;
● webkit 계열의 방향성 지정 방식(웹 표준과 같으나 앞쪽에 -webkit-을 붙여주는 것이 차이점입니다)
-webkit-border-top-left-radius: 속성값;
-webkit-border-top-right-radius: 속성값;
-webkit-border-bottom-left-radius: 속성값;
-webkit-border-bottom-right-radius: 속성값;

11. 처음부터 다시 배우는 HTML5 & CSS3
border-radius 이해하기(css3)
.box1, .box2 {
margin:10px;
padding:10px;
width:300px;
background-color: #FFC;
border:1px solid #666;
}
.box1{
border-radius:10px;
}
.box2{
border-radius:20px;
border-bottom-left-radius:0;
border-bottom-right-radius:0;
source/ch07/ex7-4.html }
border-radius를 통한 둥근 모서리 만들기

12. 처음부터 다시 배우는 HTML5 & CSS3
border-radius 이해하기(css3)
여기서 이전 버전의 사파리와 파이어폭스에도 동일한 border-radius를 적용해 주기 위해선 순서가 중요
합니다. 예제에서 아래와 같이 웹 표준 방식의 border-radius가 적용되었다면 모든 브라우저에서 동일한
효과를 주기 위해선 아래와 같이 속성의 순서를 정해줘야 합니다. 먼저, 모질라 또는 웹킷 브라우저용
효과를 적용해 주고, 마지막 부분에 웹 표준 속성을 부여해야 하는 것입니다.
.box1{
border-radius:10px;  일반적인 웹 표준 속성
}
.box1{
-moz-border-radius: 10px;  모질라 속성
-webkit-border-radius: 10px;  웹킷 속성
border-radius:10px;  웹 표준 속성
}

13. 처음부터 다시 배우는 HTML5 & CSS3
border-radius 이해하기(css3)
예제에서 .box1과 .box2에서 공통된 부분은 그룹 선택자로 묶었습니다.
그리고 .box1에서는 네 방향으로 radius를 적용했으며, .box2에서는 네 방향으로 주고 밑 부분에 대해서
radius 값을 0으로 지정했습니다.
즉 상속을 통해 밑 부분에서 값을 0으로 만들어 버린 것입니다.
.box2를 다른 방법으로 구현해 보세요. 그리고 다양하게 border-radius 를 적용해 보세요.

14. 처음부터 다시 배우는 HTML5 & CSS3
box-shadow를 이용한 박스에 그림자 효과 주기(css3)
CSS3에서는 박스에 그림자 효과 또한 줄 수 있습니다. 이전 버전에서는 박스에 그림자 효과를 주기 위
해서 포토샵을 이용해 그림자가 포함된 박스를 만들어서 박스를 배경으로 사용하는 방법을 사용했습니
다. 즉 디자이너가 일일이 그림자 이미지를 만들어 박스에 효과를 주곤 했는데, CSS3에서는 정말 간단
한 코드 하나만 입력하면 박스에 완벽한 그림자가 생성됩니다.
포토샵을 이용해서 그림자를 만들면 추후에 수정할 때 여러 작업이 수반되는 데 반해, CSS3를 이용해
서 그림자를 만들면 코드 몇 개만 수정하더라도 바로 그림자의 방향 그리고 그림자의 색 그리고 투명도
까지 조절할 수 있습니다.
사용법은 다음과 같습니다.
box-shadow: x-방향값 y-방향값 블러값 색상;

15. 처음부터 다시 배우는 HTML5 & CSS3
box-shadow를 이용한 박스에 그림자 효과 주기(css3)
x-방향값과 y-방향값은 x와 y축을 기준으로 양수 또는 음수의 값입니다. 블러값은 그림자의 흐림 정도
를 나타내며, 색상은 일반적인 색상값입니다. 여기서 색상은 순서에 상관없이 앞쪽 혹은 뒤쪽에 위치할
수 있지만, 나머지 값은 순서에 맞춰 값을 지정해야 합니다.
.box1 {
margin:10px;
padding:10px;
width:300px;
background-color: #FFC;
border:1px solid #666;
border-radius:10px;
box-shadow 2px 2px 5px :#999;
}
source/ch07/ex7-5.html
반드시 예제에서 값을 변경해 보면서
변화되는 속성을 익히세요.
박스 쉐도우 효과
box-shadow가 웹 표준이며, border-radius에서 설명한 것처럼
이전 버전의 파이어 폭스 계열에서는 -moz-box-shadow를 사용하게 되며,
Webkit 버전은 -webkitbox-shadow를 사용합니다.