메뉴 건너뛰기

조회 수 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
번호 제목 날짜 조회 수
117 안드로이드 종료 취소 다이얼로그 코드 2015.07.26 6389
116 폰갭 비콘 디텍팅 안될 때 (기본적인건 다 되있어야됨) 2015.07.26 6528
115 안드로이트 비콘 스캐닝시 고려 사항 2015.07.26 6658
114 블루투스 및 비콘 관련 정리 2015.07.26 10828
113 블루투스(Bluetooth) 통신에 대해 알아보자 file 2015.07.26 14046
112 안드로이드 팝업창 만들기(xml 내용 집어넣기) file 2015.07.23 9285
111 안드로이드 스튜디오 gradle error 해결 2015.07.23 6683
110 [안드로이드] 화면추가 버튼 리스너 file 2015.07.22 7681
109 [안드로이드] 페이스북 같은 슬라이드 메뉴 만들기 file 2015.07.21 8182
108 안드로이드 ( Android ) APK 파일 생성하기 file 2015.07.17 7305
107 안드로이드 webview (웹뷰) 개발 #4 - 멀티터치 ( 확대 / 축소 ) 적용 file 2015.07.17 7552
106 안드로이드 webview (웹뷰) 개발 #3 - 초기 로딩화면 (splash) 띄우기 + 아이콘 적용하기 file 2015.07.17 8697
105 안드로이드 webview (웹뷰) 개발 #2 - 파일 첨부 및 플러그인 적용하기 file 2015.07.17 8282
104 안드로이드 webview (웹뷰) 개발 #1 - 웹사이트를 어플로 만들어 보자! file 2015.07.17 8903
103 [안드로이드] 버튼 이벤트 처리하기 file 2015.07.17 7029
102 [안드로이드] 뷰(View)에 여백넣기 file 2015.07.17 7225
101 [안드로이드] 뷰(View)의 너비와 높이 지정하기 file 2015.07.17 7140
100 [안드로이드] 레이아웃의 기본2 file 2015.07.16 7071
99 [안드로이드] 레이아웃의 기본1 file 2015.07.16 6962
98 [안드로이드] Activity에 대해서 file 2015.07.16 6767
Board Pagination Prev 1 ... 3 4 5 6 7 8 9 10 11 12 13 Next
/ 13

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved