CSS3 - CSS 스타일 - 경계선 - 둥근 경계선과 경계선의 그림자 (12)

CSS3 - CSS 스타일 - 경계선 - 둥근 경계선과 경계선의 그림자 (12)

오늘은 CSS3의 열두번째 내용으로 CSS 경계선에 관련된 속성중

둥근 경계선과 경계선의 그림자 속성에 대해서 알아보도록 하겠습니다.

CSS도 HTML처럼 기초부터 알아보기 전에  

압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.

(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)

굳이 압타나 아니더라도 이클립스등 자신에게 맞는 툴이 있으시다면 사용하시기 바랍니다.

css 스타일 - 둥근 경계선이란?

둥근 경계선이란 말 그대로 border-ridius 라는 속성을 이용해 

경계선을 둥글게 만드는 방법이며 사용방법은 아래와 같습니다.

<border-radius 사용법>

위 는 css에서 p태그를 선택후 이전 포스팅에서 배운 border 속성을 이용해 경계선의 색상 두께 스타일을 지정 하고 난 뒤 border-radius로 경계선 주변 모서리를 25px을 주어 둥글게 반들었습니다.

그리고 border-ridus 속성은

border-ridus : 5px 10px 25px 10px; 등 4가지 값을 입력해 앞에서 부터 상단왼쪽, 상단 오른쪽

하단왼쪽, 하단 오른쪽 순으로 각기 다르게 모서리의 둥글기를 지정 할 수 있습니다. 

<border-radius를 이용한 각기 다른 모서리 둥글기 지정법>

css 스타일 - 경계선의 그림자란?

경계선의 그림자란 box-shadow라는 속성을 이용해 경계선 주변에 그림자를 입히는

방법이며 사용 방법은 아래와 같습니다.

<box-shadow 속성을 이용한 경계선 주변 그림자 생성>

위 는 css에서 border 속성을 이용해 경계선 두께 색상 스타일을 지정 후 

바로 아래 box-shadow를 이용해 약간 파란 그림자를 생성 하였습니다.

box-shadow는 위와 같이 앞에서 부터 속성 값을 입력하는데 이 내용은 아래와 같습니다.

1. 첫번째 30px 부분 : 그림자 가로 영역

2. 두번째 20px 부분 : 그림자 세로 영역

3. 세번째 10px 부분 : 그림자 주변 번지는 정도

4. 네번째 16진 코드 부분 : 그림자의 색상

이상 CSS3 - CSS 스타일 - 경계선 - 둥근 경계선과 경계선의 그림자 (12)에

관련된 포스팅을 마치도록 하겠습니다.