Q. 구글 웹 폰트를 활용하여 하단의 내용과 이미지를 참고하여 완성하시오.
| 문제 내용 |
|
제목 Rint Development HTML5 + CSS3 Basic
메뉴 Web Mobile Game Simulation Data
HTML5 CSS3 JavaScript jQuery Node.js
Main Article
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in magna libero. Sed nec pharetra nunc. Proin eget magna id ipsum eleifend cursus sit amet nec lectus. Nunc quis lacus magna. Aliquam blandit, sapien ut viverra fermentum, elit tortor ornare nisi, in luctus sem massa pulvinar turpis. Cras tincidunt dictum urna ut ultricies. Nullam diam nibh, pellentesque non laoreet ut, bibendum nec mauris. Maecenas pulvinar porttitor laoreet. Vivamus bibendum purus nisl, eget aliquam lectus. Maecenas justo libero, euismod sit amet suscipit eu, vulputate eget neque. Aliquam quam est, blandit nec iaculis non, suscipit vel nunc. Proin et odio aliquam erat pharetra accumsan et quis neque. Vivamus interdum accumsan leo eu adipiscing. Integer accumsan elit non turpis faucibus porttitor. Aliquam scelerisque nisi et turpis pretium at ultricies turpis pharetra.
content 왼쪽 사이드 메뉴 First HTML5 Canvas HTML5 Audio HTML5 Video HTML5 Semantic Web
Second CSS3 Transition CSS3 Animation CSS3 Border CSS3 Box
하단 내용 HTML5 + CSS3 Basic Website Layout Basic |
A.
[ 1단계 ]
① layout.html에 기본 layout을 잡고 외부css 파일로 layout.css 파일을 만들어서 링크를 건다.
② layout.css에는 공통적으로 적용할 내용을 적는다.
- html
<!DOCTYPE html>
<html lang="ko">
<head>
<title>CSS Layout</title>
<link rel="stylesheet" type="text/css" href="layout.css"> // type은 동일 폴더가 아니어도 찾을 수 있다
</head>
<body>
<header id="main_header">
</header>
<div id="content">
<section id="main_section">
</section>
<aside id="main_aside">
</aside>
</div>
<footer id="main_footer">
</footer>
</body>
</html>
- CSS
* { margin: 0; padding: 0; }
body { font-family: 'Times New Roman', serif; }
li { list-style: none; }
a { text-decoration: none; }
img { border: 0; }
[ 2단계 ]
① HTML5 Semantic 태그로 header 부분을 구성한다.
[제목]
Rint Development
HTML5 + CSS3 Basic
② 위에서 쓴 제목에 자신이 마음에 드는 구글 폰트를 사용한다.
③ gnb메뉴로 다음을 작성하고
Web
Mobile
Game
Simulation
Data
④ lnb메뉴로 다음을 작성한다.
HTML5
CSS3
JavaScript
jQuery
Node.js
// Tip : gnb는 global navigation bar를 의미하고
lnb는 local navigation bar를 의미한다.
웹 페이지를 만들 때 자주 사용하는 용어이므로 기억할 것!
⑤ 마우스가 gnb메뉴와 lnb메뉴에 마우스 롤오버 시
배경색은 검정색, 글자색은 하얀색으로 하자.
⑥ layout은 아래와 같이 작성한다.
- html
<!DOCTYPE html>
<html lang="ko">
<head>
<title>CSS Layout</title>
<link href="http://fonts.googleapis.com/css?family=Henny+Penny" rel="stylesheet" >
<link rel="stylesheet" type="text/css" href="layout.css">
</head>
<body>
<header id="main_header">
<div id="title">
<h1>Rint Development</h1>
<h2>HTML5 + CSS3 Basic</h2>
</div>
<nav id="main_gnb">
<ul>
<li><a href="#">Web</a></li>
<li><a href="#">Mobile</a></li>
<li><a href="#">Game</a></li>
<li><a href="#">Simulation</a></li>
<li><a href="#">Data</a></li>
</ul>
</nav>
<nav id="main_lnb">
<ul>
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS3</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">Node.js</a></li>
</ul>
</nav>
</header>
<div id="content">
<section id="main_section">
</section>
<aside id="main_aside">
</aside>
</div>
<footer id="main_footer">
</footer>
</body>
</html>
- CSS
* { margin: 0; padding: 0; }
body { font-family: 'Times New Roman', serif; }
li { list-style: none; }
a { text-decoration: none; }
img { border: 0; }
#main_header {
/* 중앙 정렬*/
width: 960px; margin: 0 auto; // margin에서 auto는 브라우저의 크기 상관없이 비율을 유지하기 위함
/* 절대 좌표 */
height: 160px;
position: relative;
}
#main_header > #title {
position: absolute;
left: 20px; top: 30px;
}
#main_header > #main_gnb {
position: absolute;
right: 0; top: 0;
}
#main_header > #main_lnb {
position: absolute;
right: 0; bottom: 10px;
}
#title {
font-family: 'Henny Penny', cursive;
}
#main_gnb > ul { overflow: hidden; }
#main_gnb > ul > li { float: left; }
#main_gnb > ul > li > a {
display: block;
padding: 2px 10px;
border: 1px solid black;
}
#main_gnb > ul > li > a:hover {
background: black;
color: white;
}
#main_gnb > ul > li:first-child > a { border-radius: 10px 0 0 10px; }
#main_gnb > ul > li:last-child > a { border-radius: 0 10px 10px 0; }
#main_lnb > ul { overflow: hidden; }
#main_lnb > ul > li { float: left; }
#main_lnb > ul > li > a {
display: block;
padding: 10px 20px;
border: 1px solid black;
}
#main_lnb > ul > li > a:hover {
background: black;
color: white;
}
#main_lnb > ul > li:first-child > a { border-radius: 10px 0 0 10px; }
#main_lnb > ul > li:last-child > a { border-radius: 0 10px 10px 0; }
[ 3단계 ]
① content에 3개의 기사를 넣도록 하자.
② layout은 아래와 같이 작성한다.
- html
<!DOCTYPE html>
<html lang="ko">
<head>
<title>CSS Layout</title>
<link href="http://fonts.googleapis.com/css?family=Henny+Penny" rel="stylesheet" >
<link rel="stylesheet" type="text/css" href="layout.css">
</head>
<body>
<header id="main_header">
<div id="title">
<h1>Rint Development</h1>
<h2>HTML5 + CSS3 Basic</h2>
</div>
<nav id="main_gnb">
<ul>
<li><a href="#">Web</a></li>
<li><a href="#">Mobile</a></li>
<li><a href="#">Game</a></li>
<li><a href="#">Simulation</a></li>
<li><a href="#">Data</a></li>
</ul>
</nav>
<nav id="main_lnb">
<ul>
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS3</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">Node.js</a></li>
</ul>
</nav>
</header>
<div id="content">
<section id="main_section">
<article class="main_article">
<h1>Main Article</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in magna libero. Sed nec pharetra nunc. Proin eget magna id ipsum eleifend cursus sit amet nec lectus. Nunc quis lacus magna. Aliquam blandit, sapien ut viverra fermentum, elit tortor ornare nisi, in luctus sem massa pulvinar turpis. Cras tincidunt dictum urna ut ultricies. Nullam diam nibh, pellentesque non laoreet ut, bibendum nec mauris. Maecenas pulvinar porttitor laoreet. Vivamus bibendum purus nisl, eget aliquam lectus. Maecenas justo libero, euismod sit amet suscipit eu, vulputate eget neque. Aliquam quam est, blandit nec iaculis non, suscipit vel nunc. Proin et odio aliquam erat pharetra accumsan et quis neque. Vivamus interdum accumsan leo eu adipiscing. Integer accumsan elit non turpis faucibus porttitor. Aliquam scelerisque nisi et turpis pretium at ultricies turpis pharetra.</p>
</article>
<article class="main_article">
<h1>Main Article</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in magna libero. Sed nec pharetra nunc. Proin eget magna id ipsum eleifend cursus sit amet nec lectus. Nunc quis lacus magna. Aliquam blandit, sapien ut viverra fermentum, elit tortor ornare nisi, in luctus sem massa pulvinar turpis. Cras tincidunt dictum urna ut ultricies. Nullam diam nibh, pellentesque non laoreet ut, bibendum nec mauris. Maecenas pulvinar porttitor laoreet. Vivamus bibendum purus nisl, eget aliquam lectus. Maecenas justo libero, euismod sit amet suscipit eu, vulputate eget neque. Aliquam quam est, blandit nec iaculis non, suscipit vel nunc. Proin et odio aliquam erat pharetra accumsan et quis neque. Vivamus interdum accumsan leo eu adipiscing. Integer accumsan elit non turpis faucibus porttitor. Aliquam scelerisque nisi et turpis pretium at ultricies turpis pharetra.</p>
</article>
<article class="main_article">
<h1>Main Article</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in magna libero. Sed nec pharetra nunc. Proin eget magna id ipsum eleifend cursus sit amet nec lectus. Nunc quis lacus magna. Aliquam blandit, sapien ut viverra fermentum, elit tortor ornare nisi, in luctus sem massa pulvinar turpis. Cras tincidunt dictum urna ut ultricies. Nullam diam nibh, pellentesque non laoreet ut, bibendum nec mauris. Maecenas pulvinar porttitor laoreet. Vivamus bibendum purus nisl, eget aliquam lectus. Maecenas justo libero, euismod sit amet suscipit eu, vulputate eget neque. Aliquam quam est, blandit nec iaculis non, suscipit vel nunc. Proin et odio aliquam erat pharetra accumsan et quis neque. Vivamus interdum accumsan leo eu adipiscing. Integer accumsan elit non turpis faucibus porttitor. Aliquam scelerisque nisi et turpis pretium at ultricies turpis pharetra.</p>
</article>
</section>
<aside id="main_aside">
</aside>
</div>
<footer id="main_footer">
</footer>
</body>
</html>
- CSS
* { margin: 0; padding: 0; }
body { font-family: 'Times New Roman', serif; }
li { list-style: none; }
a { text-decoration: none; }
img { border: 0; }
#main_header {
/* 중앙 정렬*/
width: 960px; margin: 0 auto;
/* 절대 좌표 */
height: 160px;
position: relative;
}
#main_header > #title {
position: absolute;
left: 20px; top: 30px;
}
#main_header > #main_gnb {
position: absolute;
right: 0; top: 0;
}
#main_header > #main_lnb {
position: absolute;
right: 0; bottom: 10px;
}
#title {
font-family: 'Henny Penny', cursive;
}
#main_gnb > ul { overflow: hidden; }
#main_gnb > ul > li { float: left; }
#main_gnb > ul > li > a {
display: block;
padding: 2px 10px;
border: 1px solid black;
}
#main_gnb > ul > li > a:hover {
background: black;
color: white;
}
#main_gnb > ul > li:first-child > a { border-radius: 10px 0 0 10px; }
#main_gnb > ul > li:last-child > a { border-radius: 0 10px 10px 0; }
#main_lnb > ul { overflow: hidden; }
#main_lnb > ul > li { float: left; }
#main_lnb > ul > li > a {
display: block;
padding: 10px 20px;
border: 1px solid black;
}
#main_lnb > ul > li > a:hover {
background: black;
color: white;
}
#main_lnb > ul > li:first-child > a { border-radius: 10px 0 0 10px; }
#main_lnb > ul > li:last-child > a { border-radius: 0 10px 10px 0; }
#content {
/* 중앙 정렬 */
width: 960px; margin: 0 auto;
/* 수평 레이아웃 구성 */
overflow: hidden;
}
#content > #main_section {
width: 750px;
float: left;
}
#content > #main_aside {
width: 200px;
float: right;
}
#main_section > article.main_article {
margin-bottom: 10px;
padding: 20px;
border: 1px solid black;
}
[ 4단계 ]
① content에 왼쪽 사이드 메뉴를 작성하자.
first
second
메뉴가 길어서 메뉴가 다 표시가 안될 때에는 생략표시를 쓰도록 하자.
② layout은 아래와 같이 작성한다.
- html
<!DOCTYPE html>
<html lang="ko">
<head>
<title>CSS Layout</title>
<link href="http://fonts.googleapis.com/css?family=Henny+Penny" rel="stylesheet" >
<link rel="stylesheet" type="text/css" href="layout.css">
</head>
<body>
<header id="main_header">
<div id="title">
<h1>Rint Development</h1>
<h2>HTML5 + CSS3 Basic</h2>
</div>
<nav id="main_gnb">
<ul>
<li><a href="#">Web</a></li>
<li><a href="#">Mobile</a></li>
<li><a href="#">Game</a></li>
<li><a href="#">Simulation</a></li>
<li><a href="#">Data</a></li>
</ul>
</nav>
<nav id="main_lnb">
<ul>
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS3</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">Node.js</a></li>
</ul>
</nav>
</header>
<div id="content">
<section id="main_section">
<article class="main_article">
<h1>Main Article</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in magna libero. Sed nec pharetra nunc. Proin eget magna id ipsum eleifend cursus sit amet nec lectus. Nunc quis lacus magna. Aliquam blandit, sapien ut viverra fermentum, elit tortor ornare nisi, in luctus sem massa pulvinar turpis. Cras tincidunt dictum urna ut ultricies. Nullam diam nibh, pellentesque non laoreet ut, bibendum nec mauris. Maecenas pulvinar porttitor laoreet. Vivamus bibendum purus nisl, eget aliquam lectus. Maecenas justo libero, euismod sit amet suscipit eu, vulputate eget neque. Aliquam quam est, blandit nec iaculis non, suscipit vel nunc. Proin et odio aliquam erat pharetra accumsan et quis neque. Vivamus interdum accumsan leo eu adipiscing. Integer accumsan elit non turpis faucibus porttitor. Aliquam scelerisque nisi et turpis pretium at ultricies turpis pharetra.</p>
</article>
<article class="main_article">
<h1>Main Article</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in magna libero. Sed nec pharetra nunc. Proin eget magna id ipsum eleifend cursus sit amet nec lectus. Nunc quis lacus magna. Aliquam blandit, sapien ut viverra fermentum, elit tortor ornare nisi, in luctus sem massa pulvinar turpis. Cras tincidunt dictum urna ut ultricies. Nullam diam nibh, pellentesque non laoreet ut, bibendum nec mauris. Maecenas pulvinar porttitor laoreet. Vivamus bibendum purus nisl, eget aliquam lectus. Maecenas justo libero, euismod sit amet suscipit eu, vulputate eget neque. Aliquam quam est, blandit nec iaculis non, suscipit vel nunc. Proin et odio aliquam erat pharetra accumsan et quis neque. Vivamus interdum accumsan leo eu adipiscing. Integer accumsan elit non turpis faucibus porttitor. Aliquam scelerisque nisi et turpis pretium at ultricies turpis pharetra.</p>
</article>
<article class="main_article">
<h1>Main Article</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in magna libero. Sed nec pharetra nunc. Proin eget magna id ipsum eleifend cursus sit amet nec lectus. Nunc quis lacus magna. Aliquam blandit, sapien ut viverra fermentum, elit tortor ornare nisi, in luctus sem massa pulvinar turpis. Cras tincidunt dictum urna ut ultricies. Nullam diam nibh, pellentesque non laoreet ut, bibendum nec mauris. Maecenas pulvinar porttitor laoreet. Vivamus bibendum purus nisl, eget aliquam lectus. Maecenas justo libero, euismod sit amet suscipit eu, vulputate eget neque. Aliquam quam est, blandit nec iaculis non, suscipit vel nunc. Proin et odio aliquam erat pharetra accumsan et quis neque. Vivamus interdum accumsan leo eu adipiscing. Integer accumsan elit non turpis faucibus porttitor. Aliquam scelerisque nisi et turpis pretium at ultricies turpis pharetra.</p>
</article>
</section>
<aside id="main_aside">
<input id="first" type="radio" name="tab" checked="checked" />
<input id="second" type="radio" name="tab" />
<section class="buttons">
<label for="first">First</label> // <section> 범위를 넘어 상위태그들로 이동이 불가하기 때문에 label for를 사용하는 것!
<label for="second">Second</label> // for="second"는 second를 찾으라는 의미 (for는 #(ID)만 탐색가능)
</section>
<div class="tab_item">
<ul>
<li class="item"><a href="#">
<div class="thumbnail">
<img src="http://placehold.it/45x45" />
</div>
<div class="description">
<strong>HTML5 Canvas</strong><p>2012-03-15</p>
</div>
</a></li>
<li class="item"><a href="#">
<div class="thumbnail">
<img src="http://placehold.it/45x45" />
</div>
<div class="description">
<strong>HTML5 Audio</strong><p>2012-03-15</p>
</div>
</a></li>
<li class="item"><a href="#">
<div class="thumbnail">
<img src="http://placehold.it/45x45" />
</div>
<div class="description">
<strong>HTML5 Video</strong><p>2012-03-15</p>
</div>
</a></li>
<li class="item"><a href="#">
<div class="thumbnail">
<img src="http://placehold.it/45x45" />
</div>
<div class="description">
<strong>HTML5 Semantic Web</strong><p>2012-03-15</p>
</div>
</a></li>
</ul>
</div>
<div class="tab_item">
<ul>
<li class="item"><a href="#">
<div class="thumbnail">
<img src="http://placehold.it/45x45" />
</div>
<div class="description">
<strong>CSS3 Transition</strong><p>2012-03-15</p>
</div>
</a></li>
<li class="item"><a href="#">
<div class="thumbnail">
<img src="http://placehold.it/45x45" />
</div>
<div class="description">
<strong>CSS3 Animation</strong><p>2012-03-15</p>
</div>
</a></li>
<li class="item"><a href="#">
<div class="thumbnail">
<img src="http://placehold.it/45x45" />
</div>
<div class="description">
<strong>CSS3 Border</strong><p>2012-03-15</p>
</div>
</a></li>
<li class="item"><a href="#">
<div class="thumbnail">
<img src="http://placehold.it/45x45" />
</div>
<div class="description">
<strong>CSS3 Box</strong><p>2012-03-15</p>
</div>
</a></li>
</ul>
</div>
</aside>
</div>
<footer id="main_footer">
</footer>
</body>
</html>
- CSS
* { margin: 0; padding: 0; }
body { font-family: 'Times New Roman', serif; }
li { list-style: none; }
a { text-decoration: none; }
img { border: 0; }
#main_header {
/* 중앙 정렬*/
width: 960px; margin: 0 auto;
/* 절대 좌표 */
height: 160px;
position: relative;
}
#main_header > #title {
position: absolute;
left: 20px; top: 30px;
}
#main_header > #main_gnb {
position: absolute;
right: 0; top: 0;
}
#main_header > #main_lnb {
position: absolute;
right: 0; bottom: 10px;
}
#title {
font-family: 'Henny Penny', cursive;
}
#main_gnb > ul { overflow: hidden; }
#main_gnb > ul > li { float: left; }
#main_gnb > ul > li > a {
display: block;
padding: 2px 10px;
border: 1px solid black;
}
#main_gnb > ul > li > a:hover {
background: black;
color: white;
}
#main_gnb > ul > li:first-child > a { border-radius: 10px 0 0 10px; }
#main_gnb > ul > li:last-child > a { border-radius: 0 10px 10px 0; }
#main_lnb > ul { overflow: hidden; }
#main_lnb > ul > li { float: left; }
#main_lnb > ul > li > a {
display: block;
padding: 10px 20px;
border: 1px solid black;
}
#main_lnb > ul > li > a:hover {
background: black;
color: white;
}
#main_lnb > ul > li:first-child > a { border-radius: 10px 0 0 10px; }
#main_lnb > ul > li:last-child > a { border-radius: 0 10px 10px 0; }
#content {
/* 중앙 정렬 */
width: 960px; margin: 0 auto;
/* 수평 레이아웃 구성 */
overflow: hidden;
}
#content > #main_section {
width: 750px;
float: left;
}
#content > #main_aside {
width: 200px;
float: right;
}
#main_section > article.main_article {
margin-bottom: 10px;
padding: 20px;
border: 1px solid black;
}
/* 첫 번째 탭 */
input:nth-of-type(1) { display: none; }
input:nth-of-type(1) ~ div:nth-of-type(1) { display: none; } // ~는 뒤의 형제 태그를 찾는 의미
input:nth-of-type(1):checked ~ div:nth-of-type(1) { display: block; }
/* 두 번째 탭 */
input:nth-of-type(2) { display: none; } // 지우기
input:nth-of-type(2) ~ div:nth-of-type(2) { display: none; } // checked 전에 내용 안보이게 하기
input:nth-of-type(2):checked ~ div:nth-of-type(2) { display: block; } // checked된 내용 보이게 하기
/* 탭 모양 구성 */
section.buttons { overflow: hidden; }
section.buttons > label {
/* 수평 정렬 */
display: block; float: left;
/* 크기 및 글자 위치 지정*/
width: 100px; height: 30px;
line-height: 30px;
text-align: center;
/* 테두리 지정 */
box-sizing: border-box; // padding, border까지 총 width 길이만큼만 커지도록 지정하는 것
border: 1px solid black;
/* 색상 지정*/
background: black;
color: white;
}
input:nth-of-type(1):checked ~ section.buttons > label:nth-of-type(1) {
background: white;
color: black;
}
input:nth-of-type(2):checked ~ section.buttons > label:nth-of-type(2) {
background: white;
color: black;
}
.item {
overflow: hidden;
padding: 10px;
border: 1px solid black;
border-top: none;
}
.thumbnail {
float: left;
}
.description {
float: left;
margin-left: 10px;
}
.description > strong {
display: block;
width: 120px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
[ 5단계 ] - 최종 답
① footer에 다음 내용을 넣도록 하자.
HTML5 + CSS3 Basic
Website Layout Basic
Website Layout Basic은 주소태그를 이용한다.
② layout은 아래와 같이 작성한다.
- html
<!DOCTYPE html>
<html lang="ko">
<head>
<title>CSS Layout</title>
<link href="http://fonts.googleapis.com/css?family=Henny+Penny" rel="stylesheet" >
<link rel="stylesheet" type="text/css" href="layout.css">
</head>
<body>
<header id="main_header">
<div id="title">
<h1>Rint Development</h1>
<h2>HTML5 + CSS3 Basic</h2>
</div>
<nav id="main_gnb">
<ul>
<li><a href="#">Web</a></li>
<li><a href="#">Mobile</a></li>
<li><a href="#">Game</a></li>
<li><a href="#">Simulation</a></li>
<li><a href="#">Data</a></li>
</ul>
</nav>
<nav id="main_lnb">
<ul>
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS3</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">Node.js</a></li>
</ul>
</nav>
</header>
<div id="content">
<section id="main_section">
<article class="main_article">
<h1>Main Article</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in magna libero. Sed nec pharetra nunc. Proin eget magna id ipsum eleifend cursus sit amet nec lectus. Nunc quis lacus magna. Aliquam blandit, sapien ut viverra fermentum, elit tortor ornare nisi, in luctus sem massa pulvinar turpis. Cras tincidunt dictum urna ut ultricies. Nullam diam nibh, pellentesque non laoreet ut, bibendum nec mauris. Maecenas pulvinar porttitor laoreet. Vivamus bibendum purus nisl, eget aliquam lectus. Maecenas justo libero, euismod sit amet suscipit eu, vulputate eget neque. Aliquam quam est, blandit nec iaculis non, suscipit vel nunc. Proin et odio aliquam erat pharetra accumsan et quis neque. Vivamus interdum accumsan leo eu adipiscing. Integer accumsan elit non turpis faucibus porttitor. Aliquam scelerisque nisi et turpis pretium at ultricies turpis pharetra.</p>
</article>
<article class="main_article">
<h1>Main Article</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in magna libero. Sed nec pharetra nunc. Proin eget magna id ipsum eleifend cursus sit amet nec lectus. Nunc quis lacus magna. Aliquam blandit, sapien ut viverra fermentum, elit tortor ornare nisi, in luctus sem massa pulvinar turpis. Cras tincidunt dictum urna ut ultricies. Nullam diam nibh, pellentesque non laoreet ut, bibendum nec mauris. Maecenas pulvinar porttitor laoreet. Vivamus bibendum purus nisl, eget aliquam lectus. Maecenas justo libero, euismod sit amet suscipit eu, vulputate eget neque. Aliquam quam est, blandit nec iaculis non, suscipit vel nunc. Proin et odio aliquam erat pharetra accumsan et quis neque. Vivamus interdum accumsan leo eu adipiscing. Integer accumsan elit non turpis faucibus porttitor. Aliquam scelerisque nisi et turpis pretium at ultricies turpis pharetra.</p>
</article>
<article class="main_article">
<h1>Main Article</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in magna libero. Sed nec pharetra nunc. Proin eget magna id ipsum eleifend cursus sit amet nec lectus. Nunc quis lacus magna. Aliquam blandit, sapien ut viverra fermentum, elit tortor ornare nisi, in luctus sem massa pulvinar turpis. Cras tincidunt dictum urna ut ultricies. Nullam diam nibh, pellentesque non laoreet ut, bibendum nec mauris. Maecenas pulvinar porttitor laoreet. Vivamus bibendum purus nisl, eget aliquam lectus. Maecenas justo libero, euismod sit amet suscipit eu, vulputate eget neque. Aliquam quam est, blandit nec iaculis non, suscipit vel nunc. Proin et odio aliquam erat pharetra accumsan et quis neque. Vivamus interdum accumsan leo eu adipiscing. Integer accumsan elit non turpis faucibus porttitor. Aliquam scelerisque nisi et turpis pretium at ultricies turpis pharetra.</p>
</article>
</section>
<aside id="main_aside">
<input id="first" type="radio" name="tab" checked="checked" />
<input id="second" type="radio" name="tab" />
<section class="buttons">
<label for="first">First</label>
<label for="second">Second</label>
</section>
<div class="tab_item">
<ul>
<li class="item"><a href="#">
<div class="thumbnail">
<img src="http://placehold.it/45x45" />
</div>
<div class="description">
<strong>HTML5 Canvas</strong><p>2012-03-15</p>
</div>
</a></li>
<li class="item"><a href="#">
<div class="thumbnail">
<img src="http://placehold.it/45x45" />
</div>
<div class="description">
<strong>HTML5 Audio</strong><p>2012-03-15</p>
</div>
</a></li>
<li class="item"><a href="#">
<div class="thumbnail">
<img src="http://placehold.it/45x45" />
</div>
<div class="description">
<strong>HTML5 Video</strong><p>2012-03-15</p>
</div>
</a></li>
<li class="item"><a href="#">
<div class="thumbnail">
<img src="http://placehold.it/45x45" />
</div>
<div class="description">
<strong>HTML5 Semantic Web</strong><p>2012-03-15</p>
</div>
</a></li>
</ul>
</div>
<div class="tab_item">
<ul>
<li class="item"><a href="#">
<div class="thumbnail">
<img src="http://placehold.it/45x45" />
</div>
<div class="description">
<strong>CSS3 Transition</strong><p>2012-03-15</p>
</div>
</a></li>
<li class="item"><a href="#">
<div class="thumbnail">
<img src="http://placehold.it/45x45" />
</div>
<div class="description">
<strong>CSS3 Animation</strong><p>2012-03-15</p>
</div>
</a></li>
<li class="item"><a href="#">
<div class="thumbnail">
<img src="http://placehold.it/45x45" />
</div>
<div class="description">
<strong>CSS3 Border</strong><p>2012-03-15</p>
</div>
</a></li>
<li class="item"><a href="#">
<div class="thumbnail">
<img src="http://placehold.it/45x45" />
</div>
<div class="description">
<strong>CSS3 Box</strong><p>2012-03-15</p>
</div>
</a></li>
</ul>
</div>
</aside>
</div>
<footer id="main_footer">
<h3>HTML5 + CSS3 Basic</h3>
<address>Website Layout Basic</address>
</footer>
</body>
</html>
- CSS
* { margin: 0; padding: 0; }
body { font-family: 'Times New Roman', serif; }
li { list-style: none; }
a { text-decoration: none; }
img { border: 0; }
#main_header {
/* 중앙 정렬*/
width: 960px; margin: 0 auto;
/* 절대 좌표 */
height: 160px;
position: relative;
}
#main_header > #title {
position: absolute;
left: 20px; top: 30px;
}
#main_header > #main_gnb {
position: absolute;
right: 0; top: 0;
}
#main_header > #main_lnb {
position: absolute;
right: 0; bottom: 10px;
}
#title {
font-family: 'Henny Penny', cursive;
}
#main_gnb > ul { overflow: hidden; }
#main_gnb > ul > li { float: left; }
#main_gnb > ul > li > a {
display: block;
padding: 2px 10px;
border: 1px solid black;
}
#main_gnb > ul > li > a:hover {
background: black;
color: white;
}
#main_gnb > ul > li:first-child > a { border-radius: 10px 0 0 10px; }
#main_gnb > ul > li:last-child > a { border-radius: 0 10px 10px 0; }
#main_lnb > ul { overflow: hidden; }
#main_lnb > ul > li { float: left; }
#main_lnb > ul > li > a {
display: block;
padding: 10px 20px;
border: 1px solid black;
}
#main_lnb > ul > li > a:hover {
background: black;
color: white;
}
#main_lnb > ul > li:first-child > a { border-radius: 10px 0 0 10px; }
#main_lnb > ul > li:last-child > a { border-radius: 0 10px 10px 0; }
#content {
/* 중앙 정렬 */
width: 960px; margin: 0 auto;
/* 수평 레이아웃 구성 */
overflow: hidden;
}
#content > #main_section {
width: 750px;
float: left;
}
#content > #main_aside {
width: 200px;
float: right;
}
#main_section > article.main_article {
margin-bottom: 10px;
padding: 20px;
border: 1px solid black;
}
/* 첫 번째 탭 */
input:nth-of-type(1) { display: none; }
input:nth-of-type(1) ~ div:nth-of-type(1) { display: none; }
input:nth-of-type(1):checked ~ div:nth-of-type(1) { display: block; }
/* 두 번째 탭 */
input:nth-of-type(2) { display: none; }
input:nth-of-type(2) ~ div:nth-of-type(2) { display: none; }
input:nth-of-type(2):checked ~ div:nth-of-type(2) { display: block; }
/* 탭 모양 구성 */
section.buttons { overflow: hidden; }
section.buttons > label {
/* 수평 정렬 */
display: block; float: left;
/* 크기 및 글자 위치 지정*/
width: 100px; height: 30px;
line-height: 30px;
text-align: center;
/* 테두리 지정 */
box-sizing: border-box;
border: 1px solid black;
/* 색상 지정*/
background: black;
color: white;
}
input:nth-of-type(1):checked ~ section.buttons > label:nth-of-type(1) {
background: white;
color: black;
}
input:nth-of-type(2):checked ~ section.buttons > label:nth-of-type(2) {
background: white;
color: black;
}
.item {
overflow: hidden;
padding: 10px;
border: 1px solid black;
border-top: none;
}
.thumbnail {
float: left;
}
.description {
float: left;
margin-left: 10px;
}
.description > strong {
display: block;
width: 120px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#main_footer {
/* 중앙 정렬 */
width: 960px; margin: 0 auto;
margin-bottom: 10px;
/* 테두리 */
box-sizing: border-box;
padding: 10px;
border: 1px solid black;
/* 글자 정렬 */
text-align: center; // 글자 뿐만 아니라 text-align 아래 있는 모든 것을 위치 정렬하는 것
// inline에서 사용 불가
}728x90
'Web > CSS' 카테고리의 다른 글
| [필기정리] Day40 - white space, 초기화코드, 구글 웹폰트 등 (0) | 2020.08.05 |
|---|---|
| [필기정리] Day39 - CSS 문제 및 해답 (0) | 2020.08.04 |
| [필기정리] Day39 - float, shadow, gradient 등 (0) | 2020.08.04 |
| [필기정리] Day38 - CSS 문제 및 해답 (0) | 2020.08.03 |
| [필기정리] Day38 - CSS 선택자, overflow, position 등 (0) | 2020.08.03 |