1) 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">
<link rel="stylesheet" href="../css/isaknox.css">
<style>
</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>2) isaknox.scss
* { margin: 0; padding: 0; box-sizing: border-box;}
li { list-style: none;}
a { text-decoration: none; color: inherit;}
$black_bg: #000;
$white-color: #fff;
@mixin default-width($wid: 1200px) {
width: 100%;
max-width: $wid;
margin: 0 auto;
}
@mixin flexlayout($dir: row, $wrap: nowrap, $just: space-between, $align: center) {
display: flex;
flex-direction: $dir;
flex-wrap: $wrap;
justify-content: $just;
align-items: $align;
}
#header {
background: $black_bg;
color: $white-color;
div {
height: 80px;
@include flexlayout();
ul {
@include flexlayout();
&:nth-child(1) li {
padding: 0 16px;
}
&:nth-child(3) li {
padding: 0 8px;
}
}
}
}
.inner_wrap {
@include default-width();
}
#visual {
background: $black_bg;
img {
width: 100%;
}
}
#product {
#quickmenu {
@include flexlayout();
height: 120px;
border-bottom: 3px double #ccc;
ul {
@include flexlayout();
li {
padding: 0 16px;
}
}
}
#newproduct {
text-align: center;
h2 {
padding: 24px;
}
ul {
@include flexlayout();
li {
width: 25%;
}
}
padding-bottom: 50px;
}
}
.clearBoth {
&::after {
content: "";
display: block;
clear: both;
}
}
#banner {
div {
float: left;
&:nth-child(1) {
width: 50%;
}
&:nth-child(2) {
width: 50%;
}
&:nth-child(3) {
width: 25%;
}
&:nth-child(4) {
width: 25%;
}
img {
width: 100%;
}
}
}
#footer {
div {
@include flexlayout();
&:nth-child(1) {
background: lightblue;
border-radius: 4px;
margin-top: 24px;
padding: 16px;
ul {
@include flexlayout();
li {
padding: 0 16px;
}
}
}
&:nth-child(2) {
padding: 16px 0;
}
}
}
'노력이 좋아서' 카테고리의 다른 글
| <step22>'scss_삼성생명 홈페이지 따라하기' (0) | 2022.04.19 |
|---|---|
| <step22>'scss_연습하기' (0) | 2022.04.19 |
| <step21>'scss_기초' (0) | 2022.04.18 |
| <step21>'css_nots 홈페이지 따라하기' (0) | 2022.04.18 |
| <step21>'css_갤럭시 홈페이지 따라하기' (0) | 2022.04.18 |