1) 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="/css/reset.css">
<link rel="stylesheet" href="/s25/css/style_teach.css">
</head>
<body>
<div id="wrap">
<!-- 라인영역 -->
<div id="line">
<div class="line_l"></div>
<div class="line_r"></div>
<div class="line_b"></div>
<div class="line_t"></div>
</div>
<!-- 상단영역 -->
<div id="header">
<div id="header_inner">
<h1>
<a href="#"><img src="./images/logo.png" alt="고운세상"></a>
</h1>
<div id="menu">
<ul>
<li><a href="#">About Us</a>
<ul>
<li><a href="#">기업소개</a></li>
<li><a href="#">연혁</a></li>
<li><a href="#">CEO 메시지</a></li>
<li><a href="#">고운세상</a></li>
<li><a href="#">글로벌 네트워크</a></li>
</ul>
</li>
<li><a href="#">Brands</a>
<ul>
<li><a href="#">Dr.G</a></li>
<li><a href="#">스킨 솔루션</a></li>
</ul>
</li>
<li><a href="#">Sustainability</a>
<ul>
<li><a href="#">고운실천</a></li>
<li><a href="#">윤리경영</a></li>
</ul>
</li>
<li><a href="#">News</a>
<ul>
<li><a href="#">고운이야기</a></li>
<li><a href="#">공지사항</a></li>
</ul>
</li>
<li><a href="#">Careers</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div>
<!-- 검색영역 -->
<div>
<div><img src="./images/gnb-search.png" alt="돋보기검색아이콘"></div>
<div id="search">
<div><input type="text"></div>
<div class="bg_lightgray"><a href="#">닫기</a></div>
</div>
</div>
<!-- 검색영역 //-->
<!-- 언어선택 -->
<div>
<div>KO</div>
<div id="language">
<ul>
<li class="active">KO</li>
<li>EN</li>
</ul>
</div>
</div>
<!-- 언어선택 //-->
</div>
</div>
</div>
</div>
<!-- 상단영역 / -->
<!-- 본문영역 -->
<div id="container">
<!-- 메인 비쥬얼영역 -->
<div id="visual">
<!-- 왼쪽sns -->
<div class="leftsns">
<ul>
<li><a href="#"><img src="./images/gnb-sns04-1.png" alt="블로그바로가기"></a></li>
<li><a href="#"><img src="./images/gnb-sns01-1.png" alt="블로그바로가기"></a></li>
<li><a href="#"><img src="./images/gnb-sns02-1.png" alt="블로그바로가기"></a></li>
<li><a href="#"><img src="./images/gnb-sns03-1.png" alt="블로그바로가기"></a></li>
</ul>
<div>
<a href="#"><img src="./images/go-btn.png" alt=""></a>
</div>
</div>
<!-- 왼쪽sns //-->
<!-- 비쥬얼 -->
<div class="visualdiv">
<!-- 이미지 -->
<div class="imgdiv">
<img src="./images/visual.jpg" alt="">
</div>
<!-- 이미지 //-->
<!-- 텍스트 -->
<div class="textdiv">
<p><span>01</span>Gowoonsesang Cosmetics</p>
<h2>누구나 피부를 건강하게</h2>
<p>우리는 피부 과학으로 세상을 더 건강하고 아름답게 만들고 있습니다.</p>
</div>
<!-- 텍스트 //-->
</div>
<!-- 비쥬얼 // -->
</div>
<!-- 메인 비쥬얼영역 //-->
<!-- 메인 두번째 영역 -->
<div id="mainMentor">
<div class="mentor inner_wrap">
<div class="imgdiv">
<div><img src="./images/ecb97805-9900-42c6-86f6-ebb227b0521e.jpg" alt="사람"></div>
<div class="blackarr">
<a href="#"><img src="./images/more-btn.jpg" alt=""></a>
</div>
</div>
<div class="textdiv">
<p><span>02</span>Gowoonsesang Cosmetics</p>
<h2>함께 성장하는 고운세상</h2>
<p>고운세상코스메틱은 누구나 건강한 피부로 행복한 삶을 누리는 세상을 꿈꿉니다.
이러한 뜻을 함께하는 사람들이 모여 도전과 성장, 소통과 협력으로
고운세상의 아름다운 문화를 만들어 갑니다.
임직원 모두가 ‘피부과학 전문가’로 활동하며, 함께 ‘성장하는 고운세상’을 그려가고 있습니다.</p>
</div>
</div>
<div class="textbg"><img src="./images/main-mentor-bg.png" alt="mentor"></div>
</div>
<!-- 메인 두번째 영역 // -->
<!-- 메인뉴스 영역 -->
<div id="mainNews">
<div class="textdiv">
<p><span>03</span>Gowoonsesang Cosmetics</p>
<h2>고운세상 이야기</h2>
<div>
<a href="#">
View more <span><img src="./images/more-btn.jpg" alt=""></span>
</a>
</div>
</div>
<div class="list">
<ul>
<li>
<a href="#">
<div class="listimg">
<img src="./images/2f7e9856-bfc9-47af-9713-d6c26de4.jpg" alt="">
</div>
<div class="listtext">
<span>2022-03-02</span>
<h3>고운세상코스메틱, 화상 환우 지원 ‘피부건강 나눔 챌린지’ 성료</h3>
<span class="viewMore">view more</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="listimg">
<img src="./images/2f7e9856-bfc9-47af-9713-d6c26de4.jpg" alt="">
</div>
<div class="listtext">
<span>2022-03-02</span>
<h3>고운세상코스메틱, 화상 환우 지원 ‘피부건강 나눔 챌린지’ 성료</h3>
<span class="viewMore">view more</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="listimg">
<img src="./images/2f7e9856-bfc9-47af-9713-d6c26de4.jpg" alt="">
</div>
<div class="listtext">
<span>2022-03-02</span>
<h3>고운세상코스메틱, 화상 환우 지원 ‘피부건강 나눔 챌린지’ 성료</h3>
<span class="viewMore">view more</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="listimg">
<img src="./images/2f7e9856-bfc9-47af-9713-d6c26de4.jpg" alt="">
</div>
<div class="listtext">
<span>2022-03-02</span>
<h3>고운세상코스메틱, 화상 환우 지원 ‘피부건강 나눔 챌린지’ 성료</h3>
<span class="viewMore">view more</span>
</div>
</a>
</li>
</ul>
</div>
</div>
<!-- 메인뉴스 영역 //-->
<!-- 메인 사회공헌 영역 -->
<div id="mainContri">
<div class="textdiv">
<div>
<p><span>04</span>Gowoonsesang Cosmetics</p>
<h2>고운세상 사회공헌</h2>
</div>
<div>
<a href="#">
View more <span><img src="./images/more-btn.jpg" alt=""></span>
</a>
</div>
</div>
<ul class="list">
<li>
<div><img src="./images/2cb52cb7-5bfc-4d8b-acc2-240e4e31445a.jpg" alt=""></div>
<div>
<h3>점자 표기</h3>
<p>닥터지는 누구나 원하는 제품을 선택하고 소비자의 권리를 누릴 자격이 있다고 생각합니다. 시각 장애인 고객의 제품 사용 어려움을 개선하고자 2012년부터 단상자에 제품 유형을 점자로 표기하고 있습니다.</p>
</div>
</li>
<li>
<div><img src="./images/2f07d310-765d-4616-92e4-f0cd14f91d6a.jpg" alt=""></div>
<div>
<h3>점자 표기</h3>
<p>닥터지는 누구나 원하는 제품을 선택하고 소비자의 권리를 누릴 자격이 있다고 생각합니다. 시각 장애인 고객의 제품 사용 어려움을 개선하고자 2012년부터 단상자에 제품 유형을 점자로 표기하고 있습니다.</p>
</div>
</li>
<li>
<div><img src="./images/8cc0e539-6e76-441b-966c-8ee405e2b782.jpg" alt=""></div>
<div>
<h3>점자 표기</h3>
<p>닥터지는 누구나 원하는 제품을 선택하고 소비자의 권리를 누릴 자격이 있다고 생각합니다. 시각 장애인 고객의 제품 사용 어려움을 개선하고자 2012년부터 단상자에 제품 유형을 점자로 표기하고 있습니다.</p>
</div>
</li>
</ul>
</div>
<!-- 메인 사회공헌 영역 //-->
</div>
<!-- 본문영역 / -->
<!-- 하단영역 -->
<div id="footer">
<div class="footer_menu">
<div class="site">
<div>
<a href="#"><img src="./images/footer-logo01.png" alt="gowoonsesang"></a>
<a href="#"><img src="./images/footer-logo02.png" alt="고운세상"></a>
</div>
<a href="#">Go to Dr.G Site</a>
</div>
<div class="address">
<p>
<span>(주) 고운세상 코스메틱</span>
<span>대표이상:이주호</span>
<span>주소:경기도 성남시 분당구 분당 로55 퍼스트타워 11F</span>
<span>대표전화: 031-724-9000</span>
</p>
<a href="#">개인정보처리방침</a>
</div>
</div>
<div class="copyright">
<p>COPYRIGHT 2022. GOWOONSESANG COSMETICS CO.,LTD.</p>
<a href="#"><img src="./images/top-icon.png" alt="페이지 위로"></a>
</div>
</div>
<!-- 하단영역 /-->
</div>
</body>
</html>2) scss
$fontsize: 14px;
$padding: 16px;
$fontcolor:#2d2d2d;
$mint: #1cd8b6;
@mixin flexlayout ($d:row, $w:nowrap, $j:space-between, $a:center) {
display: flex;
flex-flow: $d $w;
justify-content: $j;
align-items: $a;
}
@mixin fontstyle ($f:90px) {
p {
font-size: 20px;
&:nth-child(1) {
font-size: 16px;
span {
padding-right: 20px;
&::after {
content: "";
display: inline-block;
width: 200px;
height: 2px;
margin-left: 40px;
background: $fontcolor;
}
}
}
}
h2 {
font-size: $f;
font-weight: bold;
padding-bottom: 50px;
padding-top: 20px;
}
}
body {
width: 100%;
height: 100vh;
font-size: $fontsize;
font-family: '나눔고딕', sans-serif;
color: $fontcolor;
}
#wrap {
width: 100%;
}
// 상단영역
#header {
width: 100%;
padding: 0 75px;
height: 120px;
font-weight: bold;
font-size: $fontsize*1.3;
position: fixed;
z-index: 1;
background: #fff;
> div {
@include flexlayout();
padding-top: 40px;
h1 {
width: 40%;
img {
width: 20%;
}
}
> ul {
@include flexlayout();
// position: relative;
margin-right: 8%;
width: 50%;
> li {
position: relative;
> a {
transition: 0.5s;
}
ul {
@include flexlayout($j: flex-start);
position: absolute;
top: 80px;
// left: -100px;
width: 600px;
> li {
padding: 0 $padding;
}
}
&:nth-child(1) {
ul {
left: -220px;
opacity: 0;
transition: 0.5s;
}
}
&:nth-child(2) {
ul {
left: -70px;
opacity: 0;
transition: 0.5s;
}
}
&:nth-child(3) {
ul {
left: -40px;
opacity: 0;
transition: 0.5s;
}
}
&:nth-child(4) {
ul {
left: -80px;
opacity: 0;
transition: 0.5s;
}
}
&:hover {
> a:nth-child(1) {
color: $mint;
}
&:nth-child(1) {
ul {
opacity: 1;
}
}
&:nth-child(2) {
ul {
opacity: 1;
}
}
&:nth-child(3) {
ul {
opacity: 1;
}
}
&:nth-child(4) {
ul {
opacity: 1;
}
}
&::after {
width: 100%;
}
}
&::after {
content: "";
display: block;
position: absolute;
top: 68px;
width: 0;
transition: 0.5s;
height: 4px;
background: $mint;
}
}
}
> div {
@include flexlayout();
width: 12%;
//검색영역
> div:nth-child(1) {
width: 50%;
> div:nth-child(2) {
position: absolute;
opacity: 0;
}
}
//언어선택
> div:nth-child(2) {
padding-left: 30px;
width: 50%;
position: relative;
&::after {
content: "";
display: block;
position: absolute;
top: 68px;
left: 0;
width: 100%;
transition: 0.5s;
height: 4px;
background: #333;
}
// height: 100px;
ul {
position: absolute;
top: 0;
right: 0;
width: 80px;
height: 80px;
transition: 0.5s;
opacity: 0;
li {
padding: 8px;
padding-left: 25px;
&:nth-child(1) {
color: #fff;
background: $mint;
}
&:nth-child(2) {
color: $fontcolor;
background: #fff;
}
}
}
&:hover {
ul {
top: 65px;
opacity: 1;
}
}
}
}
}
}
// 본문영역
//메인 비쥬얼영역
#visual {
@include flexlayout($j: flex-start);
padding-top: 120px;
> div:nth-child(1) {
width: 4%;
ul {
padding-left: 25px;
position: absolute;
bottom: 80px;
padding-bottom: 20px ;
li {
padding-bottom: 20px;
}
}
div {
background: $fontcolor;
width: 75px;
height: 75px;
padding-top: 30px;
padding-left: 25px;
position: absolute;
bottom: 15px;
}
}
> div:nth-child(2) {
width: 70%;
margin-right: 20%;
position: relative;
> div:nth-child(2) {
position: absolute;
top: 200px;
left: 100px;
width: 100%;
p {
font-size: 20px;
&:nth-child(1) {
font-size: 16px;
span {
padding-right: 20px;
&::after {
content: "";
display: inline-block;
width: 200px;
height: 2px;
margin-left: 40px;
background: $fontcolor;
}
}
}
}
h2 {
font-size: 90px;
font-weight: bold;
padding-bottom: 50px;
padding-top: 20px;
}
}
}
}
#mainMentor {
height: 100vh;
position: relative;
> div:nth-child(1) {
> div:nth-child(1) {
> div:nth-child(1) {
position: absolute;
left: 10%;
top: 20%;
}
> div:nth-child(2) {
position: absolute;
left: 675px;
top: 750px;
width: 65px;
height: 65px;
img {
width: 50%;
}
padding-left: 20px;
padding-top: 20px;
background: #000;
}
}
> div:nth-child(2) {
@include fontstyle($f: 60px);
text-align: center;
width: 40%;
position: absolute;
right: 10%;
top: 35%;
}
}
> div:nth-child(2) {
position: absolute;
right: 5%;
bottom: 15%;
}
}3) scss_teach
$main_color: #65d8b6;
body { font-size: 14px; line-height: 1.6; color: #1d1d1d;}
#wrap {
position: relative;
}
#line {
div {
position: fixed;
background: rgba(0, 0, 0, 0.1);
}
.line_l {
width: 1px;
height: 100%;
left: 82px;
top: 0;
z-index: 2;
}
.line_r {
width: 1px;
height: 100%;
right: 82px;
top: 0;
z-index: 2;
}
.line_t {
width: 100%;
height: 1px;
left: 0;
top: 95px;
z-index: 2;
}
.line_b {
width: 100%;
height: 1px;
left: 0;
bottom: 95px;
display: none;
}
}
@mixin flexlayout ($d:row, $w:nowrap, $j:space-between, $a:center) {
display: flex;
flex-flow: $d $w;
justify-content: $j;
align-items: $a;
}
#header {
padding: 0 82px;
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #fff;
z-index: 1;
#header_inner {
@include flexlayout();
height: 95px;
h1 {
padding-left: 50px;
}
#menu {
@include flexlayout();
> ul {
@include flexlayout();
> li {
padding: 0 16px;
font-size: 18px; //font는 상속받는 개념!
font-weight: bold; //font는 상속받는 개념!
position: relative;
> a {
position: relative;
display: inline-block;
line-height: 95px;
&::before {
content: "";
display: block;
width: 0;
height: 3px;
background: $main_color;
position: absolute;
bottom: 0;
left: 0;
}
&::after {
content: "";
display: block;
width: 0;
height: 3px;
background: $main_color;
position: absolute;
bottom: 0;
right: 0;
transition: width 0.5s, opacity 0.5s 0.5s; //opacity는 0.5s delay생기고 작동
opacity: 0;
}
&:hover {
color: $main_color;
&::before {
width: 100%;
transition: 0.5s;
}
&::after {
width: 100%;
opacity: 1;
}
}
}
&:hover {
ul {
display: flex;
color: #2d2d2d;
}
}
&:nth-child(1) ul {
width: 500px;
}
&:nth-child(2) ul {
width: 200px;
}
&:nth-child(3) ul {
width: 200px;
}
&:nth-child(4) ul {
width: 200px;
}
}
ul {
position: absolute;
@include flexlayout();
left: 50%;
padding-top: 30px;
margin-left: 10px;
transform: translateX(-50%);
// width: 500px;
display: none;
li {
font-size: 14px; //font는 상속받아서 자식요소에서 다시 없애줌!
font-weight: normal; //font는 상속받아서 자식요소에서 다시 없애줌!
}
}
}
> div {
@include flexlayout();
> div {
&:nth-child(1) {
div {
&:nth-child(1) {
width: 95px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
line-height: 95px;
text-align: center;
img {
vertical-align: middle; //top 이였던 것 middle로 변경
}
}
}
}
&:nth-child(2) {
div {
&:nth-child(1) {
width: 95px;
text-align: center;
line-height: 95px;
font-weight: bold;
font-size: 18px;
position: relative;
&::after {
content: "";
display: block;
width: 100%;
height: 3px;
background: #000;
position: absolute;
left: 0;
bottom: 0;
}
}
}
}
}
#search {
position: absolute;
display: none;
}
#language {
position: absolute;
display: none;
}
}
}
}
}
// 비쥬얼 영역
#visual {
height: 100vh;
padding: 95px 82px;
position: relative;
&::after {
content: "";
display: block;
width: 100%;
position: absolute;
height: 1px;
background: rgba(0, 0, 0, 0.1);
left: 0;
bottom: 95px;
}
.leftsns {
position: absolute;
left: 0;
bottom: 0;
width: 82px;
ul {
padding-bottom: 30px;
li {
width: 100%;
text-align: center;
padding: 20px 0;
img {
opacity: 0.3;
transition: 0.5s;
}
&:hover {
img {
opacity: 1;
}
}
}
}
div {
height: 95px;
background: #1d1d1d;
text-align: center;
line-height: 95px;
img {
vertical-align: middle;
transition: 0.5s;
}
&:hover {
img {
transform: translate(8px,8px);
}
}
}
}
.visualdiv {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
.imgdiv {
height: 100%;
img {
width: 100%;
height: 100%;
}
}
.textdiv {
position: absolute;
left: 50px;
top: 50%;
transform: translateY(-50%);
p {
font-size: 18px;
span {
display: inline-block;
width: 260px;
position: relative;
&::after {
content: "";
display: block;
width: 200px;
height: 1px;
background: #111;
position: absolute;
bottom: 10px;
right: 10px;
}
}
}
h2 {
font-size: 72px;
font-weight: bold;
}
}
}
}
.inner_wrap {
width: 100%;
max-width: 1400px;
margin: 0 auto;
}
// mainMentor
#mainMentor {
padding: 80px 0;
height: 100vh;
position: relative;
.mentor {
@include flexlayout();
.imgdiv {
position: relative;
.blackarr {
position: absolute;
width: 70px;
height: 70px;
background: #1d1d1d;
right: 0;
bottom: 0;
text-align: center;
line-height: 70px;
img { vertical-align: middle; transition: 0.5s;}
&:hover {
img {
transform: translate(8px,-8px);
}
}
}
}
.textdiv {
@include flexlayout($d:column, $j:center);
padding: 0 100px;
text-align: center;
font-size: 18px;
span {
display: inline-block;
width: 200px;
position: relative;
text-align: left;
&::after {
content: "";
display: block;
width: 140px;
height: 1px;
background: #111;
position: absolute;
bottom: 10px;
right: 10px;
}
}
h2 {
font-size: 56px;
font-weight: bold;
padding: 20px 0 40px;
}
}
}
.textbg {
position: absolute;
bottom: 0;
right: 0;
}
}
// mainNews
#mainNews {
background: rgba(0, 0, 0, 0.1);
padding: 80px 0;
.textdiv {
text-align: center;
font-size: 18px;
p span {
display: inline-block;
width: 200px;
position: relative;
text-align: left;
&::after {
content: "";
display: block;
width: 140px;
height: 1px;
background: #111;
position: absolute;
bottom: 10px;
right: 10px;
}
}
h2 {
font-size: 56px;
font-weight: bold;
padding: 20px 0 40px;
}
div {
width: 300px;
border: 1px solid rgba(0, 0, 0, 0.2);
margin: 0 auto;
line-height: 70px;
a {
display: block;
width: 100%;
text-align: left;
position: relative;
padding-left: 70px;
span {
width: 70px;
height: 70px;
background: #1d1d1d;
display: block;
position: absolute;
top: 0;
right: 0;
text-align: center;
img {
vertical-align: middle;
}
}
}
}
}
.list {
padding-top: 100px;
ul {
@include flexlayout();
li {
width: 22%;
img {
width: 100%;
}
.listimg {
border: 0 solid $main_color;
transition: 0.5s;
}
.listtext {
padding: 20px;
h3 {
padding-bottom: 30px;
font-size: 18px;
font-weight: bold;
}
.viewMore {
position: relative;
font-weight: bold;
opacity: 0;
transition: 0.5s;
&::after {
content: "";
width: 100%;
height: 2px;
background: #1d1d1d;
display: block;
position: absolute;
bottom: -10px;
left: 0;
}
}
}
&:hover {
.viewMore {
opacity: 1;
}
.listimg {
border-width: 10px;
}
}
}
}
}
}
//mainContri
#mainContri {
padding: 80px 82px;
.textdiv {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding: 0 100px;
@include flexlayout();
p span {
display: inline-block;
width: 200px;
position: relative;
text-align: left;
&::after {
content: "";
display: block;
width: 140px;
height: 1px;
background: #111;
position: absolute;
bottom: 10px;
right: 10px;
}
}
h2 {
font-size: 56px;
font-weight: bold;
padding: 20px 0 40px;
}
div:nth-child(2) {
width: 300px;
border: 1px solid rgba(0, 0, 0, 0.2);
line-height: 70px;
a {
display: block;
width: 100%;
text-align: left;
position: relative;
padding-left: 70px;
span {
width: 70px;
height: 70px;
background: #1d1d1d;
display: block;
position: absolute;
top: 0;
right: 0;
text-align: center;
img {
vertical-align: middle;
}
}
}
}
}
.list {
li {
padding: 20px 100px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
@include flexlayout();
div {
&:nth-child(1) {
width: 30%;
img {
width: 80%;
}
}
&:nth-child(2) {
width: 70%;
h3 {
font-size: 20px;
font-weight: bold;
padding-bottom: 20px;
}
p {
font-size: 16px;
color: #4d4d4d;
}
}
}
}
}
}
// footer
#footer {
background: #000;
color: #fff;
padding: 95px 82px;
position: relative;
font-size: 18px;
&::after {
content: "";
display: block;
width: 100%;
height: 1px;
position: absolute;
left: 0;
bottom: 95px;
background: rgba(255, 255, 255, 0.1);
}
&::before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 82px;
right: 80px;
border-left: 1px solid rgba(255, 255, 255, 0.1);
border-right: 1px solid rgba(255, 255, 255, 0.1);
}
> div {
padding: 0 100px;
&.copyright {
position: absolute;
bottom: 0;
width: calc(100% - 164px);
line-height: 95px;
a {
display: block;
position: absolute;
right: 0;
bottom: 0;
width: 82px;
height: 95px;
background: #333;
text-align: center;
line-height: 95px;
img {
vertical-align: middle;
}
}
}
.site {
@include flexlayout();
padding-bottom: 40px;
a {
padding-right: 40px;
padding-left: 40px;
}
div > a:nth-child(1) {
border-right: 1px solid rgba(255, 255, 255, 0.2);
}
div > a:nth-child(2) {
padding-left: 40px;
}
> a {
position: relative;
&::after {
content: "";
display: block;
width: 100%;
height: 2px;
background: #fff;
position: absolute;
left: 0;
bottom: -10px;
}
}
}
.address {
padding-bottom: 60px;
}
}
}'노력이 좋아서' 카테고리의 다른 글
| <step27>'js_변수선언, 함수선언' (0) | 2022.04.26 |
|---|---|
| <step26>'js_기초' (0) | 2022.04.25 |
| <step25>'scss_현대 중공업 홈페이지 따라하기' (0) | 2022.04.22 |
| <step24>'css_animation' (0) | 2022.04.21 |
| <step23>'sccs_호텔 홈페이지 따라하기' (0) | 2022.04.20 |