본문 바로가기
웹/CSS

[코딩 공부_75] 한화 솔루션/케미칼 클론코딩(완성)

by BEE_0o0 2021. 5. 13.

<결과화면>

<완성>

 

<반응형>

 

 

<index.html>

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/main.css">
<link rel="stylesheet" href="./css/responsive.css">
<title>hanhwa chemical clone coding</title>
</head>
<body>
    <header>
        <div class="inner">
            <a href="#" class="icon logo">
            </a>
            <button class="icon btn-toggle">
            </button>
            <ul class="gnb">
                <li class="gnb-item">
                    <a href="#">회사소개</a>
                    <ul class="gnb-item-wrap">
                        <li><a href="#">회사개요</a></li> 
                        <li><a href="#">걸어온길</a></li> 
                        <li><a href="#">중앙연구소</a></li> 
                        <li><a href="#">지속가능경영</a></li> 
                        <li><a href="#">글로벌 네트워크</a></li> 
                    </ul>
                </li>
                <li class="gnb-item">
                    <a href="#">사업영역</a>
                    <ul class="gnb-item-wrap">
                        <li><a href="#">전체사업분야</a></li>
                        <li><a href="#">PO</a></li>
                        <li><a href="#">PVC</a></li>
                        <li><a href="#">CA</a></li>
                        <li><a href="#">TDI</a></li>
                        <li><a href="#">ASR</a></li>
                    </ul>
                </li>
                <li class="gnb-item">
                    <a href="#">인재채용</a>
                    <ul class="gnb-item-wrap">
                        <li><a href="#">인재상</a></li>
                        <li><a href="#">직무소개</a></li>
                        <li><a href="#">인사제도</a></li>
                    </ul>
                </li>
            </ul>
            <div class="search">
                <a href="#" class="icon btn-lang"></a>
                <button class="btn-search search-glass">제품검색</button>
                <a href="#" class="icon ir-logo"></a>
            </div>
        </div>
    </header>
    <section class="vision">
        <div class="inner">
            <div class="vision-title">
                <img src="./image/vision/vis_txt_big.png" alt="expand into new horizons">
                <img src="./image/vision/vis_txt.png" alt="expand sub title">
            </div>
            <a href="#" class="vision-more">
                view more
            </a>
        </div>
    </section>
    <section class="about">
        <div class="inner">
            <h2 class="section-title section-title-mo">
                <img src="./image/title_1.png" alt="about title"><span>.</span>
                <p>대한민국 대표 석유화학 기업, 한화솔루션/케미칼을 소개합니다.</p>
            </h2>
            
            <ul class="thumb clearfix">
                <li class="thumb-item">
                    <a href="#">
                        <div class="thumb-img">
                            <img src="./image/about/about_1.jpg" alt="회사소개">
                        </div>
                        <div class="thumb-desc">
                            <h3>회사소개</h3>
                            <p>
                                삶의 가치를 높이는 기술기업, 한화솔루션/케미칼
                            </p>
                            <span>more</span>
                        </div>
                    </a>
                </li>
                <li class="thumb-item">
                    <a href="#">
                        <div class="thumb-img">
                            <img src="./image/about/about_2.jpg" alt="회사소개">
                        </div>
                        <div class="thumb-desc">
                            <h3>회사소개</h3>
                            <p>
                                설립 이래 한결 같은 자세로 기술 개발에 전념해<br>오고 있습니다.
                            </p>
                            <span>more</span>
                        </div>
                    </a>
                </li>
                <li class="thumb-item">
                    <a href="#">
                        <div class="thumb-img">
                            <img src="./image/about/about_3.jpg" alt="회사소개">
                        </div>
                        <div class="thumb-desc">
                            <h3>회사소개</h3>
                            <p>
                                세상을 더욱 풍요롭게 하고 지속가능한 내일을 만들기<br class="mo-br"> 위해 노력하고 있습니다.
                            </p>
                            <span>more</span>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </section>
    <section class="innovation">
        <div class="inner">
            <h2 class="section-title">
                <img src="./image/title_2.png" alt="about title"><span>.</span>
                <p>끊임없는 기술 혁신으로 미래 성장 동력을 지속 발굴합니다.</p>
            </h2>
            <img src="./image/product/product_1.jpg" alt="product img" class="product-photo">
            <dl>
                <dt>
                    <p>
                        <span>01</span>Chlorinated Polyvinyl Chloride
                    </p>
                </dt>
                <dd>
                    <span>CPVC</span>
                    <p>한화솔루션/케미칼은 국내에서 처음으로 자체 기술로 CPVC를 생산하는데 성공하고 2017년 울산 2공장에 연산 3만톤 규모의 공장을 건설해 생산 중입니다.</p>
                    <a href="#">제품상세보기</a>
                </dd>
            </dl>
        </div>
    </section>
    <section class="challenge">
        <div class="inner">
            <h2 class="section-title">
                <img src="./image/title_3.png" alt="about title"><span>.</span>
                <p>한화와 함께 꿈을 키워 갈 인재를 기다립니다.</p>
            </h2>
            <ul class="outer-list">
                <li class="career">
                    <h2 class="icon-career">직무특성 및 소개</h2>
                    <p>
                        한국 케미칼 산업의 역사를 이끌어 온 한화솔루션/케미칼이 미래를 선도하는 글로벌 케미칼리더로 함께 성장해 나갈 인재를 모집합니다.
                        <br>
                        글로벌 시장 진출 및 사업다각화가 본격화됨에 따라 체계적 · 전문적인 인재 육성의 중요성을 인식하고, 그에 걸맞은 다양한 교육프로그램과 인사제도를 폭넓게 실시하고 있습니다.
                        <br>
                        경영지원, 영업/마케팅, 기술/엔지니어, R&D 분야의 직무별 특성에 맞는 인재를 채용합니다.
                    </p>
                    <a href="#" class="btn-more arrow-right-small">more</a>
                </li>
                <li class="talent">
                    <h2 class="icon-talent">인재상</h2>
                    <p>
                        한화는 신용과 의리에 기반하여 ‘도전, 헌신, 정도’를 3대 핵심가치로 삼는 인재상을 추구하고 있습니다.
                    </p>
                    <ul class="inner-list">
                        <li>
                            <strong class="sub">Challenge</strong><span>기존의 틀에 안주하지 않고 변화와 혁신을 통해 최고를 추구하는 <strong>도전적인 한화인</strong></span>
                        </li>
                        <li>
                            <strong class="sub">Dedication</strong><span>회사, 고객, 동료와의 인연을 소중히 여기고 큰 목표를 위해 혼신의 힘을 다하는 <strong>헌신적인 한화인</strong></span>
                        </li>
                        <li>
                            <strong class="sub">Integrity</strong><span>자긍심을 바탕으로 원칙에 따라 바르고 공정하게 행동하는 <strong>정도의 한화인</strong></span>
                        </li>
                    </ul>
                    <a href="#" class="btn-more arrow-right-small">more</a>
                </li>
            </ul>
            <a href="#" class="career-link">한화인 채용사이트 바로가기</a>
        </div>
    </section>
    <section class="sns">
        <div class="inner">
            <h2 class="section-title">
                <img src="./image/title_4.png" alt="about title"><span>.</span>
                <p>SNS를 통해 한화솔루션/케미칼의 다양한 모습을 만나보세요.</p>
            </h2>
            <ul class="sns-tab clearfix">
                <li class="tab-item">
                    <a href="#">
                        <img src="./image/sns/tab_post.png" alt="tabp post">
                    </a>
                </li>
                <li class="tab-item">
                    <a href="#">
                        <img src="./image/sns/tab_facebook.png" alt="tabp post">
                    </a>
                </li>
                <li class="tab-item">
                    <a href="#">
                        <img src="./image/sns/tab_blog.png" alt="tabp post">
                    </a>
                </li>
            </ul>
            <ul class="post clearfix">
                <li class="post-item">
                    <a href="#">
                        <img src="./image/sns/sns_1.png" alt="">
                    </a>
                    <div class="desc">
                        <h5>시리즈</h5>
                        <p>
                            바이오 연료부터 생분해 플라스틱까지, 미래 원료로 떠오른 ‘해조류’
                        </p>
                        <small class="icon-time">
                            2021.05.06
                        </small>
                    </div>
                </li>
                <li class="post-item">
                    <a href="#">
                        <img src="./image/sns/sns_2.jpg" alt="">
                    </a>
                    <div class="desc">
                        <h5>시리즈</h5>
                        <p>
                            바이오 연료부터 생분해 플라스틱까지, 미래 원료로 떠오른 ‘해조류’
                        </p>
                        <small class="icon-time">
                            2021.05.06
                        </small>
                    </div>
                </li>
                <li class="post-item">
                    <a href="#">
                        <img src="./image/sns/sns_3.png" alt="">
                    </a>
                    <div class="desc">
                        <h5>시리즈</h5>
                        <p>
                            바이오 연료부터 생분해 플라스틱까지, 미래 원료로 떠오른 ‘해조류’
                        </p>
                        <small class="icon-time">
                            2021.05.06
                        </small>
                    </div>
                </li>
            </ul>
        </div>
    </section>
    <footer>
        <div class="inner clearfix">
            <img src="./image/footer/footer_ci.png" alt="footer ci" class="footer-ci">
            <address>
                <img src="./image/footer/address.png" alt="address">
                <br>
                <img src="./image/footer/copyright.png" alt="copyright">
            </address>
            <span class="footer-link">
                <a href="#" class="link">온라인구매시스템</a>
                <a href="#" class="link">고객문의</a>
                <a href="#" class="link">뉴스&공지사항</a>
                <a href="#" class="link">개인정보처리방침</a>
            </span>
        </div>
    </footer>
