-
웹 페이지 꾸미기 - CSS3 스타일 속성 정리 #7(float, shadow)IT(Tip) 2020. 9. 29. 10:11반응형
■ float 속성
O 웹 페이지 만들 때 가장 많이 사용하는 스타일 속성
- 속성 : left, right, none, unset, inline-start, inline-end
O float 속성을 사용한 수평 정렬- float 속성을 사용하여 태그를 수평으로 정렬
<head> <style> .box { width: 100px; height: 100px; background-color: #abcdef; margin: 10px; padding: 10px; float: left; /* 1, 2 순서가 right 시 좌측부터 2, 1 순서로 변경 */ } </style> </head> <body> <div class="box"># 1</div> <div class="box"># 2</div> </body>
float: left float: right O float 속성을 사용한 레이아웃 구성
- 자손에 float 속성 적용 시 부모의 overflow 속성에 hidden 키워드 적용
<head> <style> </style> </head> <body> <div id="header"> <h1>Header</h1> </div> <div id="navigation"> <h1>Navigation</h1> </div> <div id="wrap"> <div id="aside"> <h1>Aside</h1> <p>좌측 영역 - 서브 메뉴, 광고 등</p> </div> <div id="section"> <h1>Section</h1> <p>본문 내용 - 무슨 내용이든 </p> </div> </div> <div id="footer"> <h1>Footer</h1> </div> </body>
※ 위 레이아웃을 아래처럼 스타일 지정
<head> <style> body { width: 960px; margin: 0 auto; /* body 태그 중앙 정렬 */ } #wrap { overflow: hidden; } #aside { width: 200px; float: left; } #section { width: 760px; float: left; } </style> </head> <body> <div id="header"> <h1>Header</h1> </div> <div id="navigation"> <h1>Navigation</h1> </div> <div id="wrap"> <div id="aside"> <h1>Aside</h1> <p>좌측 영역 - 서브 메뉴, 광고 등</p> </div> <div id="section"> <h1>Section</h1> <p>본문 내용 - 무슨 내용이든 </p> </div> </div> <div id="footer"> <h1>Footer</h1> </div> </body>■ 그림자 속성(text-shadow, box-shadow) 부여하기
O text-shadow 속성
- 텍스트에 그림자 효과를 추가해 텍스트를 입체적으로 보이게 함
- 형식
text-shadow : none | <가로 거리> <세로 거리> <번짐 정도> <색상><head> <style> .shadow1 { color: red; text-shadow: 5px 5px 5px #000; } .shadow2 { color: green; text-shadow: -5px 5px 5px #000; } .shadow3 { color: blue; text-shadow: -5px -5px 5px #000; } </style> </head> <body> <div> <h1 class="shadow1">그림자 속성</h1> <h1 class="shadow2">그림자 속성</h1> <h1 class="shadow3">그림자 속성</h1> </div> </body>
O box-shadow 속성
- 요소의 테두리를 감싸는 그림자 효과 내기
- 형식
box-shadow: none | <그림자 값> [, <그림자 값>]
* <그림자 값> : <수평거리> <수직거리> <흐름정도> <번짐정도> <색상><head> <style> .box { margin: 30px; padding: 3px; border: 1px solid red; box-shadow: 3px -3px 10px 5px red; } </style> </head> <body> <br> <span class="box">테두리 box-shadow 속성</span> </body> <head> <style> div { border: 3px solid black; box-shadow: 10px 10px 30px black; text-shadow: 5px 5px 5px black; } </style> </head> <body> <div> <h1>그림자 속성</h1> </div> </body>
# 참고자료
Do it HTML5 + CSS3 웹 표준의 정석 2016
모던 웹 디자인을 위한 HTML5+CSS3 입문 2015반응형'IT(Tip)' 카테고리의 다른 글
웹 페이지 꾸미기 - CSS3 스타일 속성 정리 #9(문단 적용 스타일) (0) 2020.10.06 웹 페이지 꾸미기 - CSS3 스타일 속성 정리 #8(table style) (0) 2020.10.05 웹 페이지 꾸미기 - CSS3 스타일 속성 정리 #6(위치 속성 - position, z-index, overflow) (0) 2020.09.28 웹 페이지 꾸미기 - CSS3 스타일 속성 정리 #5(폰트 속성 - font, line-height, text-align) (0) 2020.09.27 웹 페이지 꾸미기 - CSS3 스타일 속성 정리 #4(배경 속성 - background) (0) 2020.09.26
