반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 받은 트랙백

글 보관함

CSS3 Rounded Corner, 그림자 효과 사용하기

2011. 12. 12. 06:37 | Posted by 솔웅


요즘 계속 공부 하고 있는 부분이 CSS3 입니다.
정확히 HTML5는 아니지만 HTML은 CSS와 자바스크립트와 더불어서 더 잘 사용 될 수 있기 때문에 CSS와 자바스크립트도 반드시 알아야 할 기술입니다.
CSS3 는 2005년 이후 부터 지금까지 계속 개발 되고 있다고 합니다. 아직 완료되거나 공식적으로 표준으로 인정되거나 뭐 그런건 아니라서 모든 브라우저에서 다 지원하는 것은 아닙니다.
대개 크롬에서 많은 기능을 지원하고 있습니다.

지난 시간에 이어서 계속 CSS3를 공부 하겠습니다.
우선 아래와 같이 HTML파일을 만드세요.
(제 파일 이름은 6th.html 하고 main03.css 입니다.)
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title> Dougy's HTML5 </title>
    <link rel="stylesheet" href="main03.css">
</head>
<body>
    <div id="box">
        <p id="text"> Text Test. </p>
    </div>
</body>
</html>

그리고 main03.css를 아래와 같이 만듭니다.

body{
    text-align:center;
}
#box{
    display:block;
    width:500px;
    margin:50px auto;
    padding:15px;
    text-align:center;
    border:1px solid blue;
    background:orange;
}
#text{
    font:bold 30px Century Gothic;
}


그럼 이와 같은 모습이 나옵니다.
이제 이 네모 박스를 좀 꾸며 보겠습니다.

#box 안에 아래 코드를 추가해 보세요.
-webkit-border-radius:25px;
그리고 재실행 하시면 사각형 모서리가 곡선으로 처리됩니다.
한가지만 더 해 볼까요?
-webkit-box-shadow:rgb(110,110,110) 8px 8px;
이것은 그림자 효과인데요 그림자 색은 rgb로 표현됩니다. 그 다음은 오런쪽으로 8픽셀 아래로 8픽셀 더 가서 그리라는 의미 입니다.


아주 보기 좋은 박스가 그려졌습니다.
그림자 효과를 아래처럼 줘 보세요.
    -webkit-box-shadow:rgb(110,110,110) 10px 10px 10px;

shadow 효과의 3번째 인수는 blur 효과를 주는 기능입니다.

맨 마지막에 inset을 추가해 보세요.

    -webkit-box-shadow:rgb(110,110,110) 10px 10px 10px inset;



그러면 그림자 효과가 박스 안쪽으로 나타나게 됩니다.

오늘은 간단히 여기까지 하구요.
다음 글에선 박스 안에 그라데이션 효과를 주는 법을 공부 하겠습니다.
반응형

Comment