본문 바로가기
웹/CSS

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

by BEE_0o0 2021. 5. 11.

오늘은 한화 솔루션/케미칼 클론 코딩을 하였다

너무너무 빨라서 따라가기 너무 힘들었다,, 속도에 적응할 거 같으면 빨라지구 빨라지구 빨라진다 😂

집중해서해도 너무너무 빨랐따 ㅠㅠ 그래도 이만큼 결과가 나오니 뿌듯은 만땅!

** 홈페이지를 만들 때, 기본 재료 >> 폴더 : image / css  파일 : index.html / main.css / responsive.css / reset.css / layout.css / common.css

 

위 재료를 정리하면서 사용해야한다! 코딩은 정리가 반인 거 같다 엉망진창으로 정리를 해버리면 엄청 어려워지고, 정리를 가지런하게 예쁘게! 해두면 쉽게 할 수 있다!! 위 재료를 이용해서 한화 솔루션/케미칼 클론코딩을 해보았다!!

아직 미완성이다 header와 footer랑 세세한 부분만 하면 완성이다 😎

 

 

<결과화면>

 

 

<index.html>

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./css/main.css">
<link rel="stylesheet" href="./css/responsive.css">
<title>hanhwa chemical clone</title>
<style>
</style>
</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>
                </li>
                <li class="gnb-item">
                    <a href="#">사업영역</a>
                </li>
                <li class="gnb-item">
                    <a href="#">인재채용</a>
                </li>
            </ul>
            <div class="search">
                <a href="#" class="icon btn-lang"></a>
                <button class="">제품검색</button>
                <a href="#" class="icon it-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">
                <img src="./image/title_1.png" alt="about title"><span>.</span>
                <p>대한민국 대표 석유화학 기업, 한화솔루션/케미칼을 소개합니다.</p>
            </h2>
            <ul class="thumb clearfix">
                <li class="thumb-item">
                    <!-- a링크는 a링크가 들어갈 수 없다 -->
                    <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링크는 a링크가 들어갈 수 없다 -->
                    <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링크는 a링크가 들어갈 수 없다 -->
                    <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>
            </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="sns">
        <div class="inner">
            <h2 class="section-title">
                <img src="./image/title_3.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="tab post">
                    </a>
                </li>
                <li class="tab-item">
                    <a href="#">
                        <img src="./image/sns/tab_facebook.png" alt="tab post">
                    </a>
                </li>
                <li class="tab-item">
                    <a href="#">
                        <img src="./image/sns/tab_blog.png" alt="tab 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>
                        <strong> 
                            바이오 연료부터 생분해 플라스틱까지, 미래 원료로 떠오른 '해조류'
                        </strong>
                        <small>
                            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>
                        <strong>
                            바이오 연료부터 생분해 플라스틱까지, 미래 원료로 떠오른 '해조류'
                        </strong>
                        <small>
                            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>
                        <strong>
                            바이오 연료부터 생분해 플라스틱까지, 미래 원료로 떠오른 '해조류'
                        </strong>
                        <small>
                            2021.05.06
                        </small>
                    </div>
                </li>
            </ul>
        </div>
    </section>
    <!-- <footer>
        <div class="inner">
            <img src="./image/footer/footer_ci.png" alt="footer ci">
            <address>
                <img src="./image/footer/address.png" alt="footer address">
                <img src="./image/footer/copyright.png" alt="footer copyright">
            </address>
            <span>
                <span>온라인구매시스템</span>
                <span>고객문의</span>
                <span>뉴스&공지사항</span>
                <span>개인정보처리방침</span>
            </span>
        </div>
    </footer> -->
</body>
</html>

 

 

<main.css>

<style>
@charset "utf-8";
@import "./reset.css";
@import "./common.css";
@import "./layout.css";
/* header */
header {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: rgba(0,0,0,0.2);
}
/* 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_3.jpg) no-repeat center/cover;
    position: relative;
}
.vision-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.vision-more {
    border: 2px solid #fff;
    padding: 1rem 2rem 1rem 2rem;
    color: #fff;
    text-transform: uppercase;
    position: absolute;
    bottom: 11.3rem;
    left: 50%;
    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: '';
    display: inline-block;
    background: url(../image/icon.png);
    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;
    /* border: 1px solid #000; */
}
.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: 1px 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: #2c3848;
    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;
    color: #ddd;
    line-height: 1.75;
}
.innovation dd a {
    background: var(--primary-color);
    padding: 1rem 2rem;
    color: #fff;
    border-radius: 2rem;
}
/* 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 1rem 1rem 3rem;
}
.sns .sns-tab .tab-item a {
    height: 20px;
    overflow: hidden;
    /* border: 1px solid #000; */
}
.sns .sns-tab .tab-item:first-child a img {
    margin-top: -20px;
}
/* post */
.post {
    display: inline-block;
    width: 100%;
}
.post-item {
    float: left;
    width: 33.333%;
}
/* footer */
</style>

 

 

<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;
}
/* icon */
.icon {
    background-image: url(../image/icon.png);
}
.logo {
    background-position: 0 -597px;
    width: 260px;
    height: 32px;
    border: 1px solid #000;
}
.btn-toggle {
    background-position: -651px 0;
    width: 50px;
    height: 24px;
}
.btn-lang {
    background-position: -273px 0;
    width: 32px;
    height: 23px;
}
.search-glass {
    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 {
    background-position: -327px -123px;
    width: 14px;
    height: 14px;
}
</style>

 

 

<layout.css>

<style>
@charset "utf-8";
.wrap {
    max-width: 1920px;
}
.inner {
    max-width: 1440px;
    margin: 0 auto;
}
header {

}
footer {
    height: 100px;
}
</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 {
    text-decoration: none;
    color: inherit;
    display: inline-block;
}
button {
    outline: none;
    border: none;
    background: transparent;
}
</style>
저작자표시 비영리 변경금지

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

[코딩 공부_76] css 스크롤바 스타일 변경하기  (0) 2021.05.14
[코딩 공부_75] 한화 솔루션/케미칼 클론코딩(완성)  (0) 2021.05.13
[코딩 공부_73] 반응형 웹, 넷플릭스 실습하기  (0) 2021.05.10
[코딩 공부_72] 반응형 웹 실습하기 3  (0) 2021.05.09
[코딩 공부_71] 반응형 웹 실습하기 2  (0) 2021.05.08

관련글

댓글

티스토리툴바