Stack/CSS
[CSS / SCSS] SCSS로 Style 지정하기 (Isaknox)
7ingout
2022. 4. 19. 10:18
style.scss
* { margin: 0; padding: 0; box-sizing: border-box; vertical-align: middle; }
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(); /* 원하는 값 주면 그 값으로, 안주면 1200px로 */
}
#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;
}
}
}
index.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">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="wrap">
<div id="header">
<div class="inner_wrap">
<ul>
<li><a href="#"><i class="material-icons">menu</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/top_logo.gif" alt="isaknox"></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/visual.gif" alt="">
</div>
</div>
<div id="product" class="inner_wrap">
<div id="quickmenu" class="clearBoth">
<h2><img src="./images/so_title.gif" alt="isaknox"></h2>
<ul>
<li><a href="#">Brands</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/product01.gif" alt="">
<h3>X2D2</h3>
<p>링클 포커스 세럼 wrinkle</p>
<span>focus serum</span>
</li>
<li>
<img src="./images/product02.gif" alt="">
<h3>X2D2</h3>
<p>링클 포커스 세럼 wrinkle</p>
<span>focus serum</span>
</li>
<li>
<img src="./images/product03.gif" alt="">
<h3>X2D2</h3>
<p>링클 포커스 세럼 wrinkle</p>
<span>focus serum</span>
</li>
<li>
<img src="./images/product04.gif" alt="">
<h3>X2D2</h3>
<p>링클 포커스 세럼 wrinkle</p>
<span>focus serum</span>
</li>
</ul>
</div>
</div>
<div id="banner" class="inner_wrap clearBoth"> <!-- class 안에 값으로 적기 -->
<div><img src="./images/main_banner01.gif" alt=""></div>
<div><img src="./images/main_banner02.gif" alt=""></div>
<div><img src="./images/main_banner03.gif" alt=""></div>
<div><img src="./images/main_banner04.gif" alt=""></div>
</div>
</div>
<div id="footer" class="inner_wrap">
<div>
<a href="#"><img src="./images/f_icon.gif" alt="페이스북아이콘"></a>
<ul class="clearBoth">
<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="site1">family site2</option>
</select>
</div>
<div>
<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/bottom_logo.gif" alt="LG생활건강"></h1>
</div>
</div>
</div>
</body>
</html>