18일차 (2) - 사이트 만들기 최종본

Yohan·2024년 3월 17일
CSSTILhtml
0

코딩기록

목록 보기
24/156
post-custom-banner

html

<!DOCTYPE html>
<html lang="ko">
  <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/main.css" />
  </head>

  <body>
    <div class="wrap">
      <!-- header -->
      <header>
        <div class="inner-header clearfix">
          <h1 class="logo">
            <a href="#">
              <img src="img/logo1.png" alt="메인 로고이미지" />
            </a>
          </h1>

          <nav class="gnb">
            <ul>
              <li><a href="#">회사소개</a></li>
              <li><a href="#">사업영역</a></li>
              <li><a href="#">투자정보</a></li>
              <li><a href="#">인재채용</a></li>
            </ul>
          </nav>
          <nav class="tnb">
            <ul>
              <li>
                <a href="#"><i class="fas fa-flask"></i>알기쉬운 제품공정</a>
              </li>
              <li>
                <a href="#"><i class="far fa-handshake"></i>내 삶속의 회사</a>
              </li>
              <li>
                <a href="#">제품검색<i class="fas fa-search"></i></a>
              </li>
            </ul>
          </nav>

          <!-- 태블릿, 모바일 햄버거버튼 -->
          <nav class="gnb-mobile">
            <a href="#">
              <i class="fas fa-bars"></i>
            </a>
          </nav>
        </div>
      </header>
      <!-- //header -->

      <!-- section main -->
      <section class="main">
        <div class="main-title center">
          <h2 class="en">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium
            fugacommodi aliquam, mollitia illo non! possimus eveniet impedit.
          </h2>
          <p>창의적이고 경쟁력 있는 IT 선도기업</p>
          <a href="#" class="view en"
            >VIEW MORE <i class="fas fa-long-arrow-alt-right"></i
          ></a>
        </div>
      </section>
      <!-- //section main -->

      <!-- section.about -->
      <section class="about">
        <div class="title en">
          <h2>ABOUT SOON9 Holdings<span>.</span></h2>
          <p>
            대한민국 대표 IT기업, <br class="mo" />
            SOON9 Holdings를 소개합니다.
          </p>
        </div>

        <ul class="sub-container clearfix">
          <li>
            <a href="#">
              <div class="img-box">
                <img src="img/about_1.jpg" alt="회사소개" />
              </div>
              <div class="text">
                <h3>회사소개</h3>
                <p>삶의 가치를 높이는 기업, SOON9 Holdings</p>
                <p class="more">more</p>
              </div>
            </a>
          </li>
          <li>
            <a href="#">
              <div class="img-box">
                <img src="img/about_2.jpg" alt="회사소개" />
              </div>
              <div class="text">
                <h3>중앙연구소</h3>
                <p>
                  설립 이래 한결 같은 자세로 기술 개발에 <br class="mo" />전념해
                  오고있습니다.
                </p>
                <p class="more">more</p>
              </div>
            </a>
          </li>
          <li>
            <a href="#">
              <div class="img-box">
                <img src="img/about_3.jpg" alt="회사소개" />
              </div>
              <div class="text">
                <h3>투자정보</h3>
                <p>SOON9 Holdings의 주요 경영사항을 제공합니다.</p>
                <p class="more">more</p>
              </div>
            </a>
          </li>
        </ul>
      </section>
      <!-- //section.about -->

      <!-- section.innovation -->
      <section class="innovation">
        <div class="title">
          <h2 class="en">OUR PRODUCT innovations<span>.</span></h2>
          <p>
            끊임없는 기술 혁신으로 미래 성장 동력을 <br class="mo" />
            지속 발굴 합니다.
          </p>
        </div>
        <div class="sub-container img-box">
          <div class="inner">
            <h3 class="en">01<span>.</span> Chlorinated Polyvinyl Chloride</h3>
            <div class="bottom clearfix">
              <p>
                우리 회사는 국내에서 처음으로 자체 기술로 CPVC를 생산하는데
                성공하고 2017년 울산 2공장에 연산 3만톤 규모의 공장을 건설해
                생산 중입니다.
              </p>
              <a href="#">제품상세보기</a>
            </div>
          </div>
        </div>
      </section>
      <!-- //section.innovation -->

      <!-- section.me -->
      <section class="me">
        <div class="title">
          <h2 class="en">CHALLENGE ME <span>.</span></h2>
          <p>우리와 함께 꿈을 키워 갈 인재를 기다립니다.</p>
        </div>
        <ul class="sub-container list">
          <li>
            <h3>
              <span><i class="fa fa-briefcase"></i></span>직무특성 및 소개
            </h3>
            <p>
              한국 아이티 산업의 역사를 이끌어 온 우리회사가 미래를 선도하는
              글로벌 리더로 함께 성장해 나갈 인재를 모집합니다. <br />
              글로벌 시장 진출 및 사업다각화가 본격화됨에 따라 체계적 · 전문적인
              인재 육성의 중요성을 인식하고, 그에 걸맞은 다양한 교육프로그램과
              인사제도를 폭넓게 실시하고 있습니다.
            </p>
            <a href="#" class="more"
              >more
              <span><i class="fa fa-chevron-right" aria-hidden="true"></i></span
            ></a>
          </li>
          <li>
            <h3>
              <span><i class="far fa-user-circle"></i></span>인재상
            </h3>
            <p>
              우리는 신용과 의리에 기반하여 ‘도전, 헌신, 정도’를 3대 핵심가치로
              삼는 인재상을 추구하고 있습니다.
            </p>
            <ul class="in">
              <li class="clearfix">
                <em>Challenge</em>
                <p>
                  기존의 틀에 안주하지 않고 변화와 혁신을 통해 최고를 추구하는
                  도전적인 사람
                </p>
              </li>
              <li class="clearfix">
                <em>Dedication</em>
                <p>
                  회사, 고객, 동료와의 인연을 소중히 여기고 큰 목표를 위해
                  혼신의 힘을 다하는 헌신적인 사람
                </p>
              </li>
              <li class="clearfix">
                <em>Intergrity</em>
                <p>
                  자긍심을 바탕으로 원칙에 따라 바르고 공정하게 행동하는 정도의
                  사람
                </p>
              </li>
            </ul>
            <a href="#" class="more"
              >more <span><i class="fa fa-chevron-right"></i></span
            ></a>
          </li>
        </ul>
        <button id="incruit-btn">채용사이트 바로가기</button>
      </section>
      <!-- //section.me -->

      <!-- section.sns -->
      <section class="sns">
        <div class="title">
          <h2 class="en">SNS CHANNEL <span>.</span></h2>
          <p class="en">
            SNS를 통해 우리 회사의 다양한 <br class="mo" />
            모습을 만나보세요.
          </p>
        </div>
        <ul class="sub-container clearfix">
          <li>
            <a href="#">
              <div class="img-box"><img src="img/blog_1.png" alt="" /></div>
              <div class="bottom">
                <p class="color">화학캐스트</p>
                <p>자동차에 색을 입히는 기술, 아크릴 수지 도료</p>
                <p class="time">
                  <i class="far fa-clock"></i>2021.08.10 <span>08:00</span>
                </p>
              </div>
            </a>
          </li>
          <li>
            <a href="#">
              <div class="img-box"><img src="img/blog_2.jpg" alt="" /></div>
              <div class="bottom">
                <p class="color">뉴스</p>
                <p>Soon9's 중앙연구소, 친환경 지원사업 업무협약식</p>
                <p class="time">
                  <i class="far fa-clock"></i>2021.09.10 <span>08:00</span>
                </p>
              </div>
            </a>
          </li>
          <li>
            <a href="#">
              <div class="img-box"><img src="img/about_1.jpg" alt="" /></div>
              <div class="bottom">
                <p class="color">동호회</p>
                <p>Soon9's 중앙연구소, '청소년의 꿈'을 응원합니다!</p>
                <p class="time">
                  <i class="far fa-clock"></i>2021.11.10 <span>08:00</span>
                </p>
              </div>
            </a>
          </li>
        </ul>
      </section>
      <!-- //section.sns -->

      <!-- footer -->
      <footer>
        <div class="inner clearfix">
          <h2 class="ft-logo"><img src="img/logo3.png" alt="" /></h2>
          <ul class="address">
            <li>서울특별시 마포구 중앙정보처리인재개발원</li>
            <li class="en">Copyright 2024.</li>
          </ul>
          <ul class="list">
            <li><a href="#">온라인 구매시스템</a></li>
            <li><a href="#">고객문의</a></li>
            <li><a href="#">공지사항</a></li>
            <li><a href="#">개인정보처리방침</a></li>
            <li><a href="#">FAMILY SITE</a></li>
          </ul>
        </div>
      </footer>
      <!-- //footer -->
    </div>
  </body>
</html>

css

@import url("common.css");

/* header style */
header {
  /* 투명도 0.2 */
  background: rgba(0, 0, 0, 0.2);
  /* 이미지와 높이를 맞게하기 위해 높이 설정 */
  height: 100px;
  line-height: 100px;
  /* fixed하면 width가 깨지기때문에 재설정 */
  position: fixed;
  width: 100%;
  top: 0;
}
/* 반응형 웹을 사용하기 위해 inner-header 사용 */
header .inner-header {
  /* border: 3px solid red; */
  width: 84%;
  margin: 0 auto;
}
/* logo, gnb, tnb의 수평배치 + 부모에 clear */
/* 사진 액자 */
header .inner-header .logo {
  /* border: 3px solid violet; */
  float: left;
  /* 액자 크기 조절 */
  width: 200px;
}
/* 이미지를 액자에 맞게 100% */
header .inner-header .logo img {
  width: 100%;
}
header .inner-header .gnb {
  /* border: 3px solid red; */
  float: left;
  margin-left: 80px;
}
header .inner-header .gnb li {
  /* border: 3px solid #000; */
  float: left;
  margin-right: 80px;
}
header .inner-header .gnb li a {
  /* background: red; */
  display: block;
  color: #fff;
  font-size: 16px;
}
header .inner-header .gnb li a:hover {
  color: #ff8342;
}
header .inner-header .tnb {
  /* border: 3px solid blue; */
  float: right;
  color: #fff;
  font-size: 16px;
}
header .inner-header .tnb li {
  float: left;
  margin-right: 25px;
}
header .inner-header .tnb li:first-child i,
header .inner-header .tnb li:nth-child(2) i {
  margin-right: 8px;
  /* icon size는 font-size로 */
  font-size: 18px;
}
header .inner-header .tnb li:last-child a {
  border: 1px solid #fff;
  padding: 5px;
  border-radius: 30px;
}
header .inner-header .tnb li:last-child a:hover {
  background: #fff;
  color: #ff8342;
}
header .inner-header .tnb li:last-child i {
  margin-left: 5px;
}
header .inner-header .gnb-mobile {
  display: none;
}

main

/* section.main.style */
section.main {
  background: url("../img/vis_4.jpg") no-repeat center/cover fixed;
  height: 100vh;
  position: relative;
}
section.main .main-title {
  /* background: red; */
  color: #fff;
  text-shadow: 2px 2px 10px #123;
  text-align: center;
}
section.main .main-title h2 {
  font-size: 55px;
}
section.main .main-title p {
  font-size: 25px;
  margin: 20px 0;
}
section.main .main-title .view {
  font-size: 15px;
  letter-spacing: 2px;
  display: block;
  width: 180px;
  margin: 0 auto;
  border: 1px solid #fff;
  border-radius: 30px;
  padding: 5px 0;
  position: relative;
  /* 삐져나온 것 없애줌 */
  overflow: hidden;
}
section.main .main-title .view::after {
  content: "";
  width: 0;
  height: 100%;
  background: rgba(255, 255, 255, 0.4);
  /* .view에 씌우기 위해 position */
  position: absolute;
  left: 0;
  top: 0;
  transition: 0.3s;
}
section.main .main-title .view:hover::after {
  width: 100%;
}
  • 화면 전체를 배경화면으로 쓰고싶었기 때문에 section에 backgruound를 주었다.
  • 정중앙으로 오는 공식을 이용하여 화면 중앙에 부제목이 위치하게 했다.



  • hover 되었을 때 보여지게 하는법
  1. 해당 view에 가상 클래스를 활용하여 똑같지만 witdh: 0 인 복제본을 하나 씌운다.
  2. view의 가상 클래스에 position: absolute; 를 적용하고 view에 position: relative; 를 적용하여 가상 클래스가 위에 씌어지게 함 (+ left, top 설정)
  3. 또한 순차적으로 차올라야 하기 때문에 transition도 설정
  4. 마지막으로 hover 되었을 때 꽉차게 설정해야하므로 가상클래스의 hover에 width: 100% 를 설정

공통 부분

/* section > div.title 공통 style */
section .title {
  text-align: center;
}
section .title h2 {
  font-size: 45px;
  margin-bottom: 5px;
}
section .title p {
  font-size: 18px;
  color: #555;
}
section .sub-container {
  width: 74%;
  margin: 0 auto;
}

about

/* section.about style */
section.about {
  /* background: orange; */
  margin: 80px 0;
}
section.about ul.sub-container {
  /* background: orange; */
  margin-top: 30px;
  border-bottom: 2px solid #ddd;
  padding-bottom: 30px;
}
section.about ul.sub-container li {
  /* border: 1px solid #000; */
  float: left;
  /* margin없이 이미지 꽉차게 */
  width: 33.333%;
}
/* a를 hover했을 때 어떤 것을 hover할지 정해야하기 때문에 .img-box img 명시 !! */
section.about ul.sub-container li a:hover .img-box img {
  transform: scale(1.2);
}
/* 사진 액자 */
section.about ul.sub-container li .img-box {
  /* transform: scale(1.2);했을 때 삐져나오는 것 방지 */
  overflow: hidden;
}
/* 이미지를 액자에 딱 맞게 */
section.about ul.sub-container li .img-box img {
  width: 100%;
  /* hover했을 때 부드럽게 보이기 위함 */
  transition: 0.6s;
}
section.about ul.sub-container li .text {
  /* border: 3px solid blue; */
  padding: 25px;
}
section.about ul.sub-container li .text h3 {
  font-size: 20px;
  margin-bottom: 10px;
}
section.about ul.sub-container li .text p {
  font-size: 16px;
  margin-bottom: 20px;
}
section.about ul.sub-container li .text .more {
  /* border: 1px solid #000; */
  /* lowercase : 일괄 소문자 변경 */
  text-transform: uppercase;
  font-weight: 700;
  position: relative;
  padding-left: 40px;
}
section.about ul.sub-container li .text .more::before {
  content: "→";
  display: block;
  width: 30px;
  height: 30px;
  /* y축 정렬 */
  line-height: 30px;
  background: #ff8342;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: -7px;
}
  • a를 hover했을 때 어떤 것을 hover할지 정해야하기 때문에 .img-box img 를 명시했다.
  • overflow: hidden; 은 부모에 !
  • more에서 position: absolute; 와 left, top 속성을 이용하여 content의 위치를 정한다. 추가적으로 display: flex 를 활용하기 전에 y축 정렬 기능을 사용하고 싶으면 line-height 속성을 통해 높이를 맞춰주면됨 !

innovation

/* section.innovation style */
section.innovation {
  margin-bottom: 150px;
}

section.innovation .img-box {
  height: 540px;
  margin-top: 50px;
  background: url("../img/product_1.jpg") no-repeat center/cover;
  position: relative;
}
section.innovation .img-box .inner {
  width: 80%;
  background: #3a3c4e;
  color: #fff;
  position: absolute;
  left: 50%;
  top: 75%;
  transform: translate(-50%, 0);
}
section.innovation .img-box .inner h3 {
  /* border: 1px solid #000; */
  background: #fff;
  color: #222;
  font-size: 18px;
  padding: 25px 45px;
}
section.innovation .img-box .inner .bottom {
  padding: 35px 85px;
}
section.innovation .img-box .inner .bottom p {
  /* background: yellow; */
  float: left;
  width: 70%;
  line-height: 1.5;
}
section.innovation .img-box .inner .bottom a {
  background: #ff8342;
  float: right;
  border-radius: 50px;
  padding: 7px 30px;
}

section.innovation .img-box .inner .bottom a:hover {
  background: #f86010;
}
  • inner가 img-box안에 위치하게 position을 통한 관리가 포인트였다.
  • 또한 inner의 위치를 정중앙 공식을 변형하여 코드를 작성하였다.

me

/* section.me style */
section.me {
  background: url("../img/me.jpg") no-repeat center/cover;
  padding: 80px 0;
  margin-bottom: 150px;
}
section.me ul.list {
  /* background: orange; */
  margin-top: 50px;
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
}
/* section.me ul.list li -> 이렇게 쓰면 후손 포함 li */
section.me ul.list > li {
  /* border: 1px solid red; */
  padding: 30px 60px;
}
section.me ul.list > li:first-child {
  border-bottom: 1px solid #ddd;
}
section.me ul.list > li h3 {
  /* background: skyblue; */
  font-size: 18px;
  margin-bottom: 20px;
  position: relative;
}
/* 아이콘을 왼쪽으로 보내기 위해 */
section.me ul.list > li h3 span {
  position: absolute;
  left: -30px;
  color: #ff8342;
}
section.me ul.list > li p {
  /* background: red; */
  line-height: 1.6;
  margin-bottom: 20px;
}
section.me ul.list > li .more {
  font-size: 16px;
  font-weight: 700;
}
section.me ul.list > li .more span {
  color: #ff8342;
  font-size: 14px;
  margin-left: 3px;
}
section.me ul.list ul.in {
  /* background: violet; */
  margin-bottom: 30px;
}
section.me ul.list ul.in li em {
  /* background: tomato; */
  float: left;
  width: 12%;
  margin-top: 3px;
  font-weight: 700;
}
section.me ul.list ul.in li p {
  background: dodgerblue;
  float: left;
  position: relative;
}
section.me ul.list ul.in li p::before {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ff8342;
  position: absolute;
  left: -40px;
  top: 10px;
}
#incruit-btn {
  width: 280px;
  background: #ff8342;
  color: #fff;
  padding: 10px 0;
  border-radius: 50px;
  font-weight: 700;
  cursor: pointer;
  /* button은 inline-block 이여서 margin이 안먹기 때문에 block으로 바꿔준다. */
  display: block;
  margin: 20px auto 0;
}
  • 자식 li와 후손 li를 따로 취급하여 범위를 지정해야 편한 부분이 있었기 때문에 > 를 이용하여 구분짓는 것이 포인트 !
  • witdh 를 지정해줌으로 텍스트의 시작위치를 똑같게 만들 수 있다.
  • 아이콘에 position: absolute; 를 넣어서 바깥으로 빼면서 최소한의 움직임으로 모양을 만들 수 있다.
  • 가상 클래스를 이용해 주황색 점을 만들었다.
  • button은 inline-block 이여서 margin이 안먹기 때문에 block으로 바꿔서 margin을 적용시킨다.

sns

/* section.sns style */
section.sns {
  margin-bottom: 60px;
}
section.sns ul {
  /* background: orange; */
  margin-bottom: 50px auto;
}
section.sns ul li {
  /* border: 3px solid #000; */
  width: 32%;
  margin-right: 2%;
  float: left;
}
/* 마지막은 margin 필요없으니 빼줌 */
section.sns ul li:last-child {
  margin-right: 0;
}
/* 사진 액자 */
section.sns ul li .img-box {
  /* border: 2px solid blue; */
  height: 235px;
  overflow: hidden;
  position: relative;
}
/* 이미지 */
section.sns ul li .img-box img {
  width: 100%;
}

section.sns ul li .img-box::before {
  content: "";
  width: 0;
  height: 100%;
  background: rgba(255, 131, 66, 0.75);
  position: absolute;
  z-index: 10;
  transition: 0.5s;
}
section.sns ul li a:hover .img-box::before {
  width: 100%;
}

section.sns ul li .img-box::after {
  content: "BLOG";
  font-size: 15px;
  font-family: "Exo 2", sans-serif;
  border: 1px solid #fff;
  border-radius: 40px;
  color: #fff;
  padding: 5px 30px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: 0.7s;
}
section.sns ul li a:hover .img-box::after {
  opacity: 1;
}

section.sns ul li .bottom {
  padding: 20px 0 20px 30px;
  box-sizing: border-box;
}
section.sns ul li .bottom p {
  font-size: 18px;
}
section.sns ul li .bottom p.color {
  color: #ff8342;
  font-size: 15px;
  margin-bottom: 10px;
}
section.sns ul li .bottom p.time {
  color: #999;
  font-size: 14px;
  margin-top: 30px;
}
section.sns ul li .bottom p.time i {
  margin-right: 5px;
  font-size: 0.9em;
}
  • 마지막 이미지의 오른쪽 margin은 필요없으니 따로 margin-right: 0; 해주었다.
  • 액자의 높이를 고정해주었고 튀어나온 부분은 잘라주었다.
  • before, after 가상 클래스를 이용해 hover했을 때 이미지에 2가지 애니메이션이 나타나게 해주었다.
/* footer style */
footer {
  border-top: 1px solid #999;
  padding: 30px 0;
}
footer .inner {
  width: 84%;
  margin: 0 auto;
}
/* 사진 액자 */
footer .inner .ft-logo {
  float: left;
  width: 14%;
}
/* 이미지 크기 */
footer .inner .ft-logo img {
  width: 100%;
}
footer .inner .address {
  float: left;
  margin-left: 100px;
  margin-top: 35px;
}
footer .inner .address li:first-child {
  font-weight: 700;
  margin-bottom: 10px;
}
footer .inner .address li:last-child {
  color: #999;
}

footer .inner .list {
  float: right;
  margin-top: 40px;
}
footer .inner .list li {
  float: left;
  margin-left: 80px;
}
footer .inner .list li:last-child {
  font-weight: 700;
}
footer .inner .list li a:hover {
  color: #ff8342;
  text-decoration: underline;
}
profile
Yohan
백엔드 개발자
이전 포스트

18일차 - html, css을 이용해서 사이트 만들기

다음 포스트

19일차 - animation, flexbox, 사이트에 반응형 디자인 추가

post-custom-banner

0개의 댓글