css CSS 3 style mystyle css body backgroundcolor

외부 스타일 시트 파일 불러오기 • . css 파일에 스타일 시트 저장 • 웹 페이지에서 CSS 3 스타일 시트 파일을 불러 사용 • 동일한 스타일 시트를 웹 페이지마다 중복 작성 해소 • 웹 사이트의 전체 웹 페이지 모양의 일관성 확보 <style> /* mystyle. css */ body { background-color: linen; color: blueviolet; margin- left: 30 px; margin-right: 30 px; } h 3 { text-align: center; color: darkred; } </style> • CSS 3 스타일 시트 파일을 불러오는 방법 2 가지 • <link> 태그 이용 <head> <link href="mystyle. css" type="text/css" rel="stylesheet"> </head> • @import 이용 <style> @import url(mystyle. css); /* @import url(‘mystyle. css’); 로 해도 됨 */ /* @import “mystyle. css”; 로 해도 됨 */ </style> 2

@import로 CSS 3 파일 불러오기 mystyle. css /* mystyle. css */ body { background-color : linen; color : blueviolet; margin-left : 30 px; margin-right : 30 px; } h 3 { text-align : center; color : darkred; } <!DOCTYPE html> <head> <title>< @import> 로 외부 스타일 불러오기</title> <style> @import url(mystyle. css); </style> </head> <body> <h 3>소연재</h 3> <hr> <p>저는 체조 선수 소연재입니다. 음악을 들으면서 책읽기를 좋아합니다. 김치 찌개와 막국수 무척 좋아합니다. </p> </body> </html> 4

박스 크기 - <div> 태그의 박스 모델 사례 CSS 스타일 div. box { width : 150 px; height : 50 px; margin : 40 px; border-width : 30 px; padding : 20 px; } margin : 40 px border-width : 30 px padding : 20 px height : 50 px HTML 코드 <div class="box"> DIVDIVDIV </div> width : 150 px 8

예제> 박스 모델 활용 <!DOCTYPE html> <head><title>박스 모델</title> <style> div { background : yellow; padding : 20 px; border : 5 px dotted red; margin : 30 px; } </style></head> <body> <h 3>박스 모델</h 3> <p>margin 30 px, padding 20 px, border 5 px의 빨간색 점선</p> <hr> <div> <img src="media/mio. png" alt="고양이눈"> </div> </body> </html> margin: 30 px; padding: 20 px; <div>태그의 콘텐츠 10

예제 4– 16 다양한 둥근 모서리 테두 리 <html> <head><title>둥근 모서리 테두리</title> <style> p{ background : #90 D 000; width : 300 px; pa dding : 20 px; } #round 1 { border-radius : 50 px; } #round 2 { border-radius : 0 px 20 px 40 px 60 px; } #round 3 { border-radius : 0 px 20 px 40 px; } #round 4 { border-radius : 0 px 20 px; } #round 5 { border-radius : 50 px; border-style : dotted; } </style> </head> <body> <h 3>둥근 모서리 테두리</h 3> <hr> <p id="round 1">반지름 50픽셀의 둥근 모서리</p> <p id="round 2">반지름 0, 20, 40, 60 둥근 모서리</p> <p id="round 3">반지름 0, 20, 40, 20 둥근 모서리</p> <p id="round 4">반지름 0, 20, 0, 20 둥근 모서리</p> <p id="round 5">반지름 50의 둥근 점선 모서리</p> </body> </html> 12

배경 만들기 연습 CSS 스타일 100 x 100 크기로 <div> 박스의 왼쪽 중간에 배경 이미지 넣기 background-position : left center div { background-color : skyblue; background-size : 100 px; background-image : url("media/spongebob. png"); background-repeat : no-repeat; background-position : left center; } HTML 코드 <div>Sponge. Bob is an over-optimistic sponge that annoys other characters. </div> 100 x 100 크기 background-image background-color CSS 스타일 <div> 박스의 center 위치에 y축을 따라 배경 이미지 반복 div { background-color : skyblue; background-size : 100 px; background-image : url("media/spongebob. png"); background-repeat : repeat-y; background-position : center; } HTML 코드 <div> <h 2> Sponge. Bob is an over-optimistic sponge that annoys other characters. <h 2></div> 14

background 단축 프로퍼티 • background • 배경을 꾸미는 여러 값을 한 번에 지정하는 단축 프로퍼 티 Color image position/size repeat • 예) div { background : skyblue url("media/spongebob. png") center/100 px repeat-y; } div { background : skyblue; /* 배경색을 skyblue로 설정 */ } div { background : url("media/spongebob. png"); /* 배경 이미지 지정 */ } 15

