메뉴 건너뛰기

조회 수 6830 추천 수 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 9477
256 FTPClient 를이용하여 ftp상 서버에서 데이터 다운로드 편 2014.08.28 9916
255 XmlPullParser 를이용하여 데이터 가져와보기!! 2014.08.28 7279
254 FTPClient 를이용한 데이터 업로드 하기 2014.08.28 6426
253 클래스나눠서 xml 파싱과 FTP를이용하여 안드로이드에서 활용하기 2014.08.28 6239
252 전화 인텐트와 나의 전화 번호가져오기 2014.08.28 6371
251 사진찍기 및 앨범 에서 사진 가져오기!!! 2014.08.28 13948
250 안드로이드 웹에서 이미지 불러오기!! 2014.08.28 7374
249 맵에 오버레이 추가하여 아이템 넣어보기 2014.08.28 6538
248 실행중인 Service 확인하기 2014.08.28 6635
247 안드로이드 이미지 효율적으로 회전 해보기 2014.08.28 6069
246 WIFI 신호세기 강도 측정하기 2014.08.28 11305
245 WebView 줌 컨트롤러 가리기 2014.08.28 6359
244 ImageVeiw의 현재 리소스 비교하기 2014.08.28 6810
243 HTML5 Speech Input (음성인식) API 2014.09.04 6491
242 HTML5 시작하기 file 2014.09.04 5704
» CSS3 Rounded Corner, 그림자 효과 사용하기 file 2014.09.04 6830
240 JavaScript 맛보기 file 2014.09.04 6636
239 HTML5로 비디오 보여주기 Video Tag file 2014.09.04 7111
238 HTML5로 나만의 비디오 플레이어 스킨 만들기 -1- CSS file 2014.09.04 6520
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 13 Next
/ 13

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved