메뉴 건너뛰기

조회 수 6755 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
<!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;



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

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

List of Articles
번호 제목 날짜 조회 수
257 안드로이드 php 로 mysql json 파싱 하기 2014.08.28 9407
256 FTPClient 를이용하여 ftp상 서버에서 데이터 다운로드 편 2014.08.28 9848
255 XmlPullParser 를이용하여 데이터 가져와보기!! 2014.08.28 7221
254 FTPClient 를이용한 데이터 업로드 하기 2014.08.28 6366
253 클래스나눠서 xml 파싱과 FTP를이용하여 안드로이드에서 활용하기 2014.08.28 6180
252 전화 인텐트와 나의 전화 번호가져오기 2014.08.28 6312
251 사진찍기 및 앨범 에서 사진 가져오기!!! 2014.08.28 13889
250 안드로이드 웹에서 이미지 불러오기!! 2014.08.28 7052
249 맵에 오버레이 추가하여 아이템 넣어보기 2014.08.28 6474
248 실행중인 Service 확인하기 2014.08.28 6595
247 안드로이드 이미지 효율적으로 회전 해보기 2014.08.28 5995
246 WIFI 신호세기 강도 측정하기 2014.08.28 11238
245 WebView 줌 컨트롤러 가리기 2014.08.28 6316
244 ImageVeiw의 현재 리소스 비교하기 2014.08.28 6748
243 HTML5 Speech Input (음성인식) API 2014.09.04 6453
242 HTML5 시작하기 file 2014.09.04 5660
» CSS3 Rounded Corner, 그림자 효과 사용하기 file 2014.09.04 6755
240 JavaScript 맛보기 file 2014.09.04 6589
239 HTML5로 비디오 보여주기 Video Tag file 2014.09.04 7059
238 HTML5로 나만의 비디오 플레이어 스킨 만들기 -1- CSS file 2014.09.04 6453
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 13 Next
/ 13

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved