웹 페이지 레이아웃 구현 실습 예제
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
body {
background-color: white;
}
.header, .footer {
background-color: grey;
color: white;
padding: 15px;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.menu {
width: 25%;
}
.content {
width: 75%;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 8px;
background-color: #33b5e5;
color: #ffffff;
}
.menu li:hover {
background-color: #0099cc;
}
</style>
</head>
<body>
<div class="header">
<h1>Chania</h1>
</div>
<div class="clearfix">
<div class="column menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>
<div class="column content">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
<p>You will learn more about web layout and responsive web pages in a later chapter.</p>
</div>
</div>
<div class="footer">
<p>Footer Text</p>
</div>
</body>
</html>
Chania
The City
Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.
You will learn more about web layout and responsive web pages in a later chapter.
웹 페이지 레이아웃 구현 실습 2) 기능추가 - css_layout.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}/*width값 header값이 추가됨*/
body {
font-family: Arial, Helvetica, sans-serif;
}/*일괄적으로 폰트 적용*/
/* Style the header */
header {
background-color: #666;
padding: 30px;
text-align: center;
font-size: 35px;
color: white;
} /*타이틀 상단 스타일 설정*/
/* Create two columns/boxes that floats next to each other */
nav {
float: left;
width: 30%;/*30퍼센트 메뉴바로 설정할 것이다*/
height: 300px; /* only for demonstration, should be removed */
background: #ccc;
padding: 20px;
}/*왼쪽 메뉴바 스타일 설정*/
/* Style the list inside the menu */
nav ul {
list-style-type: none;
padding: 0;
}/* 메뉴 글머리 요소 지우기 */
article {
float: left;
padding: 20px;
width: 70%;/*nav가 30프로 설정되어 있어서 가로의 남은 부분은 70%이다.*/
background-color: #f1f1f1;
height: 300px; /* only for demonstration, should be removed */
}/**/
/*nav와 article의 height는 같아야 한다*/
/* Clear floats after the columns */
section::after {
content: "";
display: table;
clear: both;
}/*선택한 뒤*/
/* Style the footer */
footer {
background-color: #777;
padding: 10px;
text-align: center;
color: white;
}/*하단 타이틀 스타일 설정*/
/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
@media (max-width: 600px) {
nav, article {
width: 100%;
height: auto;
}
}/*미디어 쿼리 -> 없으면 화면 크기가 줄어들어도 구조가 변하지 않음,
있으면 최대 600일때 nava, article을 100%로*/
</style>
</head>
<body>
<h2>CSS Layout Float</h2>
<p>In this example, we have created a header, two columns/boxes and a footer. On smaller screens, the columns will stack on top of each other.</p>
<p>Resize the browser window to see the responsive effect (you will learn more about this in our next chapter - HTML Responsive.)</p>
<header>
<h2>Cities</h2>
</header>
<section>
<nav>
<ul>
<li><a href="#">London</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Tokyo</a></li>
</ul>
</nav>
<article>
<h1>London</h1>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</article>
</section>
<footer>
<p>Footer</p>
</footer>
</body>
</html>
CSS Layout Float
In this example, we have created a header, two columns/boxes and a footer. On smaller screens, the columns will stack on top of each other.
Resize the browser window to see the responsive effect (you will learn more about this in our next chapter - HTML Responsive.)
Cities
London
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.
'Devlopment > HTML & CSS' 카테고리의 다른 글
| [CSS] Layout Float (0) | 2024.01.07 |
|---|---|
| [CSS] 레이아웃 위치 - Layout Position (1) | 2024.01.07 |
| [CSS] 레이아웃 속성 - Layout Display (0) | 2024.01.07 |
| [CSS] 표(Tables) 생성 및 속성 실습 (0) | 2024.01.07 |
| [CSS] 스타일 링크(Style Links) (1) | 2024.01.07 |