[DAY - 37] html, css 페이지 연습 — 비 전공자의 Be developer

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">

  <title>Document</title>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css">
  <link rel="shortcut icon" href="images/favicon.ico">
  <style>

  </style>

</head>

<body>
  <!-- p#skipNav>a[href="#content"]{본문바로가기} -->
  <p id="skipNav"><a href="#content">본문바로가기</a></p>

  <!-- #wrap>header#header>.inner^section#visual+main#container.main>section#content>div.con-box.con$*4>.inner>h2+p^^^footer#gooter>.inner -->
  <div id="wrap">
    <header id="header">
      <div class="inner">
        <h1><a href="index.html"><img src="images/common/logo.png" alt="hwajin"></a></h1>
        <ul class="top-menu">
          <li><a href="#">홈</a></li>
          <li><a href="#">로그인</a></li>
          <li><a href="#">회원가입</a></li>
          <li><a href="#">고객문의</a></li>
        </ul>
        <nav class="nav">
          <ul class="gnb">
            <li><a href="page/sub1/sub1.html">회사소개</a></li>
            <li><a href="page/sub2/sub1.html">사업분야</a></li>
            <li><a href="page/sub3/sub1.html">연구소</a></li>
            <li><a href="page/sub4/sub1.html">제품소개</a></li>
            <li><a href="page/sub5/sub1.html">화진뉴스</a></li>
            <li><a href="page/sub6/sub1.html">고객문의</a></li>
          </ul>
        </nav>
      </div>
    </header>

    <section id="visual">
      <ul class="main-banner">
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <p class="btn-wrap">
        <button class="btn prev"><i class="xi-angle-left"></i></button>
        <button class="btn next"><i class="xi-angle-right"></i></button>
      </p>
      <ul class="paging">
        <li class="on"></li>
        <li></li>
        <li></li>
      </ul>
    </section>

    <main id="container" class="main">
      <section id="content">
        <div class="con-box con1">
          <div class="inner">
            <h2>한진 뉴스</h2>
            <p>내용</p>
            <ul>
              <li>
                <a href="">
                  <img src="./images/main/section1_1.jpg" alt="">
                  <span></span>
                  <div>
                    <i>제목</i>
                    <strong>설명</strong>
                  </div>
                </a>
              </li>
              <li>
                <a href="">
                  <img src="./images/main/section1_1.jpg" alt="">
                  <span></span>
                  <div>
                    <i>제목</i>
                    <strong>설명</strong>
                  </div>
                </a>
              </li>
              <li>
                <a href="">
                  <img src="./images/main/section1_1.jpg" alt="">
                  <span></span>
                  <div>
                    <i>제목</i>
                    <strong>설명</strong>
                  </div>
                </a>
              </li>
              <li>
                <a href="">
                  <img src="./images/main/section1_1.jpg" alt="">
                  <span></span>
                  <div>
                    <i>제목</i>
                    <strong>설명</strong>
                  </div>
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="con-box con2">
          <div class="inner">
            <div class="box">
              <em>내용</em>
              <strong>타이틀 연습</strong>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit incidunt minus corporis ratione nostrum eum, neque aut blanditiis, ea aliquid, optio officia facere assumenda! Modi quam mollitia obcaecati aut nesciunt.</p>
            </div>
          </div>
        </div>

        <div class="con-box con3">
          <div class="inner">
            <h2>공지사항</h2>
            <p>내용</p>
          </div>
        </div>
        <div class="con-box con4">
          <div class="inner">
            <h2>한진 그룹 뉴스</h2>
            <p>내용</p>
          </div>
        </div>
      </section>

    </main>
    <footer id="footer">
      <div class="inner"></div>
    </footer>
  </div>


</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="../../css/reset.css">
  <link rel="stylesheet" href="../../css/style.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css">
  <link rel="shortcut icon" href="../../images/favicon.ico">


</head>

<body>
  <p id="skipNav"><a href="#content">본문바로가기</a></p>

  <!-- #wrap>header#header>.inner^section#visual+main#container.main>seciton#content>div.con-box.con$*4>.inner>h2+p^^^footer#footer>.inner -->
  <div id="wrap">
    <header id="header">
      <div class="inner">
        <h1><a href="../../index.html">
            <img src="../../images/common/logo.png" alt="hwajin"></a>
        </h1>
        <ul class="top-menu">
          <li><a href="#">홈</a></li>
          <li><a href="#">로그인</a></li>
          <li><a href="#">회원가입</a></li>
          <li><a href="#">고객문의</a></li>
        </ul>
        <nav class="nav">
          <ul class="gnb">
            <li><a href="sub1.html">회사소개</a></li>
            <li><a href="../sub2/sub1.html">사업분야</a></li>
            <li><a href="../sub3/sub1.html">연구소</a></li>
            <li><a href="../sub4/sub1.html">제품소개</a></li>
            <li><a href="../sub5/sub1.html">화진뉴스</a></li>
            <li><a href="../sub6/sub1.html">고객문의</a></li>
          </ul>
        </nav>
      </div>
    </header>
    <!-- //header -->

    <section id="subVisual" class="subvis1">
      <h2><span>회사소개</span></h2>
      <nav>
        <ul>
          <li class="on"><a href="sub1.html">회사소개</a></li>
          <li><a href="sub2.html">인사말</a></li>
          <li><a href="sub3.html">연혁 &amp; 비전</a></li>
          <li><a href="sub4.html">수상실적</a></li>
          <li><a href="sub5.html">사업파트너</a></li>
          <li><a href="sub6.html">CI소개</a></li>
          <li><a href="sub7.html">오시는길</a></li>
          <li><a href="sub8.html">지속 가능 경영</a></li>
        </ul>
      </nav>
    </section>
    <!-- //visual -->

    <main id="container" class="page  sub1-1">
      <seciton id="content">
        <div class="inner">
          <h3>
            화진산업은 고기능성 필름 부문 차세대
            <span>'글로벌 리딩 기업'</span>입니다.
          </h3>
          <div class="bg">
            <ul>
              <li><span><i class="xi-apple"></i></span><em> safety</em></li>
              <li><span><i class="xi-dropbox"></i></span><em>global</em></li>
              <li><span><i class="xi-hunie"></i></span><em>eco</em></li>
            </ul>
          </div>
          <strong>㈜화진산업은 2013년 설립되어 제품의 안전과 사용자의 편리성을 제공하는<br>
            고기능성 필름을 공급하는 대한민국 포장용 필름 회사입니다.</strong>
          <!-- ul>li*3>span>i[class]^p -->
          <ul>
            <li>
              <span><i class="xi-night"></i></span>
              <p>수요자의 필요와 시장의 요구를 먼저 생각하는 고객중심의 사고를 기반으로 국내 네트워크를 구축하고, 경쟁력을 갖춘 산업용 필름, 농업용 필름 등의 제품을 국내에 공급하여
                &quot;고기능성 필름 기업&quot;으로서 성장하고 있습니다.</p>
            </li>
            <li>
              <span><i class="xi-sunset"></i></span>
              <p>현재 고기능성 필름을 중심으로 생활 자재에서의 시장 지배력을 강화하고 친환경 산업 소재 분야로 사업을 확대 하며 미래 지향적 사업 포트폴리오를 구성하고 있습니다.</p>
            </li>
            <li>
              <span><i class="xi-snowy"></i></span>
              <p>화진산업은 &quot;고객의 성공이 곧 우리의 성공&quot;이라는 경영철학을 실현하며 고객에게 새로운 가치를 제공하는 대한민국 대표 기업이 되겠습니다.</p>
            </li>
          </ul>
        </div>
      </seciton>
    </main>

    <footer id="footer">
      <div class="inner"></div>
    </footer>

  </div>

</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">

  <title>Document</title>
  <link rel="stylesheet" href="../../css/reset.css">
  <link rel="stylesheet" href="../../css/style.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css">
  <link rel="shortcut icon" href="../../images/favicon.ico">
  <style>

  </style>

</head>

<body>
  <!-- p#skipNav>a[href="#content"]{본문바로가기} -->
  <p id="skipNav"><a href="#content">본문바로가기</a></p>

  <!-- #wrap>header#header>.inner^section#visual+main#container.main>section#content>div.con-box.con$*4>.inner>h2+p^^^footer#gooter>.inner -->
  <div id="wrap">
    <header id="header">
      <div class="inner">
        <h1><a href="../../index.html"><img src="../../images/common/logo.png" alt="hwajin"></a></h1>
        <ul class="top-menu">
          <li><a href="#">홈</a></li>
          <li><a href="#">로그인</a></li>
          <li><a href="#">회원가입</a></li>
          <li><a href="#">고객문의</a></li>
        </ul>
        <nav class="nav">
          <ul class="gnb">
            <li><a href="sub1.html">회사소개</a></li>
            <li><a href="../sub2/sub1.html">사업분야</a></li>
            <li><a href="../sub3/sub1.html">연구소</a></li>
            <li><a href="../sub4/sub1.html">제품소개</a></li>
            <li><a href="../sub5/sub1.html">화진뉴스</a></li>
            <li><a href="../sub6/sub1.html">고객문의</a></li>
          </ul>
        </nav>
      </div>
    </header>

    <section id="subVisual" class="subvis1">
      <h2><span>인사말</span></h2>
      <nav>
        <ul>
          <li><a href="sub1.html">회사소개</a></li>
          <li class="on"><a href="sub2.html">인사말</a></li>
          <li><a href="sub3.html">연혁&비전</a></li>
          <li><a href="sub4.html">수상실적</a></li>
          <li><a href="sub5.html">사업파트너</a></li>
          <li><a href="sub6.html">CI소개</a></li>
          <li><a href="sub7.html">오시는길</a></li>
          <li><a href="sub8.html">지속 가능 경영</a></li>
        </ul>
      </nav>
    </section>

    <main id="container" class="page sub1-2">
      <section id="content">
        <div class="inner">
          <h3>CEO 인사말</h3>
          <div class="pic">
            <p>
              우리가 사는 공동체를 위해,<br>
              건강하고 안전한 바른 먹거리<br>
              창출을 위해 노력합니다<br>
            </p>
            <strong>
              (주)BC 대표이사 
              <b>비코딩</b>
            </strong>
          </div>
          <div class="msg">
            <div class="left">
              <p> 안녕하십니까! BC 대표이사 비코딩입니다. </p>
              <p>BC는 앞선 기술과 품질, 서비스 창출로 우리가 사는 공동체의 행복에 기여하는
                  냉동 가공식품 및 식자재 유통 전문기업입니다. 특히 냉동 치킨 가공품에서는 차별화된
                  글로벌 인프라를 기반으로 높은 품질과 안정적인 최고의 상품을 제공하고 있습니다. </p>
              <p>최근 BC는 급변하는 시대에 맞춰 새로운 미래에 대한 도약으로, B2C로의 제품확장을
                  본격적으로 진행하고 있으며 유통에서도 온라인을 활성화를 통한 공급을 확대하고 있습니다.</p>
              <p>국내 진천 생산공장은 HACCP에 이어 식품안전, 효율성 세계 인증제도인
                  FSSC 22000 획득을 기반으로 B2B 맞춤형 제품을 프랜차이즈, CVS, 대형마트에서
                  지속해서 공급을 확대해 나가며, 식품 가공 분야를 선도하고 있습니다.</p>
          </div>
          <div class="left">
              <p>또한 물류센터 이전 및 관련 인프라 구축으로 지속적인 성장을 가속해 나가고 있습니다. BC의 최대 강점인 글로벌 네트워크를 활용 및 인프라를 바탕으로 태국, 베트남, 중국 등지에서
                  전략적 MOU와 M&A를 통해 개발, 생산, 유통을 강화해 나가고 있습니다.</p>
              <p>이를 기반으로 수입 치킨 냉동식품 가공품 분야 연속 국내 1위의 쾌거를 이룩하였습니다. BC는 앞으로도 핵심가치인 고객의 건강과 행복에 기여하는 글로벌 종합식품 그룹으로
                  가치를 창출하고 사회적 책임과 국가발전에 기여하는 기업으로 책임경영을 다 하고자 합니다.</p>
              <p>항상 고객의 안전과 행복을 최우선으로 하며 세계적인 식품 기업이 되고자 하는 비전을 통해
                  지속적인 혁신을 통한 끊임없는 노력해 나가겠습니다. 감사합니다. </p>                            
          </div>
          </div>
        </div>
      </section>
    </main>

    <footer id="footer">
      <div class="inner"></div>
    </footer>
  </div>

</body>

</html>

/* 전체 페이지 공통 */
#wrap,
#header,
#container,
#visual,
#content,
#subVisual {
  width: 100%;
}

#wrap {
  min-width: 1600px;
}

.inner {
  width: 1400px;
  margin: auto;
  position: relative;
  box-sizing: border-box;
}

#header {}

#header .inner {
  height: 150px;
}

#header h1 {
  position: absolute;
  left: 0;
  top: 40px;
}

#header .top-menu {
  position: absolute;
  right: 0;
  top: 10px;
  display: flex;
}

#header .top-menu li {
  margin-left: 20px;
  position: relative;
}

#header .top-menu li::after {
  content: "";
  position: absolute;
  display: block;
  width: 1px;
  height: 12px;
  background: gray;
  right: -15px;
  top: 50%;
  transform: translateY(-50%);
}

#header .top-menu li:last-child::after {
  display: none;
}

#header .top-menu li a {
  font-size: 14px;
}

#header .nav {
  position: absolute;
  right: 0;
  top: 65px;
}

#header .nav .gnb {
  display: flex;
}

#header .nav .gnb li {
  margin-left: 70px;
}

#header .nav .gnb li a {
  font-size: 18px;
  font-weight: 500;
}

/* 서브 공통 구조 */
#subVisual {
  width: 100%;
  height: 410px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  display: flex;
  flex-direction: column;
}

#subVisual h2 {
  height: 340px;
  display: flex;
  justify-content: center;
  font-size: 50px;
  font-weight: 700;
  color: #fff;
  align-items: center;
}

#subVisual nav {
  height: 70px;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
}

#subVisual nav ul {
  display: flex;
  justify-content: center;
}

#subVisual nav ul li {
  position: relative;
  margin-right: 55px;
}

#subVisual nav ul li::after {
  content: "";
  display: block;
  height: 1px;
  background: #fff;
  position: absolute;
  left: 0;
  top: -1px;
  width: 100%;
  transition: 0.3s;
  transform: scaleX(0);
}

#subVisual nav ul li:hover::after {
  transform: scaleX(1);
}

#subVisual nav ul li.on::after {
  transform: scaleX(1);
}

#subVisual nav ul li:last-child {
  margin-right: 0;
}

#subVisual nav ul li a {
  display: block;
  padding: 0 15px;
  line-height: 70px;
  font-size: 18px;
  color: #fff;
}

#subVisual nav ul .on {}

#subVisual.subvis1 {
  background-image: url(../images/contents/sublayout/spot1.jpg);
}

#subVisual.subvis2 {
  background-image: url(../images/contents/sublayout/spot2.jpg);
}

#subVisual.subvis3 {
  background-image: url(../images/contents/sublayout/spot3.jpg);
}

#subVisual.subvis4 {
  background-image: url(../images/contents/sublayout/spot4.jpg);
}

#subVisual.subvis5 {
  background-image: url(../images/contents/sublayout/spot5.jpg);
}

#subVisual.subvis6 {
  background-image: url(../images/contents/sublayout/spot5.jpg);
}

/* page 공통 */
.page {}

.page .inner {
  padding: 100px 0;
}

.sub1-1 {}

.sub1-1 h3 {}

.sub1-1 h3::after {}

.sub1-1 .bg {}

.sub1-1 .bg ul {}

.sub1-1 .bg ul li {}

.sub1-1 .bg ul li span {}

.sub1-1 .bg ul li span i {}

.sub1-1 .bg ul li em {}

.sub1-1 .bg+strong {}

.sub1-2 {}

.sub1-2 h3 {
  font-size: 40px;
  margin-bottom: 75px;
  text-align: center;
}

.sub1-2 {}

.sub1-2 h3 {
  font-size: 40px;
  margin-bottom: 75px;
}

.sub1-2 .pic {
  width: 100%;
  height: 480px;
  box-sizing: border-box;
  padding: 140px 240px;
  background-repeat: no-repeat;
  background-position: 800px 0;
  background-size: contain;
  background-image: url(../images/contents/sub1/GS.jpg);
  margin-bottom: 65px;
}

.sub1-2 .pic p {
  width: 440px;
  font-size: 35px;
  line-height: 1.3;
  margin-bottom: 20px;
}

.sub1-2 .pic strong {
  font-size: 20px;
}

.sub1-2 .pic strong b {
  font-weight: 700;
}

.sub1-2 .msg {
  display: flex;
  justify-content: space-between;
}

.sub1-2 .msg div {
  width: 670px;
}

.sub1-2 .msg div p {
  margin-bottom: 25px;
  font-size: 16px;
}


/* index page */
#visual {
  height: 800px;
  position: relative;

}

#visual .main-banner {
  width: 100%;
  height: 800px;
  position: relative;
}

#visual .main-banner li {
  width: 100%;
  height: 800px;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: cover;
}

#visual .main-banner li:nth-child(1) {
  background-image: url(../images/main/visual1.jpg);
  opacity: 1;
}

#visual .main-banner li:nth-child(2) {
  background-image: url(../images/main/visual2.jpg);
  opacity: 0;
}

#visual .main-banner li:nth-child(3) {
  background-image: url(../images/main/visual3.jpg);
  opacity: 0;
}

#visual .btn {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: none;
  background: white;
  text-align: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

#visual .btn i {
  line-height: 70px;
  font-size: 40px;
}

#visual .prev {
  position: absolute;
  left: 50px;
}

#visual .next {
  position: absolute;
  right: 50px;
}

#visual .paging {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

#visual .paging li {
  display: inline-block;
  height: 20px;
  width: 20px;
  background-color: #fff;
  border-radius: 50%;
  margin: 10px;
}

#visual .paging li.on {
  background: orange;
}

.main {}

.main .con-box {
  width: 100%;
}

.main .con-box h2 {
  font-size: 45px;
  text-align: center;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 10px;
}

.main .con-box h2+p {
  font-size: 20px;
  margin-bottom: 80px;
  text-align: center;
}

.main .con-box .inner {
  padding: 130px 0;
}

.main .con1 {}

.main .con1 ul {
  display: flex;
  justify-content: space-between;
}

.main .con1 li {
  height: 390px;
  width: 300px;
  position: relative;
  overflow: hidden;
}

.main .con1 li a {}

.main .con1 li a img {
  width: 300px;
  height: 390px;
}

.main .con1 li a span {
  display: block;
  width: 300px;
  height: 390px;
  position: absolute;
  left: 0;
  top: 0;
  background: #000;
  opacity: 0;
}

.main .con1 li:hover a span {
  opacity: 0.6;
}

.main .con1 li a div {
  position: absolute;
  left: 0;
  bottom: -100px;
  padding: 20px;
  color: white;
  transition: 0.4s;
  width: 100%;
  box-sizing: border-box;
}

.main .con1 li:hover a div {
  bottom: 0;
}

.main .con1 li a div i {
  font-size: 30px;
}

.main .con1 li a div strong {
  font-size: 30px;
  display: block;
  font-size: 35px;
  margin-top: 20px;
  margin-bottom: 30px;
}

.main .con1 li a div p {
  width: 100%;
  position: relative;
  left: 0;
  top: 30px;
  opacity: 0.3;
  transition: 0.5s;
}

.main .con2 {
  background-image: url(../images/main/motive_bg.jpg);
  width: 100%;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-attachment: fixed;
  background-size: cover;
  height: 600px;

}

.main .con2 .inner .box {
  position: relative;
}

.main .con2 .inner .box {
  position: absolute;
  background: white;
  right: 0;
  top: 0;
  width: 400px;
  height: 450px;
  background: rgba(255, 255, 255, 0.5);
}

.main .con2 .inner .box em {}

.main .con2 .inner .box strong {}

.main .con2 .inner .box p {}

티스토리툴바