1) float_ex.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* { padding: 0; margin: 0; box-sizing: border-box;}
a { text-decoration: none;color: inherit;}
li { list-style: none;}
#wrap {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
#header {
padding: 30px 0;
}
#header h1 {
float: left;
}
#header ul {
float: right;
padding-top: 8px;
}
#header li {
float: left;
padding: 0 20px;
line-height: 0.6;
}
#header li:not(:last-child) {
border-right: 1px solid #ccc;
}
.clearboth::after /* after사용하여 한번에 clear주기 */
{
content: "";
display: block;
clear: both;
}
#main h2 {
text-align: center;
padding: 30px;
border-bottom: 1px solid #333;
margin-bottom: 30px;
}
#content li {
float: left;
padding: 30px;
text-align: center;
border: 1px solid #ccc;
width: 30%;
}
#content li:not(:last-of-type) {
margin-right: 5%;
}
#notice li {
line-height: 40px;
border-bottom: 1px solid #ccc;
}
#footer {
padding: 30px 0;
}
#footer p {
float: left;
width: 70%;
}
#footer h1 {
float: right;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header" class="clearboth"> <!-- float을 준 요소의 부모 요소에 class지정 -->
<h1><a href="#">Green</a></h1>
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
</ul>
<!-- <p class="clearboth"></p> -->
</div>
<div id="main">
<div id="content">
<h2>메인 컨텐츠01</h2>
<ul class="clearboth"> <!-- float을 준 요소의 부모 요소에 class지정 -->
<li>
<h3>작은제목 입니다.</h3>
<p>내용적는 부분입니다.</p>
<span>2020.12.17</span>
</li>
<li>
<h3>작은제목 입니다.</h3>
<p>내용적는 부분입니다.</p>
<span>2020.12.17</span>
</li>
<li>
<h3>작은제목 입니다.</h3>
<p>내용적는 부분입니다.</p>
<span>2020.12.17</span>
</li>
<!-- <p class="clearboth"></p> -->
</ul>
</div>
<div id="notice">
<h2>공지사항</h2>
<ul>
<li>그린 컴퓨터 아카데미 소식<span>2020.12.17</span></li>
<li>코로나 바이러스 예방법<span>2020.12.17</span></li>
<li>그린 컴퓨터 아카데미 소식<span>2020.12.17</span></li>
<li>코로나 바이러스 예방법<span>2020.12.17</span></li>
</ul>
</div>
</div>
<div id="footer" class="clearboth"> <!-- float을 준 요소의 부모 요소에 class지정 -->
<p>주소 : 서울특별시 용산구 한강대로 대표이사: 그린 사업자 등록번호 : 110-12-12345 통신판매 신고: 제 2020-서울용산-000호</p>
<h1>Green</h1>
<!-- <p class="clearboth"></p> -->
</div>
</div>
</body>
</html>
2) header.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
* { margin: 0; padding: 0; box-sizing: border-box;}
li { list-style: none;}
a { text-decoration: none; color: inherit;}
#warp {
width: 1200px;
margin: 0 auto;
}
#header {
text-align: center; /* 인라인의 부모요소에 지정 */
padding: 30px 0;
}
#header h1 {
float: left;
}
#header #gnbmenu {
float: right;
}
#header #gnbmenu li {
float: left;
padding: 0 10px;
}
#header #menu {
display: inline-block;
}
#header #menu li {
float: left;
padding: 0 20px;
}
.clearboth::after { /* float의 부모요소에 지정 */
content: "";
display: block;
clear: both;
}
li .material-icons {
font-size: 40px;
color: red;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header" class="clearboth">
<h1><a href="#"><img src="images/logo.png" alt="씨큐아이"></a></h1>
<ul id="menu">
<li><a href="#"><i class="material-icons">cloud</i>menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
<li><a href="#">menu5</a></li>
</ul>
<ul id="gnbmenu">
<li><a href="#"><img src="images/language_icon.png" alt="언어선택아이콘"></a></li>
<li><a href="#"><img src="images/search_icon.png" alt="검색아이콘"></a></li>
<li><a href="#"><img src="images/sitemap_icon.png" alt="사이트맵아이콘"></a></li>
</ul>
</div>
</div>
</body>
</html>
3) isaknox.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
* { padding: 0; margin: 0; box-sizing: border-box;}
a { text-decoration: none; color: inherit;}
li { list-style: none;}
#wrap {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.clearboth::after {
content: "";
display: block;
clear: both;
}
li .material-icons {
color: #fff;
}
.left_logo li {
margin-right: 20px;
}
.right_logo li {
color: #fff;
margin-left: 10px;
}
#header {
padding: 30px 20px;
text-align: center;
background: #000;
background-image: url('visual.gif');
}
#header h1 {
display: inline-block;
}
#header .left_logo {
float: left;
}
#header .left_logo li {
float: left;
}
#header .right_logo {
float: right;
}
#header .right_logo li {
float: left;
}
#content_1 {
text-align: center;
}
#content_2_1 {
padding: 20px 0;
border-bottom: 1px solid #ccc;
}
#content_2_1 h2 {
float: left;
}
#content_2_1 ul {
float: right;
padding-top: 10px;
}
#content_2_1 li {
float: left;
}
#content_2_1 li:not(:last-child) {
margin-right: 50px;
}
#content_2_2 {
padding-bottom: 30px;
}
#content_2_2 h2 {
text-align: center;
padding: 30px;
}
#content_2_2 li {
float: left;
text-align: center;
width: 23%;
}
#content_2_2 li:not(:last-child) {
margin-right: 2.22%;
}
#group1 {
float: left;
}
#group2 {
float: right;
}
#group3 {
float: right;
}
#footer_1 {
text-align: center;
background: #f0f8ff;
padding: 20px 20px;
}
#footer_1 h3 {
float: left;
}
#foot_center {
display: inline-block;
text-align: center;
line-height: 40px;
}
#foot_center li:not(:last-child) {
margin-right: 50px;
}
#foot_center li {
float: left;
}
#footer #site {
float: right;
font-size: 15px;
padding: 5px 0 ;
margin-top: 5px;
}
#footer_2 {
padding: 10px 10px;
}
#footer_2 p {
float: left;
width: 80%;
}
#footer_2 h3 {
float: right;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header" class="clearboth">
<!-- <h1><img src="./images/images (4)/top_logo.gif" alt=""></h1> -->
<ul class="left_logo">
<li><a href="#"><i class="material-icons">mood</i></a></li>
<li><a href="#"><i class="material-icons">mood</i></a></li>
<li><a href="#"><i class="material-icons">mood</i></a></li>
</ul>
<ul class="right_logo">
<li><a href="#"></a>Login<i class="material-icons">keyboard_arrow_right</i></li>
<li><a href="#"></a>Join<i class="material-icons">keyboard_arrow_right</i></li>
</ul>
</div>
<div id="main">
<div id="content_1">
<h2><img src="./images/images (4)/visual.gif" alt=""></h2>
</div>
<div id="content_2">
<div id="content_2_1" class="clearboth">
<h2><img src="./images/images (4)/so_title.gif" alt=""></h2>
<ul>
<li><a href="#">Brand</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Store</a></li>
<li><a href="#">Customer Center</a></li>
</ul>
</div>
<div id="content_2_2" class="clearboth">
<h2>NEW PRODUCT</h2>
<ul>
<li>
<h3>
<img src="./images/images (4)/product01.gif" alt="">
</h3>
<p>X2D2<br>링클 포커스 세럼<br>wrinkle focus serum</p>
</li>
<li>
<h3>
<img src="./images/images (4)/product02.gif" alt="">
</h3>
<p>X2D2<br>링클 포커스 세럼<br>wrinkle focus serum</p>
</li>
<li>
<h3>
<img src="./images/images (4)/product03.gif" alt="">
</h3>
<p>X2D2<br>링클 포커스 세럼<br>wrinkle focus serum</p>
</li>
<li>
<h3>
<img src="./images/images (4)/product04.gif" alt="">
</h3>
<p>X2D2<br>링클 포커스 세럼<br>wrinkle focus serum</p>
</li>
</ul>
</div>
</div>
<div id="content_3" class="clearboth">
<div id="group1">
<img src="./images/images (4)/main_banner01.gif" alt="">
</div>
<div id="goup2and3">
<div id="group2">
<img src="./images/images (4)/main_banner02.gif" alt="">
</div>
<div id="group3">
<img src="./images/images (4)/main_banner03.gif" alt="">
<img src="./images/images (4)/main_banner04.gif" alt="">
</div>
</div>
</div>
</div>
<div id="footer">
<div id="footer_1" class="clearboth">
<h3><a href="#"><img src="./images/images (4)/f_icon.gif" alt=""></a></h3>
<ul id="foot_center">
<li><a href="#">Contact us</a></li>
<li><a href="#">이용약관</a></li>
<li><a href="#">개인정보 취급방침</a></li>
</ul>
<select name="site" id="site">
<option value="site1">famillysite</option>
<option value="site2">관련사이트1</option>
<option value="site3">관련사이트2</option>
</select>
</div>
<div id="footer_2" class="clearboth">
<p>(주)LG생활건강 / 서울틀별시 종로구 세문안로 58 LG광화문빌딩 110-783 대표이사 차석용 / 고객상담실 080-023-7007 / 사업자등록번호 107-81-98143 COPYRIGHT & LG HOUSEHOLD HEALTH CARE LTD. 2015 ALL RIGHT RESERVED.</p>
<h3><img src="./images/images (4)/bottom_logo.gif" alt=""></h3>
</div>
</div>
</div>
</body>
</html>
4)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
* { margin: 0; padding: 0;box-sizing: border-box;}
a { text-decoration: none; color: inherit;}
li { list-style: none;}
body { color: #2d2d2d; line-height: 1.6; font-size: 14px;}
.inner_wrap {
width: 1100px;
margin: 0 auto;
}
#header {
height: 80px;
color: #fff;
background: #000;
text-align: center;
line-height: 80px;
}
.clearBoth::after {
content: "";
display: block;
clear: both;
}
img {
vertical-align: top;
}
#header * {
vertical-align: middle;
}
#header img {
vertical-align: top;
}
#header ul:nth-child(1) {
float: left;
}
#header h1 {
display: inline-block;
padding-top: 20px;
}
#header ul:nth-child(3) {
float: right;
}
#header ul li {
float: left;
padding: 0 16px;
}
#visual {
background: #000;
}
#visual img { /* img를 딱 맞게 키우기 */
width: 100%;
}
#quickmenu {
border-bottom: 3px double #333;
padding: 20px 0;
}
#quickmenu h2 { float: left;}
#quickmenu ul { float: right; padding-top: 10px;}
#quickmenu ul li { float: left; padding: 0 20px;}
#newproduct {
text-align: center;
padding-bottom: 30px;
}
#newproduct h2 {
padding: 20px;
}
#newproduct li {
float: left;
width: 25%;
}
#newproduct img {
width: 100%;
}
#banner div {
float: left;
}
#banner div:nth-child(1) {
width: 50%;
}
#banner div:nth-child(2) {
width: 50%;
}
#banner div:nth-child(3) {
width: 25%;
}
#banner div:nth-child(4) {
width: 25%;
}
#banner img { /* img를 딱 맞게 키우기 */
width: 100%;
}
#footer {
padding-top: 30px;
}
#footer div:nth-child(1) {
background: lightcyan;
border-radius: 8px;
padding: 16px;
text-align: center;
}
#footer div:nth-child(1) a {
float: left;
}
#footer div:nth-child(1) ul {
display: inline-block;
}
#footer div:nth-child(1) ul li {
float: left;
padding: 0 16px;
}
#footer div:nth-child(1) select {
float: right;
}
#footer div:nth-child(2) p {
float: left;
width: 70%;
}
#footer div:nth-child(2) h1 {
float: right;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<div class="inner_wrap">
<ul>
<li><a href="#"><i class="material-icons">dehaze</i></a></li>
<li><a href="#"><i class="material-icons">search</i></a></li>
<li><a href="#"><i class="material-icons">home</i></a></li>
</ul>
<h1><img src="./images/images (4)/top_logo.gif" alt=""></h1>
<ul>
<li><a href="#">Login<i class="material-icons">chevron_right</i></a></li>
<li><a href="#">Join<i class="material-icons">chevron_right</i></a></li>
</ul>
</div>
</div>
<div id="container">
<div id="visual">
<div class="inner_wrap">
<img src="./images/images (4)/visual.gif" alt="">
</div>
</div>
<div id="product" class="inner_wrap">
<div id="quickmenu" class="clearBoth">
<h2><img src="./images/images (4)/so_title.gif" alt="isaknox"></h2>
<ul>
<li><a href="#">Brand</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Store</a></li>
<li><a href="#">Customer Center</a></li>
</ul>
</div>
<div id="newproduct">
<h2>NEW PRODUCT</h2>
<ul class="clearBoth">
<li>
<img src="./images/images (4)/product01.gif" alt="">
<h3>X2D2</h3>
<p>링클 포커스 세럼</p>
wrinkle focus serum
</li>
<li>
<img src="./images/images (4)/product02.gif" alt="">
<h3>X2D2</h3>
<p>링클 포커스 세럼</p>
wrinkle focus serum
</li>
<li>
<img src="./images/images (4)/product03.gif" alt="">
<h3>X2D2</h3>
<p>링클 포커스 세럼</p>
wrinkle focus serum
</li>
<li>
<img src="./images/images (4)/product04.gif" alt="">
<h3>X2D2</h3>
<p>링클 포커스 세럼</p>
wrinkle focus serum
</li>
</ul>
</div>
</div>
<div id="banner" class="inner_wrap clearBoth"> <!-- class 속성 2개 주기 -->
<div><img src="./images/images (4)/main_banner01.gif" alt=""></div>
<div><img src="./images/images (4)/main_banner02.gif" alt=""></div>
<div><img src="./images/images (4)/main_banner03.gif" alt=""></div>
<div><img src="./images/images (4)/main_banner04.gif" alt=""></div>
</div>
</div>
<div id="footer" class="inner_wrap">
<div class="clearBoth">
<a href="#"><img src="./images/images (4)/f_icon.gif" alt="페이스북아이콘"></a>
<ul>
<li><a href="#">Contact us</a></li>
<li><a href="#">이용약관</a></li>
<li><a href="#">개인정보 취급방침</a></li>
</ul>
<select name="" id="">
<option value="site1">family site1</option>
<option value="site2">family site2</option>
<option value="site3">family site3</option>
</select>
</div>
<div class="clearBoth">
<p>(주)LG생활건강 / 서울틀별시 종로구 세문안로 58 LG광화문빌딩 110-783 대표이사 차석용 / 고객상담실 080-023-7007 / 사업자등록번호 107-81-98143 COPYRIGHT & LG HOUSEHOLD HEALTH CARE LTD. 2015 ALL RIGHT RESERVED.</p>
<h1><img src="./images/images (4)/bottom_logo.gif" alt="LG생활건강"></h1>
</div>
</div>
</div>
</body>
</html>
'노력이 좋아서' 카테고리의 다른 글
| <step17>'css_hover' (0) | 2022.04.12 |
|---|---|
| <step17>'css_실습' (0) | 2022.04.11 |
| <step15>'css_background, float' (0) | 2022.04.08 |
| <step15>'markup에 css적용' (0) | 2022.04.08 |
| <step14>'css_boxsize, select_link' (0) | 2022.04.07 |