CSS Layout Chapter 6 Part 1 이 서식 파일은 그룹 환경에서 교육 자료를 프레젠테이션할 때 시작 파일로 사용할 수 있습니다. 구역 구역을 추가하려면 슬라이드를 마우스 오른쪽 단추로 클릭하십시오. 구역을 사용하면 슬라이드를 쉽게 구성할 수 있으며, 여러 작성자가 원활하게 협력하여 슬라이드를 작성할 수 있습니다. 메모 설명을 제공하거나 청중에게 자세한 내용을 알릴 때 메모를 사용합니다. 프레젠테이션하는 동안 프레젠테이션 보기에서 이러한 메모를 볼 수 있습니다. 글꼴 크기에 주의(접근성, 가시성, 비디오 테이프 작성, 온라인 재생 등에 중요함) 배색 그래프, 차트 및 텍스트 상자에 특히 주의를 기울이십시오. 참석자가 흑백이나 회색조로 인쇄할 경우를 고려해야 합니다. 테스트로 인쇄하여 흑백이나 회색조로 인쇄해도 색에 문제가 없는지 확인하십시오. 그래픽, 테이블 및 그래프 간결하게 유지하십시오. 가능한 일관되고 혼란스럽지 않은 스타일과 색을 사용하는 것이 좋습니다. 모든 그래프와 표에 레이블을 추가합니다. Chapter 6 Part 1
중요 내용 DISPLAY & VISIBILITY POSITION FLOAT OVERFLOW SEMANTAC TAG
레이아웃이란? 웹페이지에서 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>
display속성 속성 display를 block으로 설정하면 -> 블록 요소처럼 배치 display를 inline으로 설정-> 인라인 요소처럼 배치 display:block : 블록(block) display:inline : 인라인(inline)
display속성 <!DOCTYPE html> <html> <head> <style> .menubar li { display: inline; background-color: yellow; border: 1px solid 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>
내용을 화면에서 감추기 display:none 없는 것으로 간주됨 display:block 다시 나타남 visibility:hidden 화면에서 감춰짐(자리 차지) visibility:visible 다시 나타남
display-none.html <!doctype html> <html> <head> <style> h1.hidden { display:none; } </style> </head> <body> <h1>This is a visible heading.</h1> <h1 class=hidden>This is a hidden heading</h1> <p>Notice that the h1 element with display:none; does not take up any space.</p> </body> </html>
visibility-hidden.html <!doctype html> <html> <head> <style> h1.hidden { visibility:hidden; } </style> </head> <body> <h1>This is a visible heading.</h1> <h1 class=hidden>This is a hidden heading</h1> <p>Notice that the h1 element with display:none; does not take up any space.</p> </body> </html>
position(요소의 위치 설정 방법) 정적 위치 설정(static positioning) - 정상적인 흐름에 따른 배치 상대 위치 설정(relative positioning) - 정상적인 위치가 기준점이 된다. 절대 위치 설정(absolute positioning) - 컨테이너의 원점이 기준점이 된다. 고정 위치 설정(fixed positioning) - 윈도우의 원점이 기준점이 된다.
css-position.html <!DOCTYPE html> <html> <head> <style> #one { background-color: cyan; width: 200px; height: 50px; } #two { /* position: static; */ /* position:absolute; left:100px; top:250px; */ position:relative; left:30px; background-color: yellow;
css-position.html(계속) #three { background-color: lightgreen; width: 200px; height: 50px; } </style> </head> <body> <h1 id="one">block #1</h1> <h1 id="two">block #2</h1> <h1 id="three">block #3</h1> </body> </html>
scroll to top – ToTop./html <head> <style> .top { position:fixed; bottom:10px; right:10px; } img {width:50px; height:50px;} </style> </head> <body> <p id=ToTop> <p class=top> <a href=#ToTop><img src=images/top.jpg></a> </p> … … </body>
float – 좌우 배치
css-layout.html <!DOCTYPE html> <html> <head> <title>My Blog Page</title> <style> #header { background-color: yellow; width: 100%; height: 50px; }
css-layout.html(계속) #nav { width: 30%; background-color: red; height: 100px; // float: left; } #content { width: 70%; background-color: blue; //float: right;
css-layout.html(계속) #footer { background-color: aqua; width: 100%; height: 50px; //clear: both; } </style> </head>
css-layout.html(계속) <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>
overflow 속성 overflow 속성: 자식 요소가 부모 요소의 범위를 벗어났을 때, 어떻게 처리할 것인지를 지정 hidden – 부모 영역을 벗어나는 부분을 보이지 않게 한다. scroll – 부모 영역을 벗어나는 부분을 스크롤 할 수 있도록 한다. auto – 자동으로 스크롤바가 나타난다.
시맨틱 요소 레이아웃
시맨틱 태그란? 웹 페이지 구조는 크게 다르지 않다. 웹 페이지 구조를 결정짓는 요소들을 몇 개의 태그로 정의 웹 페이지 구조는 크게 다르지 않다. 웹 페이지 구조를 결정짓는 요소들을 몇 개의 태그로 정의 태그 이름만 보고도 그 부분에 어떤 내용이 있을지 짐작 가능 태그 이름 자체에 의미를 담고 있어서 시맨틱(semantic) 태그라고 함
시맨틱 태그란? 시맨틱 태그를 사용하면 어떤 점이 좋을까? 태그만 보고도 페이지 구조를 쉽게 알 수 있다. 사이트를 검색할 때 검색 로봇이 필요한 내용을 정확하게 검색할 수 있다. (예, 내용 검색할 때는 <section>이나 <article> 태그만 검색) 사이트에 접속하는 모든 기기에서 웹 사이트를 해석하는 방식을 표준화할 수 있다. (화면에 보여주는 스타일은 달라도 어느 부분이 제목이고 메뉴인지 구별 가능) 스크린 리더 같은 장치에서 사이트 내용을 정확하게 사용자에게 전달할 수 있다.
navigation menu
dropdown-menu.html <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="dropdown-navmenu.css"> </head> <body> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li class="dropdown"> <a href=#>TOPMENU-1</a> <div class="dropdown-content"> <a href="#">웹프로그래밍</a> <a href="#">Unix 시스템</a> <a href="#">대학수학기초</a> </div> </li> <a href=#>TOPMENU-2</a> <a href="#">프로그래밍 입문</a> <a href="#">C++</a> <a href="#">Java prgramming</a> <a href="#">objective C prgramming</a> <a href="#">Advanced Web Programming</a> </ul> <h3>Dropdown Menu inside a Navigation Bar</h3> <p>Hover over the "Dropdown" link to see the dropdown menu.</p> </body> </html>
dropdown-menu.css ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333333; } li { float: left;} li a { display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; li a:hover, .dropdown:hover { background-color: red; li.dropdown { display: inline;
dropdown-menu.css(계속) .dropdown-content { display: none; position: absolute; background-color: #afafaf; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); //z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; .dropdown-content a:hover {background-color: #f1f1f1} .dropdown:hover .dropdown-content {
z-index <!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>
transition - 전환 <!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>
Exercise #7 강의 자료 참조