CSS #2
레이아웃 구성 스타일
1. display
- 웹 페이지의 태그 간의 배치를 결정
=> display:block;: 태그를 블록 형식으로 구성
=> display:inline;: 태그를 인라인 형식으로 구성
=> display:inline-block;: 태그를 인라인블록 형식으로 구성
=> display:none;: 태그를 화면에 표시하지 않음
#cssex10_1.css
@charset "utf-8";
body { display:block; width:950px; margin:0; padding:0; }
#head_area { float:left; width:100%; background-color:yellow; }
#foot_area { clear:both; width:100%; background-color:yellow; }
#wrapper { width:950px; }
#left_area { float:left; width:200px; background-color:aqua; min-height:100px; }
#content_area { float:left; width:300px; background-color:#fff; min-height:100px; }
#right_area { float:left; width:150px; background-color:skyblue; min-height:100px; }
#cssex10_2.html
<head>
<title> 레이아웃 구성하기 </title>
<meta charset="utf-8" />
<link href="./cssex10_1.css" rel="stylesheet" />
</head>
<body>
<div id="head_area"> HEADER </div>
<div id="wrapper">
<div id="left_area"> LEFT </div>
<div id="content_area"> CONTENT </div>
<div id="right_area"> RIGHT </div>
</div>
<div id="foot_area"> FOOTER </div>
</body>
2. Flexible Box Model
- 문서 구조를 나타내는 레이아웃이 나타나는 화면의 크기에 따라 유연하게 크기가 다시 조정되어 콘텐츠를 보여주는 구조를 의미
- 하나의 컨텐츠를 다양한 크기의 기기에서 보여 줄 때 유용하게 사용됨
=> display:속성값;: 태그를 박스(box) 또는 인라인 박스(inline-box)로 설정
=> box-orient:속성값;: 박스의 방향을 수평(horizontal), 수직(vertical)으로 지정
=> box-pack:속성값;: 박스의 배치(앞:start, 뒤:end, 가운데:center, 분배:justify)를 지정
=> box-flex:속성값;: 박스를 유연하게 하거나 (1 이상의 값) 유연하지 않게(0) 설정
#cssex11_1.css
@charset "utf-8";
body { text-align:center; padding:0; margin:0; }
header { width:100%; background-color:yellow; }
footer { width:100%; background-color:yellow; }
section { width:100%; box-orient:horizontal; display:box; display:-moz-box; display:-webkit-box; }
#box-1 { box-flex:1; -webkit-box-flex:1; min-height:100px; background-color:aqua; }
#box-2 { box-flex:1; -webkit-box-flex:1; min-height:100px; background-color:#ccc; }
#box-3 { box-flex:1; -webkit-box-flex:1; min-height:100px; background-color:aqua; }
#cssex11_2.html
<!DOCTYPE html>
<html lang="ko">
<head>
<title> 유연한 박스 모델 구성하기 </title>
<meta charset="utf-8" />
<link href="./cssex11_1.css" rel="stylesheet" />
</head>
<body>
<header>
<h1> HEADER </h1>
<p> 머리글 영역입니다. </p>
</header>
<section>
<nav id="box-1">
<h1> LEFT </h1>
<p> 이곳은 왼쪽 영역입니다. </p>
<p> 내비게이션을 주로 작성하는 곳으로 사용됩니다. </p>
</nav>
<article id="box-2">
<h1> CONTENT </h1>
<p> 이곳은 가운데 영역입니다. </p>
<p> 주요 본문을 주로 작성하는 곳으로 사용됩니다. </p>
</article>
<aside id="box-3">
<h1> RIGHT </h1>
<p> 이곳은 오른쪽 영역입니다. </p>
<p> 어사이드 내용을 주로 작성하는 곳으로 사용됩니다. </p>
</aside>
</section>
<footer>
<h1> FOOTER </h1>
<p> 바닥글 영역입니다. </p>
</footer>
</body>
</html>
이런 유연한 구조를 가진 웹페이지를 동적 웹 페이지라고 한다.
주 메뉴 레이아웃 구성해보기
#cssexadv_1.css
@charset"utf-8";
* { margin:0; }
ul, li { list-style:none; }
a { color:#fff; text-decoration:underline; }
a:hover { color:#000; text-decoration:none; }
.gnb{padding:0}
.gnb a {width:135px; padding:0 5px 0 5px; display:block; text-decoration:none; }
.gnb li { position:relative; float:left; margin-right:11px; }
.gnb li a { height:50px;text-align:center; line-height:50px; font-size:1.05em; color:#000; }
.gnb li a:hover { color:#09f; }
.gnb li ul { display:none; position:absolute; top:50px; left:0; }
.gnb li:hover ul { display:block; }
.gnb li ul a {width:120px; height:35px; background-color:#000; color:#fff; text-align:center; line-height:37px; border-bottom:1px solid #fff; }
.gnb li ul a:hover { background-color:#555; }
#wrap{width:980px; height:auto; float:left;}
#main_menu{width:700px; height:50px; float:left; background:#92c121;}
#cssexadv_2.html
<!DOCTYPE html>
<html lang="ko">
<head>
<title>메인 메뉴</title>
<meta charset="utf-8" />
<link href="./cssexadv_1.css" rel="stylesheet" />
</head>
<body>
<div id="wrap">
<div id="main_menu">
<ul class="gnb">
<li>
<a href="http://binzip2.tistory.com" title="블로그 이동">블로그 이동</a>
</li>
<li>
<a href="/index.php/1" title="웹 프로그래밍">웹 프로그래밍</a>
<ul>
<li>
<a href="/index.php/1" title="HTML">HTML</a>
</li>
<li>
<a href="/index.php/2" title="CSS">CSS</a>
</li>
<li>
<a href="/index.php/3" title="JS">JS</a>
</li>
</ul>
</li>
<li>
<a href="/board/sub.php/list" title="방문자 게시판">방문자 게시판</a>
<ul>
<li>
<a href="/board/sub.php/list" title="자유게시판">자유게시판</a>
</li>
</ul>
</li>
<li>
<a href="/member/sub.php/login" title="로그인">로그인</a>
<ul>
<li>
<a href="/member/sub.php/login" title="로그인">로그인</a>
</li>
<li>
<a href="/member/sub.php/join" title="회원가입">회원가입</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
'Programming > Web Programming' 카테고리의 다른 글
| JavaScript Basic #2 (0) | 2017.07.15 |
|---|---|
| JavaScript Basic #1 (0) | 2017.07.13 |
| CSS #1 (0) | 2017.07.12 |
| HTML Basic #3 (0) | 2017.07.10 |
| HTML Basic #2 (0) | 2017.07.08 |