예제 <div> 박스에 배경 꾸미기 <html><head><title>배경 꾸미기</title> <style> div { background-color : skyblue; background-size : 100 px; background-image : url("media/spongebob. png"); background-repeat : repeat-y; background-position : center; } div { width : 200 px; height : 200 px; color : blueviolet; font-size : 16 px; } </style> </head> <body> <h 3>div 박스에 배경 꾸미기</h 3> <hr> <div>Sponge. Bob is an over-optimistic sponge that annoys other characters. </div> </body> </html> <div>크기는 200 x 200이며 배경이미지 크기는 100 x 100 16

텍스트 그림자, text-shadow • text-shadow 프로퍼티 CSS 스타일 div. red { text-shadow : 3 px red; } v-shadow (3 px) Drop Shadow HTML 코드 color: red h-shadow (3 px) <div class="red">Drop Shadow</div> CSS 스타일 div. blur { text-shadow : 3 px 5 px red; } HTML 코드 <div class="blur">Drop Shadow</div> v-shadow (3 px) Drop Shadow h-shadow (3 px) blur-radius (5 px) color(red) 17

text-shadow로 텍스트 그림자 만들기 <html><head><title>텍스트 그림자</title> <style> div { font : normal 24 px verdata; }. drop. Text { text-shadow : 3 px; }. red. Text { text-shadow : 3 px red; }. blur. Text { text-shadow : 3 px 5 px sky. Blue; }. glow. Effect { text-shadow : 0 px 3 px red; }. word. Art. Effect { color : white; text-shadow : 0 px 3 px dark. Blue; }. three. DEffect { color : white; text-shadow : 2 px 4 px black; }. multi. Effect { color : yellow; text-shadow : 2 px 2 px black, 0 0 25 px blue, 0 0 5 px darkblue; } </style></head> <body> <h 3>텍스트 그림자 만들기</h 3> <hr> <div class="drop. Text">Drop Shadow</div> <div class="red. Text">Color Shadow</div> <div class="blur. Text">Blur Shadow</div> <div class="glow. Effect">Glow Effect</div> <div class="word. Art. Effect">Word. Art Effect</div> <div class="three. DEffect">3 D Effect</div> <div class="multi. Effect">Multiple Shadow Effect</div> </body> </html> 18

예제> box-shadow로 박스 그림자 만들기 <html> <head> <title>div 박스에 그림자 만들기</title> <style>. red. Box { box-shadow : 10 px red; }. blur. Box { box-shadow : 10 px 5 px sky. Blue; }. multi. Effect { <body> box-shadow : 2 px 2 px black, <h 3>박스 그림자 만들기</h 3> 0 0 25 px blue, <hr> 0 0 5 px darkblue; <div class="red. Box">뚱이와 함께 } </div> <div class="blur. Box">뚱이와 함께 </div> <div class="multi. Effect">뚱이와 함께 </div> </body> </html> div { width : 150 px; height : 70 px; padding : 10 px; border : 10 px solid lightgray; background-image : url("media/spongebob. png"); background-size : 150 px 100 px; background-repeat : no-repeat; } </style> </head> 20