</body>
</html>

 

 

<common.css>

<style>
@charset "utf-8";

:root {
    font-size: 62.5%; /* 10px */
    --primary-color: #f37321;
    --color-green: rgba(46, 179, 0, 0.9);

    /* typography */
    --font-large: 2rem; /* 20px */
    --font-regular: 1.6rem; /* 16px */
}
body {
    font-size: var(--font-regular); /* 16px */
    font-family: '맑은 고딕','Malgun Gothic','돋움',Dotum, Helvetica, AppleGothic, Sans-serif;
}
.clearfix:after {
    content:'';
    display: block;
    clear: both;
}
/* margin collapse (마진병합 현상 제거) */
.marginfix:after,
.marginfix:before
{
    content:'';
    display: table;
}
.mo-br {
    display: none;
}

/* icon */
.icon {
    background-image: url(../image/icon.png);
}
.logo {
    background-position: 0 -597px;
    width: 260px;
    height: 32px;
}
.btn-toggle {
    background-position: -651px 0;
    width: 50px;
    height: 24px;
}
.btn-lang {
    background-position: -273px 0;
    width: 32px;
    height: 23px;
}
.search-glass:after {
    content: '';
    background-image: url(../image/icon.png);
    position: absolute;
    top: 8px;
    right: 15px;
    background-position: -243px 0;
    width: 19px;
    height: 23px;
}
.ir-logo {
    background-position: -306px -457px;
    width: 159px;
    height: 57px;
}
.arrow-right {
    background-position: -120px -100px;
    width: 16px;
    height: 8px;
}
.arrow-right-coral {
    background-position: -400px -100px;
    width: 32px;
    height: 32px;
}
.icon-sns {
    background-image: url(../image/sns/sns.png);
}
.btn-post {
    background-position: -60px -120px;
    width: 161px;
    height: 45px;
}
.icon-time:before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url(../image/icon.png);
    background-position: -327px -123px;
    vertical-align: middle;
}
/* 인재상 */
.arrow-right-small:after {
    content: '';
    display: inline-block;
    background-image: url(../image/icon.png);
    background-position: -231px -120px;
    width: 6px;
    height: 8px;
    margin-left: 10px;
}
</style>

 

 

