고운세상 코스메틱
고운세상 코스메틱 웹사이트
www.gowoonsesang.com
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">
<title>Document</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style_teacher.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</li></a>
<li><a href="#">Contact</li></a>
</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-15</span>
<h3>더마코스메틱 ‘닥터지(Dr.G)’, 배우 송중기와 브랜드 모델 계약 체결</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-15</span>
<h3>더마코스메틱 ‘닥터지(Dr.G)’, 배우 송중기와 브랜드 모델 계약 체결</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-15</span>
<h3>더마코스메틱 ‘닥터지(Dr.G)’, 배우 송중기와 브랜드 모델 계약 체결</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-15</span>
<h3>더마코스메틱 ‘닥터지(Dr.G)’, 배우 송중기와 브랜드 모델 계약 체결</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>닥터지는 피부 고민으로 어려움을 겪는 어린이들을 돕기 위해 초록우산 어린이재단과 인연을 맺고 2019년부터 정기적인 후원을 하고 있습니다.
지난 2020년에는 유아용 선케어 ‘닥터지 베이비 마일드 업 선’ 제품 판매액의 10% 기부하는 프로젝트도 전개했습니다.
해당 제품의 용기와 패키지에는 초록우산 어린이재단과 함께 하는 아이들이 직접 그린 그림도 담아 기업의 진정성을 더했습니다.
2021년에도 총 5,000만 원의 지원금을 전달했으며 지속해서 치료에 필요한 물품을 적극 지원할 예정입니다.</p>
</div>
</li>
<li>
<div><img src="./images/8cc0e539-6e76-441b-966c-8ee405e2b782.jpg" alt=""></div>
<div>
<h3>피부과학연구재단 정기 지원</h3>
<p>국내 피부과학 연구 역량과 경쟁력 향상을 위한 지원을 이어가고 있습니다.
2020년부터 피부과학연구재단에 매년 5,000만 원의 연구비를 국내 피부과 전공의와 교수들의 학술 지원과 피부 과학 연구를 위해 지원하고 있습니다.</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>
reset.css
* { margin: 0; padding: 0; box-sizing: border-box;}
a { text-decoration: none; color:inherit; }
img { border: none; vertical-align: top; }
li { list-style: none;}
h1, h2, h3, h4, h5, h6 { font-weight: normal; }
address, em { font-style: normal; }
/* input, select { outline: none; }
table { border-collapse: collapse; } */
style_teacher.scss
body { font-size: 14px; line-height: 1.6; color: #1d1d1d; }
$main_color: #65d8b6;
#wrap { position: relative; }
#line {
div {
position: fixed;
background: rgba(0, 0, 0, 0.1);
z-index: 5;
}
.line_l {
width: 1px;
height: 100%;
left: 82px;
top: 0;
}
.line_r {
width: 1px;
height: 100%;
right: 82px;
top: 0;
}
.line_t {
width: 100%;
height: 1px;
left: 0;
top: 95px;
}
.line_b {
width: 100%;
height: 1px;
left: 0;
bottom: 95px;
display: none;
}
}
@mixin flexlayout($dir:row, $wrap: nowrap, $just: space-between, $align: center) {
display: flex;
flex-flow: $dir $wrap;
justify-content: $just;
align-items: $align;
}
#header {
padding: 0 82px;
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #fff;
z-index: 4;
#header_inner {
@include flexlayout();
height: 95px;
h1 {
padding-left: 50px;
}
#menu {
@include flexlayout();
> ul {
@include flexlayout();
>li {
padding: 0 16px;
font-size: 18px;
font-weight: bold;
position: relative;
> a {
position: relative;
display: inline-block; // a태그에 높이를 주기위해 inline-block 줌
line-height: 95px;
transition: 0.5s;
&::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;
opacity: 0;
transition: width 0.5s, opacity 0.5s 0.5s;
}
&:hover {
color: $main_color;
&::before {
width: 100%;
transition: 0.5s;
}
&::after {
width: 100%;
opacity: 1;
}
}
}
&:hover {
ul {
color: #2d2d2d;
display: flex;
}
}
&: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;
display: none;
transform: translateX(-50%);
li {
font-size: 14px;
font-weight: normal;
}
}
}
> 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; // 첨에 vertical-align: 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;
left: 0;
bottom: 0;
position: absolute;
}
}
}
}
}
#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 {
img {
width: 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 {
padding:80px 0;
height: 100vh;
position: relative;
.mentor {
@include flexlayout();
.imgdiv {
position: relative;
.blackarr {
position: absolute;
width: 70px;
height: 70px;
background: #030303;
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($dir: column, $just: 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 {
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: #030303;
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: 0px solid $main_color;
transition: 0.5s;
}
.listtext {
padding-top: 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 {
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: #030303;
display: block;
position: absolute;
top: 0;
right: 0;
text-align: center;
img {
vertical-align: middle;
}
}
}
}
}
.list {
li {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding: 20px 100px;
@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 {
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;
}
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
}
}
}'Stack > CSS' 카테고리의 다른 글
| [CSS / SCSS] SCSS로 Style 적용하기 5 (현대삼호중공업) (0) | 2022.04.22 |
|---|---|
| [CSS] CSS 애니메이션 (0) | 2022.04.20 |
| [CSS / SCSS] SCSS로 Style 적용하기 4 (hotel) (0) | 2022.04.20 |
| [CSS / SCSS] SCSS로 Style 적용하기 3 (Samsung) (0) | 2022.04.19 |
| [CSS / SCSS] SCSS로 Style 지정하기 2 (Display) (0) | 2022.04.19 |