CHAPTER 6. CSS 레이아웃과애니메이션
레이아웃이란? 웹페이지에서 HTML 요소의위치, 크기등을결정하는것 집안에서의가구배치와비슷하다.
블록요소와인라인요소 블록 (block) 요소 - 화면의한줄을전부차지한다. 인라인 (inline) 요소 - 한줄에차례대로배치된다. 현재줄에서필요한만큼의너비만을차지한다.
블록요소 한줄을전부차지 <h1>, <p>, <ul>, <li>, <table>, <blockquote>, <pre>, <div> <form>, <header>, <nav> 요소 예제실행과소스보기 <body> <h1 style="background-color: red">h1 으로정의된부분입니다.</h1> <div style="background-color: aqua">div 로정의된부분입니다.</div> <p style="background-color: yellow">p 로정의된부분입니다.</p> <pre style="background-color: green">pre 로정의된부분입니다.</pre> </body>
인라인요소 인라인요소들은한줄안에차례대로배치 <a>, <img>, <strong>, <em>, <br>, <input>, <span> 요소 <body> <em style="background-color: red">em 요소 </em> <span style="background-color: aqua">span 요소 </span> <img src="pome.png" width="60" height="60" /> <a href="http://www.w3c.org">a 요소 </a> </body>
블록요소와인라인요소의혼합 <!DOCTYPE html> <html> <head> <style> p, em, strong { border: dotted 3px red; </style> </head> <body> body 안에 <em> 강조문자 </em> 와 <strong> 강한문자 </strong> 를가지고있습니다. <p> 여기는다른단락입니다. </p> </body> </html>
CSS 의 display 속성 속성 display 를 block 으로설정하면 -> 블록요소처럼배치 display 를 inline 으로설정 -> 인라인요소처럼배치 display:block : 블록 (block) display:inline : 인라인 (inline) display:none : 없는것으로간주됨 display:hidden : 화면에서감춰짐
예제 <!DOCTYPE html> <html> <head> <title>display 속성 </title> <style>.menubar li { display: inline; background-color: yellow; border: 1px solid; border-color: red; margin: 0; padding:.5em; </style> </head> <body> <ul class="menubar"> <li><a href=" # "> 홈으로 </a></li> <li><a href=" # "> 회사소개 </a></li> <li><a href=" # "> 제품소개 </a></li> <li><a href=" # "> 질문과대답 </a></li> <li><a href=" # "> 연락처 </a></li> </ul> </body> </html>
요소의위치 top, bottom, left, right 속성으로결정
위치설정방법 정적위치설정 (static positioning) - 정상적인흐름에따른배치 상대위치설정 (relative positioning) - 정상적인위치가기준점이된다. 절대위치설정 (absolute positioning) - 컨테이너의원점이기준점이된다. 고정위치설정 (fixed positioning) - 윈도우의원점이기준점이된다.
정적위치설정 정적위치설정 (static positioning) 블록요소들은박스처럼상하로쌓이게되고인라인요소들은한줄에차례대로배치 <!DOCTYPE html> <html> <head> <style> #one { background-color: cyan; width: 200px; height: 50px; #two { position: static; background-color: yellow; width: 200px; height: 50px; #three { background-color: lightgreen; width: 200px; height: 50px; </style>
예제 <body> <p id="one">block #1</p> <div id="two"> block #2<br /> position:static;<br /> </div> <p id="three">block #3</p> </body> </html>
상대위치설정 상대위치설정 (relative positioning) 정상적인위치에서상대적으로요소가배치 <style> #one { background-color: cyan; width: 200px; height: 50px; #two { position: relative; left: 30px; background-color: yellow; width: 200px; height: 50px; #three { background-color: lightgreen; width: 200px; height: 50px; </style>
절대위치설정... 절대위치 (absolute positioning) 전체페이지를기준으로시작위치에서 top, left, bottom, right 만큼떨어진위치에배치 #two { position: absolute;... top: 30px; left: 30px; background-color: yellow; width: 200px; height: 50px;
고정위치설정 고정위치설정 (fixed positioning) 브라우저윈도우에상대적으로요소의위치를잡는것 <!DOCTYPE html> <html> <head> <style> p { background-color: lightgreen; width: 200px; height: 50px; #two { background-color: yellow; position:fixed; top:0px; right:0px; </style> </head>
고정위치설정 <body> <p>block #1</p> <p id="two"> block #2<br /> position: fixed;<br /> top:0px; right:10px; </p> <p>block #3</p> <p>block #4</p> <p>block #5</p> <p>block #6</p> <p>block #7</p> <p>block #8</p> <p>block #9</p> <p>block #10</p> <p>block #11</p> </body> </html>
float 속성 하나의콘텐츠주위로다른콘텐츠들이물처럼흘러가는스타일지정
예제 <!DOCTYPE html> <html> <head> <style> img.a { float: left </style> </head> <body> <img class="a" src="sunshine.jpg" width="160" height="120" /> <p> 생활이그대를속일지라도슬퍼하거나노여워말라.... </p> </body> </html>
예제 <!DOCTYPE html> <html> <head> <style> img { float: left; width: 110px; height: 90px; margin: 5px; </style> </head> <body> <h3> 이미지갤러리 </h3> <img src="sunshine.jpg" width="100" height="90"> <img src="lion.png" width="100" height="90"> <img src="storm.jpg" width="100" height="90"> <img src="sunshine.jpg" width="100" height="90"> <img src="lion.png" width="100" height="90"> <img src="storm.jpg" width="100" height="90"> </body> </html>
float 의용도 레이아웃에많이사용된다.
clear 속성 float 속성을중단할때사용된다.
z-index 요소의스택순서를지정
예제... <style> #box1 { position: absolute; top: 0px; left: 0px; width: 100px; height: 100px; background: blue; z-index: 200; #box2 { position: absolute; top: 30px; left: 30px; width: 100px; height: 100px; background: yellow; z-index: 100; #box3 { position: absolute; top: 60px; left: 60px; width: 100px; height: 100px; background: green; z-index: 0; </style>
예제 </head> <body> <div id="box1">box #1 </div> <div id="box2">box #2 </div> <div id="box3">box #3 </div> </body> </html>
예제 <!DOCTYPE html> <html> <head> <style> img { position: absolute; left: 0px; top: 0px; z-index: -1; </style> </head> <body> <img src="pome.png" width="200" height="200" /> <p>img 요소의 z-index 가 -1 이므로다른요소의뒤에위치한다. </p> </body> </html>
요소의크기지정 width, height 요소의크기 min-width, min-height: 요소의최소크기 max-width, max-height: 요소의최대크기
예제 <!DOCTYPE html> <html> <head> <style> p { min-width: 100px; min-height: 100px; background-color: yellow; </style> </head> <body> <p> 이요소는 min-width:100px; 와 min-height:100px; 으로설정되었습니다. 요소의크기는 width 와 height 속성으로결정된다. 만약개발자가요소의 width 와 height 를명확하게설정하지않으면브라우저가요소안의콘텐츠의크기를계산하여서요소의크기를결정한다. </p> </body> </html>
실행결과 실행결과 ( 클릭 )
overflow 속성 overflow 속성 : 자식요소가부모요소의범위를벗어났을때, 어떻게처리할것인지를지정 hidden 부모영역을벗어나는부분을보이지않게한다. scroll 부모영역을벗어나는부분을스크롤할수있도록한다. auto 자동으로스크롤바가나타난다.
예제 <!DOCTYPE html> <html> <head> <style> p { background-color: lightgreen; width: 200px; height: 50px; #target { border: 1px solid black; width: 300px; height: 100px; overflow: scroll; </style> </head> <body> <div id=target> <p>block #1</p> <p>block #2</p> <p>block #3</p> <p>block #4</p> <p>block #5</p> </div> </body> </html>
<div> 를이용한레이아웃
예제 <!DOCTYPE html> <html> <head> <title>my Blog Page</title> <style> #header { background-color: yellow; width: 100%; height: 50px; #nav { width: 30%; background-color: red; height: 100px; float: left;
예제 #content { width: 70%; background-color: blue; float: right; height: 100px; #footer { background-color: aqua; width: 100%; height: 50px; clear: both; </style> </head> <body> <div id="wrapper"> <div id="header"> header </div> <div id="nav"> nav </div> <div id="content"> content </div> <div id="footer"> footer </div> </div> </body> </html>
시맨틱요소레이아웃
시맨틱요소 태그 <header> <hgroup> <nav> <article> 설명문서의머리말 (header) <h1> 에서 <h6> 요소들의그룹내비게이션링크문서의내용이나블로그의포스트 <section> 문서의섹션을의미한다. <aside> <footer> <figure> <time> 사이드바와같이옆에위치하는내용문서의꼬리말 (footer) 그림이나도표날짜와시간을표시
예제
예제 <!DOCTYPE html> <html> <head> <title>my Blog Page</title> <style> body { background-color: #efe5d0; font-family: Arial, "Trebuchet MS", sans-serif; margin: 0px; header { background-color: #e3afed; color: #000000; margin: 0px; text-align: center; padding: 5px;
예제 h1 { margin: 0px; section#main { display: table-cell; background-color: yellow; padding: 15px; nav { display: table-cell; background-color: #ffd800; padding: 15px; footer { background-color: #954b4b; color: #efe5d0; text-align: center; padding: 10px; margin: 0px 0px 0px 0px; font-size: 90%; </style>
예제 <body> <header> <h1>my Blog Page</h1> </header> <nav> <h1>links</h1> <ul> <li><a href="http://www.w3c.org/">w3c</a></li> <li><a href="http://developer.mozilla.org/">mozilla</a></li> <li><a href="http://htmldog.com/guides/">html Dogs</a></li> </ul> <figure> <img width="85" height="85" src="hong.png" alt=" 홍길동 " /> <figcaption> 홍길동 </figcaption> </figure> </nav>
예제 <section id="main"> <article> <h1>semantic Tags</h1> <p> 시멘틱요소 (Semantic elements) 들은브라우저에게요소의의미나목적을명확하게알려주는요소이다. </p> </article> <article> <h1>div 와 span</h1> <p> div 은 divide 의약자로서페이지를논리적인섹션으로분리하는데사용되는태그이다. span 요소는인라인요소로서텍스트를위한컨테이너로사용할수있다. </p> </article> </section> <footer>copyright (c) 2013 Hong</footer> </body> </html>
table-cell 속성 display 속성에 table-cell 을하면자식요소들을테이블의셀처럼배치하라는의미가된다.
CSS3 효과 : 투명도 <!DOCTYPE html> <html> <head> <style> img { opacity: 0.4; img:hover { opacity: 1.0; </style> </head> <body> <h1>opacity 속성 </h1> <img src="lion.png" width="150" height="120" alt="lion"> <img src="audio.png" width="150" height="120" alt="audio"> </body> </html>
CSS3 효과 : 가시성 <!DOCTYPE html> <html> <head> <style> #a { visibility: hidden; border:1px dotted red; #b { visibility: visible; border:1px dotted red; </style> </head> <body> <h1>visibility 속성 </h1> <img id="a" src="lion.png" width="150" height="120" alt="lion"> <img id="b" src="audio.png" width="150" height="120" alt="audio"> </body> </html>
CSS3: 전환 <!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 50px; border: 1px solid black; background: yellow; transition: width 5s; div:hover { width: 200px; </style> </head> <body> <div> 마우스를올려보세요.</div> </body> </html> 실행결과보기
CSS3: 전환 <!DOCTYPE html> <html> <head> <style> p { width: 100px; height: 50px; border: 1px solid black; background: yellow; transition: width 5s height 5s border 5s, transform 5s; -webkit-transition: width 5s, height 5s, border 5s, -webkit-transform 5s; p:hover { width: 200px; height: 100px; border: 10px solid red; transform: rotate(180deg); -webkit-transform: rotate(180deg); </style> </head> <body> <p> 마우스를올려보세요.</p> </body> </html> 실행결과보기
CSS3 변환 도형을이동, 크기변환, 회전 도형의크기나형태, 위치를변환 2 차원또는 3 차원적으로변환
transform 속성 transform: translate(10px, 10px) - 평행이동 transform: rotate(45deg) - 회전 transform: scale(2, 1.2) - 크기변환 transform: skew(20deg, 10deg) - 비틀기변환 transform: matrix() - 일반적인변환
<!DOCTYPE html> <html> <head> <style> div { width: 50px; height: 50px; background-color: yellow; border: 1px solid black; text-align: center; div#box2 { transform: translate(100px, 0px); background-color: blue; div#box3 { transform: scale(1.2, 1.2); background-color: red; div#box4 { transform: rotate(30deg); background-color: green; </style> </head> CSS3: 전환
CSS3: 전환 <body> <div id="box1">box1</div> <div id="box2">box2</div> <div id="box3">box3</div> <div id="box4">box4</div> </body> </html>
CSS3: 3 차원전환
예제 <!DOCTYPE html> <html> <head> <style> div { background-color: green; height: 150px; width: 150px;.container { background-color: yellow; border: 1px solid black;.transformed { backface-visibility: visible; transform-origin: 50% 42%; transform: perspective(500px) rotatey(59deg) rotatex(0deg); </style> </head> <body> <div class="container"> <div class="transformed"></div> </div> </body> </html> 실행결과보기
CSS3 애니메이션
예제 <!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; background: red; position:relative; animation: 2s myanim; animation-iteration-count: 10; @keyframes myanim { 0% {left:0px; top:0px; 25% {left:100px; top:0px; 50% {left:200px; top:0px; 75% {left:100px; top:0px; 100% {left:0px; top:0px; </style> </head> <body> <div></div> </body> </html> 실행결과보기
Q & A