<layout.css>

<style>
@charset "utf-8";

.wrap {
    max-width: 1920px;
}
.inner {
    max-width: 1440px;
    margin: 0 auto;
}
header {
    /* width: auto; 생략이 되어 있다 */
    height: 100px;
}
footer {
    /* width: auto; 생략이 되어 있다 */
    height: 100px;
}
</style>

 

 

<main.css>

<style>
@charset "utf-8";
@import "reset.css";
@import "common.css";
@import "layout.css";

/* header */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(0,0,0,0.2);
    z-index: 999;
    color: #eee;
}
header .logo {
    float: left;
    margin-top: 30px;
}
header .btn-toggle {
    float: left;
    margin-top: 35px;
    margin-right: 40px;
}
header .gnb {
    float: left;
}
header .gnb .gnb-item {
    margin-right: 4rem;
    display: inline-block;
    line-height: 100px;
    position: relative;
}
header .gnb .gnb-item:hover > a {
    color: var(--primary-color);
    border-bottom: 1px solid var(--primary-color);
}
header .gnb .gnb-item:hover:hover .gnb-item-wrap {
    visibility: visible;
}
header .gnb .gnb-item-wrap {
    /* ver1 */
    position: absolute;
    top: 101px;
    left: 0;
    line-height: 80px;
    width: 130px;
    background: rgba(0,0,0,0.7);
    text-align: center;
    visibility: hidden;

    /* ver2 */
    /* position: absolute;
    top: 101px;
    left: 0;
    width: 100%;
    height: 500px;
    background: rgba(0,0,0,0.7);
    padding-left: 575px; */
}
header .gnb .gnb-item-wrap li {
    display: inline-block;
    width: 100%;
}
header .gnb .gnb-item-wrap a:hover {
    color: var(--primary-color);
}

header .search {
    float: right;
    padding-top: 2rem;
}
header .search .btn-lang {
    vertical-align: top;
    margin-top: 20px;
}
header .search .btn-search {
    padding: 1rem 6rem 1rem 2rem;
    margin: 10px 40px 0;
    border-radius: 20px;
    vertical-align: top;
    border: 1px solid #eee;
    position: relative;
    transition: all .3s;
}
header .search .btn-search:hover {
    background: var(--primary-color);
    border: 1px solid var(--primary-color);
}

/* section-title */
h2.section-title {
    margin: 100px auto 44px;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 300;
}
h2.section-title img {
    margin-bottom: 24px;
}

/* vision */
section.vision {
    height: 100vh;
    background: url(../image/vision/vis-bg.jpg) no-repeat center/cover;
    position: relative;
}
.vision-title {
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
}
.vision-more {
    border: 2px solid #fff;
    padding: 1rem 2rem 1rem 2rem;
    position: absolute;
    text-transform: uppercase;
    bottom: 18rem;
    left: 50%;
    color: #fff;
    border-radius: 30px;
    transform: translateX(-50%);
    transition: all 300ms;
}
.vision-more:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
}
.vision-more:after {
    content: '';
    background: url(../image/icon.png);
    display: inline-block;
    background-position: -120px -100px;
    width: 16px;
    height: 8px;
    margin-left: 2rem;
}

/* about */
.about .thumb-item {
    float: left;
    width: 33.3333%;
}
.about .thumb-item .thumb-img {
    overflow: hidden;
}
.about .thumb-item .thumb-img img {
    transition: all 500ms;
}
.about .thumb-item:hover .thumb-img img {
    transform: scale(1.2);
}
.about .thumb-item .thumb-desc {
    padding: 43px 0 30px;
    margin-left: 40px;
    border-bottom: 2px solid #ddd;
}
.about .thumb-item .thumb-desc p {
    margin: 1.5rem 0 4.5rem;
    height: 48px;
}
.about .thumb-item .thumb-desc span {
    display: inline-block;
    font-weight: bold;
}
.about .thumb-item .thumb-desc span:before {
    content: '';
    display: inline-block;
    background: url(../image/icon.png);
    background-position: -400px -100px;
    width: 32px;
    height: 32px;
    vertical-align: middle;
    margin-right: 1rem;
}

