HTML, CSS/day28 / 23.10.10(화) / (핀테크) Spring 및 Ai 기반 핀테크 프로젝트 구축
11_float
01_float.html
<!-- 11_float/11-1_float.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>11-1_float</title>
<!--
# float
- 레이아웃을 구성할 때 블록레벨 요소를 가로 정렬하기 위해서 사용합니다
-->
<style type="text/css">
/* content */
.content {
border: 1px solid gray;
width: 50%;
padding: 10px;
}
.logo {
float: left;
}
/* box */
.box_area {
width: 50%;
}
.box {
width: 100px;
height: 100px;
font-size: 20px;
font-weight: bold;
}
.red { background-color: red; }
.green { background-color: green; }
.blue { background-color: blue; }
.orange { background-color: orange; }
.red, .green { float: left; }
.blue, .orange { float: right; }
</style>
</head>
<body>
<h1>float</h1>
<br/>
<h2>float</h2>
<div class="content">
<p class="logo"><img src="../../image/img/html5.jpg"/></p>
<p>
HTML5는 HTML의 완전한 5번째 버전으로 월드 와이드 웹 (World Wide Web)의 핵심 마크업 언어이다. 2004년 7월 Web Hypertext Application Technology Working Group(WHATWG)에서
웹 애플리케이션 1.0이라는 이름으로 세부 명세 작업을 시작하였다</p>
<p>
HTML5는 HTML 4.01, XHTML 1.0, DOM 레벨 2 HTML에 대한 차기 표준 제안이다. 비디오, 오디오 등 다양한 부가기능과 최신 멀티미디어 콘텐츠를 액티브X 없이 브라우저에서 쉽게 볼 수 있게 하는 것을 목적으로 한다.
</p>
</div>
<br/>
<hr/>
<h2>float box</h2>
<div class="box_area">
<div class="box red"> red </div>
<div class="box green"> green </div>
<div class="box blue"> blue </div>
<div class="box orange"> oragne </div>
</div>
</body>
</html>02_float-clear.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!--
# clear
- float 속성을 해제
# clear class
- 가상요소를 사용한 clear
-->
<style type="text/css">
.clear::after {
/* ::after - 요소 내용 끝에 새로운 컨텐츠를 추가 */
content: ""; /* 빈 컨텐츠 - 가상 요소 (::after)를 실행시키기 위해서 필요 */
display: block; /* 한 줄 차지 */
clear: both; /* float 속성 해제 */
}
div {
font-size: 20px;
font-weight: bold;
}
.box_area {
border: 1px solid gray;
width: 600px;
height: 600px;
}
.box {
padding: 10px;
}
.red {
width: 580px;
height: 100px;
background-color: red;
}
.green {
width: 200px;
height: 300px;
background-color: green;
float: left;
}
.blue {
width: 200px;
height: 300px;
background-color: blue;
float: right;
}
.orange {
width: 580px;
height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<h2>float box</h2>
<div class="box_area">
<div class="box red"> red </div>
<div class="box green"> green </div>
<div class="box blue"> blue </div>
<div class="clear"></div>
<div class="box orange"> oragne </div>
</div>
</body>
</html>03_float-정책꾸러미.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<!--
-->
<style type="text/css">
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: #333333;
}
a:hover {
text-decoration: underline;
color: green;
font-weight: bold;
}
/* policy */
.policy {
border: 1px solid silver;
width: 500px;
height: 150px;
position: relative;
margin: 20px auto;
padding: 10px;
background: url(../../image/float_image/cast_background.gif) repeat-x 0 0;
background-size: 500px 40px;
}
.policy_title {
margin-bottom: 20px;
}
.policy_title img {
height: 16px;
}
.policy_img {
float: left;
padding-left: 4px;
}
.policy_img img{
border: 1px solid silver;
}
.policy_txt {
border: 1px solid blue;
float: right;
width: 340px;
}
.policy_txt h3 {
font-size: 16px;
color: #0881d2;
margin-bottom: 4px;
}
.policy_txt li {
background: url(../../image/float_image/cast_list.gif) no-repeat 6px 50%;
font-size: 14px;
text-indent: 16px;
line-height: 20px;
}
.policy_txt li a {
color: #555555;
}
.more {
position: absolute;
top: 10px;
right: 10px;
font-weight: bold;
}
.more a {
color: #555555;
}
</style>
<body>
<h2>float 정책꾸러미</h2>
<br/>
<div class="policy">
<h3 class="policy_title"><img src="../../image/float_image/cast_title.gif"/></h3>
<p class="policy_img"><img src="../../image/float_image/cast_img.gif"/></p>
<div class="policy_txt">
<h3>우측통행실시</h3>
<ul>
<li><a href="#">우측보행, 7월 1일부터 본격 시행</a></li>
<li><a href="#">안전한 보행방법 우측보행 홍보동영상</a></li>
<li><a href="#">우측보행이 교통안전, 보행효율 면에...</a></li>
<li><a href="#">시험시행 중인 "우측보행" 호응도...</a></li>
</ul>
<p class="more"><a href="#">더보기</a></p>
</div>
</div>
</body>
</html>04Quiz웹툰.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>04_Quiz_웹툰</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-family: "돋움", sans-serif;
font-size: 14px;
}
h2 {
margin: 20px 0 0 20px;
}
a {
text-decoration: noen;
color: #333333;
}
a:hover {
text-decoration: underline;
color: green;
font-weight: bold;
}
li {
background: url(../../image/float_image/webtoon_dot.gif) no-repeat 10px 50%;
text-indent: 20px;
list-style: none;
}
/* webtoon */
.webtoon {
border: 1px solid gray;
width: 550px;
height: 200px;
position: relative;
margin: 20px auto;
}
.web_banner {
width: 150px;
float: left;
}
.web_banner img {
width: 140px;
margin: 5px;
}
.web_banner h3 {
margin-bottom: 5px;
margin-left: 5px;
}
.web_banner p {
font-size: 14px;
color: #666666;
font-weight: bold;
margin-left: 5px;
line-height: 20px;
}
.web_txt {
font-size: 16px;
float: right;
line-height: 26px;
margin-right: 30px;
}
.web_txt li:first-child{
font-weight: bold;
}
</style>
</head>
<body>
<h2> 웹툰 </h2>
<br>
<div class="webtoon">
<div class="web_banner">
<img src="../../image/float_image/webtoon_banner.JPG">
<h3>돌리고 맞추고!</h3>
<p>블록채우기 게임하고 주차 감각 기르세요</p>
</div>
<div class="web_txt">
<ul>
<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>
<li><a href="#">[붐] 어쩐지 부끄! 성교율 시간, 친구들의 반응</a></li>
<li><a href="#">[붐] 강렬한 눈빛이 인상적인 '티아라 뱅크스'</a></li>
</ul>
</div>
</div>
</body>
</html>04Quiz웹툰T.html
<!-- 11_float/11-4_Quiz_웹툰.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>11-4_Quiz_웹툰</title>
<style type="text/css">
/*
# Quiz_웹툰.jpg 파일의 내용을 구현하세요
*/
* {
margin: 0;
padding: 0;
}
body {
font-family: "돋움", sans-serif;
font-size: 13px;
}
h2 {
margin: 20px 0 0 20px;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: #333333;
}
a:hover {
text-decoration: underline;
color: green;
font-weight: bold;
}
/* webtoon */
.webtoon {
/* border: 1px solid gray; */
width: 470px;
height: 170px;
margin: 20px;
padding: 10px;
background-color: #f7f7f7;
}
.web_banner {
/* border: 1px solid red; */
float: left;
width: 130px;
}
.web_banner h3 {
font-size: 12px;
padding: 10px 0;
}
.web_banner p {
width: 120px;
font-size: 12px;
color: gray;
line-height: 20px;
}
.web_txt {
/* border: 1px solid blue; */
width: 330px;
float: right;
}
.web_txt li {
background: url(../../image/float_image/webtoon_dot.gif) no-repeat 0 50%;
padding-left: 6px;
font-size: 13px;
line-height: 24px;
}
</style>
</head>
<body>
<h2> 웹툰 </h2>
<br>
<div class="webtoon">
<div class="web_banner">
<img src="../../image/float_image/webtoon_banner.JPG">
<h3>돌리고 맞추고!</h3>
<p>블록채우기 게임하고 주차 감각 기르세요</p>
</div>
<div class="web_txt">
<ul>
<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>
<li><a href="#">[붐] 어쩐지 부끄! 성교율 시간, 친구들의 반응</a></li>
<li><a href="#">[붐] 강렬한 눈빛이 인상적인 '티아라 뱅크스'</a></li>
</ul>
</div>
</div>
</body>
</html>
05_float-menu.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
#
-->
<style type="text/css">
* {
margin: 0;
padding: 0;
}
li {
list-style: noen;
}
a {
text-decoration: none;
color: red;
}
/* snb */
.snb {
/* border: 1px solid brown; */
width: 140px;
}
.snb li {
border: 1px solid red;
}
.snb li a {
display: block;
height: 30px;
text-align: center;
padding-top: 10px;
}
.snb li a:hover {
background-color: orange;
color: black;
font-weight: bold;
}
</style>
</head>
<body>
<h1>float 세로 메뉴</h1>
<ul class="snb">
<li><a href="#">메뉴 1</a></li>
<li><a href="#">메뉴 2</a></li>
<li><a href="#">메뉴 3</a></li>
<li><a href="#">메뉴 4</a></li>
<li><a href="#">메뉴 5</a></li>
</ul>
</body>
</html>06_float-menu.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
li {
list-style: noen;
}
a {
text-decoration: none;
color: navy;
}
/* gnb 메뉴 */
.gnb li {
border: 1px solid blue;
width: 200px;
height: 30px;
float: left;
margin-left: 5px;
}
.gnb li a {
display: block;
height: 30px;
background-color: navy;
color: white;
text-align: center;
padding-top: 4px;
}
.gnb li a:hover {
background-color: purple;
font-weight: bold;
}
</style>
</head>
<body>
<h1>float 가로 메뉴</h1>
<ul class="gnb">
<li><a href="#">메뉴 1</a></li>
<li><a href="#">메뉴 2</a></li>
<li><a href="#">메뉴 3</a></li>
<li><a href="#">메뉴 4</a></li>
<li><a href="#">메뉴 5</a></li>
</ul>
</body>
</html>07_Quiz_menu.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: navy;
}
ul li {
width: 200px;
height: 50px;
border: 1px solid white;
list-style: none;
background-color: #cc0000;
text-align: center;
padding: 10px;
float: left;
}
ul li a {
display: block;
text-decoration: none;
color: white;
}
.gnb li:hover {
background-color: #009999;
text-decoration: underline white;
}
</style>
</head>
<body>
<h1>float menu</h1>
<br>
<ul class="gnb">
<li><a href="#">COMPANY<span><br>회사소개</span></a></li>
<li><a href="#">PRODUCT<span><br>제품소개</span></a></li>
<li><a href="#">SERVICE<span><br>유지보수</span></a></li>
<li><a href="#">CUSTOMER<span><br>고객지원</span></a></li>
<li><a href="#">EDUCATION<span><br>교육세미나</span></a></li>
</ul>
</body>
</html>07_Quiz_menuT.html
<!-- 11_float/11-7_Quiz_menu.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>11-7_Quiz_menu</title>
<!--
# Quiz_menu.png 파일의 내용을 구현하세요
-->
<style type="text/css">
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: navy;
}
ul li {
/* border: 1px solid red; */
float: left;
margin-left: 2px;
}
ul li a {
display: block;
width: 200px;
height: 40px;
background: #CC0000;
color: white;
font-weight: bold;
text-align: center;
padding: 10px 0;
}
ul li a:hover {
background-color: #009999;
text-decoration: underline;
}
ul li a span {
display: block;
}
</style>
</head>
<body>
<h1>float menu</h1>
<br/>
<ul>
<li><a href="#">COMPANY<span>회사소개</span></a></li>
<li><a href="#">PRODUCT<span>제품소개</span></a></li>
<li><a href="#">SERVICE<span>유지보수</span></a></li>
<li><a href="#">CUSTOMER<span>고객지원</span></a></li>
<li><a href="#">EUCATION<span>교육세미나</span></a></li>
</ul>
</body>
</html>12_layout
01_menu-layout.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
#
-->
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background: #f2f0f0;
font-family: "맑은 고딕", sans-serif;
font-size: 12px;
color: black;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
.clear {
content: "";
display: block;
clear: both;
}
/* logo */
#logo {
float: left;
padding: 30px 0 30px 30px;
}
/* top_menu */
#top_menu {
float: right;
margin: 30px 20px 0 0 ;
}
#top_menu li {
display: inline;
margin-right: 2px;
}
#top_menu li a {
color: #6e3b9a;
}
#top_menu li a:hover {
text-decoration: underline;
font-weight: bold;
}
/* gnb */
#gnb ul {
height: 40px;
font-size: 20px;
background-color: #696969;
text-align: center;
padding-top: 16px;
}
#gnb ul li {
display: inline;
margin: 0 50px;
}
#gnb ul li a {
color: white;
font-weight: bold;
}
#gnb ul li a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div id="logo">
<img src="../../image/layout_image/logo.gif" alt="">
</div>
<div id="top_menu">
<ul>
<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>
<li><a href="#">이용안내</a>|</li>
<li><a href="#">고객센터</a></li>
</ul>
</div>
<div class="clear"></div>
<div id="gnb">
<ul>
<li><a href="#">회사소개</a></li>
<li><a href="#">Q / A</a></li>
<li><a href="#">공지사항</a></li>
<li><a href="#">고객센터</a></li>
</ul>
</div>
</body>
</html>02_image-layout.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.clear::after{
content: "";
display: block;
clear: both;
}
.items {
border: 1px solid silver;
float: left;
margin: 10px;
}
.items img {
width: 200px;
display: block; /* 이미지와 테두리 사이의 공간 삭제*/
}
</style>
</head>
<body>
<h1>image layout</h1>
<br>
<div class="items">
<img src="../../image/layout_image/image1.jpg"/>
</div>
<div class="items">
<img src="../../image/layout_image/image2.jpg"/>
</div>
<div class="items">
<img src="../../image/layout_image/image3.jpg"/>
</div>
<div class="clear"></div>
<div class="items">
<img src="../../image/layout_image/image4.jpg"/>
</div>
<div class="items">
<img src="../../image/layout_image/image5.jpg"/>
</div>
<div class="items">
<img src="../../image/layout_image/image6.jpg"/>
</div>
</body>
</html>03_image-layout.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-family: "맑은 고딕", sans-serif;
font-size: 12px;
color: black;
}
h1 {
margin: 30px;
}
li {
list-style: none;
}
.clear::after {
content: "";
display: block;
clear: both;
}
/* product */
#product h2 {
border-bottom: 2px solid olive;
padding: 10px;
color: olive;
font-size: 22px;
}
#product h2 span {
margin: 0 20px;
font-size: 20px;
color: silver;
font-weight: bold;
}
#product .item {
float: left;
margin: 10px;
text-align: center;
}
#product .item .subject {
margin-top: 10px;
color: #cd853f;
}
#product .item .comment {
margin-top: 6px;
color: gray;
}
#product .item .price {
margin-top: 6px;
font-size: 22px;
font-weight: bold;
color: #b22222;
}
</style>
</head>
<body>
<h1>image layout</h1>
<div id="product">
<h2>상품 목록<span>product list</span></h2>
<ul class="item">
<li><img src="../../image/layout_image/new_01.jpg"/></li>
<li class="subject">맞춤 제작</li>
<li class="comment">원하시는 사이즈로 제작 가능</li>
<li class="price">20,000 원</li>
</ul>
<ul class="item">
<li><img src="../../image/layout_image/new_02.jpg"/></li>
<li class="subject">맞춤 제작</li>
<li class="comment">원하시는 사이즈로 제작 가능</li>
<li class="price">20,000 원</li>
</ul>
<ul class="item">
<li><img src="../../image/layout_image/new_03.jpg"/></li>
<li class="subject">맞춤 제작</li>
<li class="comment">원하시는 사이즈로 제작 가능</li>
<li class="price">20,000 원</li>
</ul>
<div class="clear"></div>
<ul class="item">
<li><img src="../../image/layout_image/new_04.jpg"/></li>
<li class="subject">맞춤 제작</li>
<li class="comment">원하시는 사이즈로 제작 가능</li>
<li class="price">20,000 원</li>
</ul>
<ul class="item">
<li><img src="../../image/layout_image/new_05.jpg"/></li>
<li class="subject">맞춤 제작</li>
<li class="comment">원하시는 사이즈로 제작 가능</li>
<li class="price">20,000 원</li>
</ul>
<ul class="item">
<li><img src="../../image/layout_image/new_06.jpg"/></li>
<li class="subject">맞춤 제작</li>
<li class="comment">원하시는 사이즈로 제작 가능</li>
<li class="price">20,000 원</li>
</ul>
</div>
</body>
</html>04_layout.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
#wrap {
width: 800px;
margin: 0 auto; /* 박스의 중앙에 배치 */
border: 1px solid black;
}
#header, #sidebar, #section, #footer {
font-size: 20px;
text-align: center;
padding-top: 30px;
}
#header {
height: 60px;
background-color: #dddddd;
}
#sidebar {
width: 200px;
height: 300px;
float: left;
background-color: orange;
}
#section {
width: 600px;
height: 300px;
float: right;
background-color: skyblue;
}
#footer {
clear: both;
height: 60px;
background-color: green;
}
</style>
</head>
<body>
<div id="wrap">
<h2>div 요소를 이용한 레이아웃</h2>
<div id="header">
상단 헤더
</div>
<div id="sidebar">
사이드바
</div>
<div id="section">
메인 섹션
</div>
<div id="footer">
하단 푸터
</div>
</div><!-- wrap-->
</body>
</html>05_page-layout.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
#wrap {
width: 800px;
margin: 0 auto; /* 박스의 중앙에 배치 */
border: 1px solid black;
}
header, aside, section, footer {
font-size: 20px;
text-align: center;
padding-top: 30px;
}
header {
height: 60px;
background-color: #dddddd;
}
aside {
width: 200px;
height: 300px;
float: left;
background-color: orange;
}
section {
width: 600px;
height: 300px;
float: right;
background-color: skyblue;
}
footer {
clear: both;
height: 60px;
background-color: green;
}
</style>
</head>
<body>
<div id="wrap">
<h2>시멘틱 레이아웃</h2>
<header>
상단 헤더 (< header > 태크)
</header>
<aside>
사이드바 <br>(< aside > 태크)
</aside>
<section>
메인 섹션 (< section > 태크)
</section>
<footer>
하단 푸터 (< footer > 태크)
</footer>
</div><!-- wrap-->
</body>
</html>06_page-layout.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>12-06_page-layout</title>
<style type="text/css">
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: "돋움", sans-serif;
color: dimgray;
background-color: #f2f0f0;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
.clear::after {
content: "";
display: block;
clear: both;
}
/* header_wrap */
#header_wrap {
width: 100%;
margin-top: 60px;
}
header {
border: 1px solid red;
position: fixed;
top: 0;
width: 100%;
height: 60px;
z-index: 1000;
background-color: #f2f0f0;
}
header .logo {
display: inline-block;
margin: 10px 0 10px 20px;
}
header nav {
float: right;
}
header nav .nav_items > li {
display: inline-block;
}
header nav .nav_items > li > a {
padding: 50px;
line-height: 50px;
color: rgba(0,0,0,0.5);
}
header nav .nav_items > li > a:hover {
font-weight: bold;
color: rgba(0,0,0,0.9);
}
/* aside */
aside {
border: 1px solid green;
position: fixed;
top: 60px;
bottom: 0;
width: 200px;
background-color: #777777;
}
aside h2 {
color: white;
padding: 10px 0 10px 20px;
}
aside ul {
width: 200px;
}
aside ul > li > a {
display: block;
color: white;
padding: 10px 0 10px 20px;
}
aside ul > li > a:hover {
background-color: silver;
}
/* section */
section {
border: 1px solid blue;
float: right;
width: 80%;
margin-left: 200px;
}
article {
margin: 10px;
padding: 30px;
background-color: white;
}
/* footer */
footer {
border: 1px solid brown;
position: absolute;
width: 100%;
height: 120px;
background-color: #f2f0f0;
text-align: center;
padding-top: 20px;
}
</style>
</head>
<body>
<div id="header_wrap">
<header>
<a class="logo" href="#">
<img src="../../image/layout_image/logo.gif"/>
</a>
<nav>
<ul class="nav_items">
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Content</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
</header>
</div>
<!-- // header_wrap -->
<div class="clear"></div>
<div id="content_wrap">
<aside>
<h2>aside</h2>
<ul>
<li><a href="#">menu-1</a></li>
<li><a href="#">menu-2</a></li>
<li><a href="#">menu-3</a></li>
<li><a href="#">menu-4</a></li>
</ul>
</aside> <!-- // aside -->
<section>
<article id="menu_1">
<h2>menu-1</h2>
<p>menu-1 content</p>
<p>menu-1 content</p>
<p>menu-1 content</p>
<p>menu-1 content</p>
<p>menu-1 content</p>
</article>
<article id="menu_2">
<h2>menu-2</h2>
<p>menu-2 content</p>
<p>menu-2 content</p>
<p>menu-2 content</p>
<p>menu-2 content</p>
<p>menu-2 content</p>
</article>
<article id="menu_3">
<h2>menu-3</h2>
<p>menu-3 content</p>
<p>menu-3 content</p>
<p>menu-3 content</p>
<p>menu-3 content</p>
<p>menu-3 content</p>
</article>
<article id="menu_4">
<h2>menu-4</h2>
<p>menu-4 content</p>
<p>menu-4 content</p>
<p>menu-4 content</p>
<p>menu-4 content</p>
<p>menu-4 content</p>
</article>
</section> <!-- // section -->
</div>
<!-- // content_wrap -->
<div class="clear"></div>
<div id="footer_wrap">
<footer>
Copyright © 2023;
</footer>
</div>
<!-- // footer_wrap -->
</body>
</html>07_Quiz_layout.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "돋움", sans-serif;
width: 1000px;
margin: 0 auto;
color: black;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
.clear::after {
content: "";
display: block;
clear: both;
}
header {
position: fixed;
top: 0;
width: 100%;
height: 60px;
z-index: 1000;
background-color: pink;
text-align: center;
}
header h1 {
padding: 10px;
}
aside {
position: fixed;
float: left;
top: 60px;
bottom: 0;
width: 200px;
background-color: orange;
}
aside h1 {
padding: 20px;
}
aside ul {
margin-left: 50px;
margin-bottom: 20px;
}
aside figure {
margin-left: 50px;
}
section {
padding-top: 30px;
height: 300px;
float: right;
background-color: yellow;
}
article {
margin: 10px;
padding: 30px;
}
footer {
padding-top: 30px;
clear: both;
position: absolute;
width: 100%;
height: 120px;
background-color: brown;
text-align: center;
padding-top: 20px;
}
</style>
</head>
<body>
<header>
<h1>My Blog Page</h1>
</header>
<aside>
<nav>
<h1>Links</h1>
<ul>
<li><a href="#">W3C</a></li>
<li><a href="#">MOZILLA</a></li>
<li><a href="#">HTML Dogs</a></li>
</ul>
<figure>
<img src="http://via.placeholder.com/85x85"/>
<figcaption>image</figcaption>
</figure>
</nav>
</aside>
<div class="clear"></div>
<section>
<article>
<h1>Semantic Tags</h1>
<p>시멘틱 요소(Semantic elements)들은 브라우저에게 요소의 의미나 목적을 명확하게 알려주는 요소이다</p>
</article>
<article>
<h1>Semantic Tags</h1>
<p>시멘틱 요소(Semantic elements)들은 브라우저에게 요소의 의미나 목적을 명확하게 알려주는 요소이다</p>
</article>
</section>
<div class="clear"></div>
<footer>
Copyright © 2023 Test
</footer>
</body>
</html>07_Quiz_layoutT.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-family: "돋움", sans-serif;
width: 1000px;
margin: 0 auto;
color: black;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
header {
background: pink;
width: 100%;
text-align: center;
padding: 30px 0;
}
nav {
display: table-cell;
background-color: gold;
width: 24%;
padding: 20px;
}
nav > h1 {
margin-bottom: 20px;
}
nav > ul > li {
text-indent: 50px;
}
nav > ul > li > a {
line-height: 30px;
}
nav > figure {
margin: 20px 0 0 50px;
}
section {
display: table-cell;
width: 100%;
height: 500px;
background-color: yellow;
padding : 20px;
}
article > h1 {
margin-bottom: 20px;
}
article > p {
margin-bottom: 20px;
}
footer {
background-color: brown;
color: white;
text-align: center;
padding: 30px 0;
}
</style>
</head>
<body>
<header>
<h1>My Blog Page</h1>
</header>
<nav>
<h1>Links</h1>
<ul>
<li><a href="#">W3C</a></li>
<li><a href="#">MOZILLA</a></li>
<li><a href="#">HTML Dogs</a></li>
</ul>
<figure>
<img src="http://via.placeholder.com/85x85"/>
<figcaption>image</figcaption>
</figure>
</nav>
<section>
<article>
<h1>Semantic Tags</h1>
<p>시멘틱 요소(Semantic elements)들은 브라우저에게 요소의 의미나 목적을 명확하게 알려주는 요소이다</p>
</article>
<article>
<h1>Semantic Tags</h1>
<p>시멘틱 요소(Semantic elements)들은 브라우저에게 요소의 의미나 목적을 명확하게 알려주는 요소이다</p>
</article>
</section>
<footer>
Copyright © 2023 Test
</footer>
</body>
</html>
Fintech