/* innovation */
.innovation .product-photo {
    margin-bottom: -80px;
}
.innovation dl {
    width: 80%;
    margin: 0 auto;
}
.innovation dt {
    position: relative;
    background: #fff;
    height: 80px;
    padding: 3rem 5rem;
    font-weight: bold;
}
.innovation dt span:after {
    content: '';
    display: inline-block;
    width: 3px;
    height: 3px;
    background: var(--primary-color);
    border-radius: 50%;
    margin: 0 1rem;
}
.innovation dd {
    height: 170px;
    background: #2C384B;
    padding: 3rem 5rem;
}
.innovation dd span {
    display: inline-block;
    color: #fff;
    font-weight: bold;
    vertical-align: top;
}
.innovation dd p {
    display: inline-block;
    width: 80%;
    vertical-align: top;
    padding: 0 5rem;
    line-height: 1.75;
    color: #ddd;
}
.innovation dd a {
    background: var(--primary-color);
    padding: 1rem 2rem;
    color: #fff;
    border-radius: 2rem;
}

/* challenge */
.challenge {
    background: url(../image/challenge/fullbg_main.jpg) no-repeat center/cover;
    padding: 100px 0;
}
.challenge .outer-list > li {
    padding: 0 50px 50px;
}
.challenge .icon-career {
    position: relative;
}
.challenge .icon-career:before {
    content: '';
    position: absolute;
    background-image: url(../image/icon.png);
    background-position: -115px -205px;
    width: 26px;
    height: 29px;
    left: -40px;
}

.challenge .icon-talent {
    position: relative;
}
.challenge .icon-talent:before {
    content: '';
    position: absolute;
    background-image: url(../image/icon.png);
    background-position: -175px -205px;
    width: 26px;
    height: 29px;
    left: -40px;
}
.outer-list .career p {
    padding: 20px 0;
    line-height: 1.75;
    color: #666;
}
.outer-list > li a {
    margin-right: 100px;
}
.outer-list .talent > p {
    margin: 10px 0;
    color: #666;
}
.outer-list .talent .inner-list {
    color: #666;
    line-height: 1.75;
    margin-bottom: 20px;
}
.outer-list .inner-list strong {
    color: #111;
}
.outer-list .inner-list .sub {
    display: inline-block;
    width: 100px;
}
.outer-list .inner-list span:before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    background: #666;
    border-radius: 50%;
    margin-right: 20px;
    margin-bottom: 4px;
}
.challenge .career-link {
    background: var(--primary-color);
    display: block;
    margin: 0 auto;
    width: 270px;
    text-align: center;
    color: #fff;
    padding: 15px 30px;
    border-radius: 30px;
}

/* sns */
.sns .sns-tab {
    text-align: center;
}
.sns .sns-tab .tab-item {
    display: inline-block;
}
.sns .sns-tab .tab-item + .tab-item:before {
    content:'';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #999;
    margin: 0 3rem 1rem 3rem;
}
.sns .sns-tab .tab-item a {
    height: 20px;
    overflow: hidden;
}
.sns .sns-tab .tab-item:first-child a img {
    margin-top: -20px;
}
.sns .post .post-item {
    width: 33.3333%;
    float: left;
    padding: 21px;
}
.sns .post .post-item a {
    width: 100%;
    padding-top: 56.65%;
    height: 0;
    position: relative;
}
.sns .post .post-item a:before {
    content:'';
    position: absolute;
    top: 0;
    /* 끝나는 위치 */
    right: 0;
    width: 0;
    height: 100%;
    background: var(--color-green);
    z-index: 1;
    transition: all 400ms
}
.sns .post .post-item a:hover:before {
    top: 0;
    /* 시작위치 */
    left: 0;
    width: 100%;
}
.sns .post .post-item a:after {
    content:'';
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0;
    transform: translate(-50%, -50%);
    background-image: url(../image/sns/sns.png);
    background-position: -60px -120px;
    width: 161px;
    height: 45px;
    z-index: 2;
}
.sns .post .post-item a:hover:after {
    opacity: 1;
}
.sns .post .post-item a img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.sns .post .post-item .desc {
    padding: 46px 19px 30px; 
}
.sns .post .post-item h5 {
    color: var(--primary-color);
}
.sns .post .post-item p {
    margin: 10px 0;
    /* text 한줄만 ... 만들기
    아래 세가지 조건이 충족되어야 한다
    */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* footer */
footer {
    padding-top: 35px;
    border-top: 1px solid #ddd;
}
footer .footer-ci {
    display: inline-block;
}
footer address {
    display: inline-block;
    vertical-align: top;
    margin: 0 20px;
}
footer .footer-link {
    display: inline-block;
}
footer .footer-link a:hover {
    text-decoration: underline;
}
footer .footer-link a + a:before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 3px;
    background: #666;
    vertical-align: middle;
    margin: 0 20px;
}
footer .footer-link a:last-child {
    color: var(--primary-color);
}
</style>

 

<reset.css>

<style>
@charset "utf-8";

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
ul {
    list-style: none;
}
img {
    max-width: 100%;
    vertical-align: top;
}
a {
    display: inline-block;
    color: inherit;
    text-decoration: none;
}
button {
    outline: none;
    border:none;
    color: inherit;
    background: transparent;
    cursor: pointer;
}
</style>

 

<responsive.html>

<style>
@charset "utf-8";

@media (max-width: 1120px) {
    header {
        padding: 0 50px;
    }
    header .btn-toggle {
        position: absolute;
        top: 0px;
        right: 11px;
    }
    header .gnb {
        display: none;
    }
    header .search {
        display: none;
    }
    /* vision-title */
    .vision-more {
        bottom: 5rem;
    }
}
@media (max-width: 768px) {
    /* common */
    .mo-br {
        display: block;
    }
    .section-title-mo {
        width: 80%;
    }
    /* vision-title */
    .vision-more {
        bottom: 8rem;
    }
    /* about */
    .about .thumb-item {
        float: left;
        width: 100%;
        text-align: center;
    }
    .about .thumb-item .thumb-desc {
        padding: 20px 0;
    }
    .about .thumb-item .thumb-desc p {
        margin: 0.5rem;
    }

    /* innovation */
    .innovation dd {
        height: auto;
    }
    .innovation dd p {
        display: block;
        padding: 1rem 0;
    }

    /* challenge */
    .challenge .outer-list > li {
        padding: 0 70px 50px;
    }
    .outer-list .inner-list .sub {
        display: block;
    }

    /* sns */
    .sns .post .post-item {
        width: 100%;
    }
    .sns .post .post-item .desc {
        padding: 15px 19px 18px;
    }

    /* footer */
    footer {
        padding-bottom: 35px;
        height: auto;
        text-align: center;
    }
    footer address {
        margin: 10px 20px;
        display: block;
    }
}
</style>
저작자표시 비영리 변경금지

'웹 > CSS' 카테고리의 다른 글

[코딩 공부_78] transform-origin?  (0) 2021.05.21
[코딩 공부_76] css 스크롤바 스타일 변경하기  (0) 2021.05.14
[코딩 공부_74] 한화 솔루션/케미칼 클론코딩(미완성)  (0) 2021.05.11
[코딩 공부_73] 반응형 웹, 넷플릭스 실습하기  (0) 2021.05.10
[코딩 공부_72] 반응형 웹 실습하기 3  (0) 2021.05.09

관련글

댓글

티스토리툴바