<TIL> CSS_홈페이지 제작

104467 단어 CSS TIL CSS

2021.07.28

CSS 사이트 제작 실습 (애니메이션 ❌)

예제 1번 : 포토 아카데미 사이트

HTML

  <body>
    <div id="wrap">
      <header>
        <h1 class="logo">
          <img src="images/logo.png" alt="logo" />
        </h1>
        <nav class="top_menu">
          <ul>
            <li><a href="#">로그인</a></li>
            <li><a href="#">회원가입</a></li>
            <li><a href="#">공지사항</a></li>
          </ul>
        </nav>
        <nav class="main_menu">
          <ul>
            <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>
        </nav>
      </header>
      <div id="visual"></div>
      <div id="content" class="clear">
        <aside>
          <nav>
            <dl>
              <dt>사진이론</dt>
              <dd><a href="#">카메라 동작 원리</a></dd>
              <dd><a href="#">무조건 찍어보자!</a></dd>
              <dd><a href="#">피사체의 배경</a></dd>
              <dd><a href="#">조리개와 심도</a></dd>
              <dd><a href="#">카메라 촬영 모드</a></dd>
            </dl>
          </nav>
        </aside>
        <section>
          <h2>카메라 동작원리</h2>
          <p>
            DSLR 카메라에서 DSLR은 “Digital Single Lens Reflex”의 약어로써
            우리말로는 디지털 일안 반사식 카메라을 의미합니다. DSLR은 디지털
            카메라로써 카메라 내부에 들어온 빛이 상단의 펜타프리즘을 통하여
            뷰파인더에 맺히게 되어 셔터를 누르기 전에 뷰 파인더를 통하여
            피사체를 확인할 수 있게 됩니다.
          </p>
          <div class="imgbox">
            <img src="images/dslr.png" alt="camera" />
          </div>
          <p>
            [그림 1]은 DSLR 카메라에서 셔터를 누르기 전의 상태를 보여주는데
            렌즈를 통해 들어오는 빛은 카메라 내부에서 다음과 같은 과정을 거치게
            됩니다.
          </p>
          <ol>
            <li>빛이 카메라 렌즈를 통과합니다.</li>
            <li>빛이 반사 거울에 반사되어 위쪽으로 향합니다.</li>
            <li>빛이 펜타프리즘 거울에 반사되어 뷰파인더로 향합니다.</li>
            <li>들어온 빛에 의해 뷰파인터들 통하여 피사체를 볼 수 있습니다.</li>
          </ol>
        </section>
      </div>
      <footer>
        <div class="inner">
          <div class="btm_logo">
            <img src="images/footer_logo.png" alt="footer_logo" />
          </div>
          <ul>
            <li>서울시 강남구 삼성동 1234 우:123-1234</li>
            <li>TEL:031-123-1234 Email : [email protected]</li>
            <li>COPYRIGHT (C) 루바토 ALL RIGHTS RESERVED</li>
          </ul>
        </div>
      </footer>
    </div>
  </body>

CSS

@charset "utf-8";

body,
h1,
h2,
h3,
ul,
li,
ol,
dl,
dd,
dt,
p {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: #333;
}

.inner {
  width: 1140px;
  margin: 0 auto;
}

.clear::after {
  content: '';
  display: block;
  clear: both;
}

header {
  height: 100px;
  position: relative;
  width: 1140px;
  margin: 0 auto;
}
.logo {
  float: left;
}
.logo img {
  margin-top: 19px;
}
.top_menu {
  position: absolute;
  top: 10px;
  right: 0;
}
.top_menu ul {
  font-size: 12px;
}
.top_menu li {
  float: left;
}
.top_menu li::after {
  content: '|';
  color: #ddd;
  padding: 0 10px;
}
.top_menu li:last-child::after {
  display: none;
}
.main_menu {
  float: right;
}
.main_menu ul {
  font-size: 18px;
  margin-top: 60px;
}
.main_menu li {
  float: left;
  padding: 0 40px;
}
.main_menu li:hover a {
  color: chocolate;
}
.main_menu li:last-child {
  padding-right: 0;
}
#visual {
  height: 280px;
  background: url(images/main_img.png) no-repeat center / cover;
}
#content {
  width: 1140px;
  margin: 15px auto;
}
#content aside {
  float: left;
  width: 234px;
}
#content aside dt {
  background-color: #516e7f;
  color: #5df0c0;
  line-height: 3;
  padding-left: 10px;
  box-sizing: border-box;
  font-size: 18px;
}
#content aside dd {
  line-height: 3;
  border-bottom: 1px dashed #ddd;
  padding-left: 10px;
  box-sizing: border-box;
}
#content section {
  float: right;
  width: 850px;
}
#content section h2 {
  margin: 10px 0 30px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 12px;
}
#content section p {
  line-height: 2;
  font-size: 14px;
  color: #333;
}
#content section .imgbox {
  text-align: center;
  padding: 50px;
}
#content section ol {
  margin-top: 30px;
  padding-left: 30px;
  line-height: 2;
}
footer {
  background-color: #2c2a29;
  height: 140px;
  position: relative;
  margin-top: 100px;
}
footer .btm_logo {
  float: left;
  margin: 40px 0;
}
footer ul {
  float: left;
  margin: 40px 100px;
}
footer ul li {
  color: #fff;
}

✋ 주목할 점!

본문단의 좌측 메뉴바를 구성하기 위해 보통의 ul>li가 아닌 dl>dt>dd를 사용해서 리스트 제목과 하단 리스트를 구성했다는 점
header와 content는 화면의 전체까지 너비를 가질 필요가 없지만,
visual영역과 footer부분은 화면 100% 너비 출력을 요하여
추가로 inner 박스를 사용하여 inner 박스에 이미지 또는 배경색을 입혀주었다.
본문에 이미지는 인라인 속성이기 때문에 중앙정렬을 위해 imgbox라는 div로 감싸주어 처리했다.
(position도 가능하겠지만 이번 예제에서는 코드 작성 편의를 위해 위 방법을 사용했다.)

예제 2번 : 현대 스틸 사이트 리뉴얼

HTML

  <body>
    <div id="wrap">
      <header>
        <h1>
          <img src="source/images/logo.gif" alt="현대스틸" />
        </h1>
        <nav class="top_menu">
          <ul>
            <li><a href="#">sitemap</a></li>
            <li><a href="#">contact us</a></li>
            <li><a href="#">korean</a></li>
            <li><a href="#">english</a></li>
          </ul>
        </nav>
      </header>
      <div id="inner">
        <nav class="main_menu">
          <ul>
            <li><a href="#">회사소개</a></li>
            <li><a href="#">제품소개</a></li>
            <li><a href="#">사이버 홍보실</a></li>
            <li><a href="#">e-비즈니스</a></li>
            <li><a href="#">고객센터</a></li>
          </ul>
        </nav>
      </div>
      <div id="visual"></div>
      <div id="content" class="clear">
        <div class="inner">
          <section class="news">
            <h3 class="sub_title"><span>What's</span> New</h3>
            <div class="pop clear">
              <p><a href="#"> -more- </a></p>
            </div>
            <ul class="news_list">
              <li>
                제 9기 결산 공고 2020-03-25
                <span>2021.07.28</span>
              </li>
              <li>
                제 8기 결산 공고 2020-02-25
                <span>2021.07.28</span>
              </li>
              <li>
                제 7기 결산 공고 2020-01-25
                <span>2021.07.28</span>
              </li>
              <li>
                제 6기 결산 공고 2019-12-25
                <span>2021.07.28</span>
              </li>
            </ul>
          </section>
          <section class="product">
            <h3 class="sub_title"><span>Product</span> Introduction</h3>
            <div class="imgbox">
              <img src="source/images/small_banner01.jpg" alt="제품" />
            </div>
          </section>
          <section class="business">
            <h3 class="sub_title"><span>E-Business</span> Center</h3>
            <div class="imgbox">
              <img src="source/images/main_btn_bizplaza.gif" alt="1" />
              <img src="source/images/main_btn_procurement.gif" alt="2" />
              <img src="source/images/main_btn_inspection.gif" alt="3" />
            </div>
          </section>
        </div>
      </div>
      <footer>
        <div class="inner">
          <ul class="btm_menu clear">
            <li><a href="#">개인정보취급방침</a></li>
            <li><a href="#">개인정보처리방침</a></li>
          </ul>
          <ul class="copy">
            <li>
              서울특별시 강남구 강남대로 308, 10층(랜드마크타워) 대표번호 02)
              6191-8555
            </li>
            <li>
              Copyright (c) 2015 HYUNDAI SPECIAL STEEL. ALL RIGHTS RESERVED.
            </li>
          </ul>
        </div>
      </footer>
    </div>
  </body>

CSS

@charset "utf-8";

header,
h1,
h2,
h3,
p,
ul,
li {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}
a {
  text-decoration: none;
}
.clear::after {
  content: '';
  display: block;
  clear: both;
}
header {
  width: 1050px;
  margin: 0 auto;
  height: 80px;
  overflow: hidden;
}
header h1 {
  float: left;
  margin: 24.5px 0;
}
.top_menu {
  float: right;
  margin-top: 10px;
}
.top_menu ul {
  font-size: 12px;
}
.top_menu ul li {
  float: left;
}
.top_menu ul li::after {
  content: '|';
  padding: 0 10px;
}
.top_menu ul li:last-child::after {
  display: none;
}
.top_menu ul li a {
  color: #333;
}
#inner {
  background-color: #0b2972;
  height: 40px;
}
.main_menu {
  width: 800px;
  margin: 0 auto;
}
.main_menu ul li {
  float: left;
  padding: 0 47px;
  line-height: 40px;
}
.main_menu ul li a {
  color: #fff;
}
.main_menu ul li:hover a {
  color: #ffb400;
}
#visual {
  height: 385px;
  background: url(source/images/banner02.jpg) no-repeat center / cover;
}
#content {
  width: 1050px;
  margin: 40px auto;
}
#content section {
  float: left;
}
#content section .sub_title {
  margin-bottom: 10px;
}
#content section .sub_title span {
  color: #0b2972;
}
.news {
  width: 280px;
}
.news_list {
  font-size: 14px;
}
.news_list li {
  line-height: 2;
  color: #555;
}
.news_list li span {
  float: right;
}
.pop {
  margin-bottom: 10px;
}
.pop p {
  float: right;
}
.pop p a {
  color: #555;
}
.product {
  width: 360px;
  margin: 0 40px;
}
.business {
  width: 280px;
}
footer {
  background-color: #ddd;
  height: 130px;
}
footer .inner {
  width: 1050px;
  margin: 0 auto;
}
.btm_menu li {
  float: left;
  margin: 30px 0;
}
.btm_menu li:first-child::after {
  content: '|';
  padding: 0 10px;
  color: #ccc;
}
.btm_menu li a {
  color: black;
}
.copy {
  font-size: 12px;
}
.copy li {
  line-height: 2;
  color: #555;
}

✋ 주목할 점!

span 태그를 적절히 사용해서 해당 부분에 색을 바꾸기도 float을 주어 해당 부위만 다른 쪽에 위치시키기도 했다.
화면 100% 너비가 필요한 부분이 있어 inner div를 사용해 주었다.
본문을 세 부분으로 나누기 위해 section*3을 사용해 세 영역을 나누고 이후 각 section에 너비를 적절히 주어 content에 지정된 너비 안으로 들어가게 하여 가로로 정렬해준다.

예제 3번 : 웹 디자인 기능사 실제 예제 = 그린복지재단

HTML

  <body>
    <div id="wrap">
      <header class="clear">
        <h1 class="logo">
          <a href=""><img src="images/logo.gif" alt="그린복지재단" /></a>
        </h1>
        <nav>
          <ul class="gnb clear">
            <li>
              <a href="#">재단소개</a>
              <ul class="sub_menu">
                <li><a href="#">설립취지</a></li>
                <li><a href="#">연혁</a></li>
                <li><a href="#">찾아오시는길</a></li>
              </ul>
            </li>
            <li>
              <a href="#">후원하기</a>
              <ul class="sub_menu">
                <li><a href="#">국내후원</a></li>
                <li><a href="#">국외후원</a></li>
                <li><a href="#">맞춤후원</a></li>
              </ul>
            </li>
            <li>
              <a href="#">자료실</a>
              <ul class="sub_menu">
                <li><a href="#">서식자료실</a></li>
                <li><a href="#">사진자료실</a></li>
                <li><a href="#">후원양식</a></li>
              </ul>
            </li>
            <li>
              <a href="#">스토리</a>
              <ul class="sub_menu">
                <li><a href="#">웹진</a></li>
                <li><a href="#">보고서</a></li>
                <li><a href="#">나의 후원</a></li>
              </ul>
            </li>
          </ul>
        </nav>
      </header>
      <div id="visual">
        <ul class="slider">
          <li>
            <a href="#"> <img src="images/slider1.jpg" alt="1" /> </a>
          </li>
          <li>
            <a href="#"><img src="images/slider2.jpg" alt="2" /></a>
          </li>
          <li>
            <a href="#"><img src="images/slider3.jpg" alt="3" /></a>
          </li>
        </ul>
        <p class="caption">그린복지재단 방문을 환영합니다.</p>
      </div>
      <div id="content" class="clear">
        <section class="notify">
          <h3>공지사항</h3>
          <ul class="notice_list">
            <li>안녕하세요 그린복지재단입니다.<span>2021-07-28</span></li>
            <li>안녕하세요 그린복지재단입니다.<span>2021-07-28</span></li>
            <li>안녕하세요 그린복지재단입니다.<span>2021-07-28</span></li>
            <li>안녕하세요 그린복지재단입니다.<span>2021-07-28</span></li>
          </ul>
        </section>
        <section class="gallery">
          <h3>갤러리</h3>
          <div class="imgbox">
            <img src="images/thumb1.jpg" alt="1" />
            <img src="images/thumb2.jpg" alt="2" />
            <img src="images/thumb3.jpg" alt="3" />
          </div>
        </section>
        <section class="banner">
          <h3>베너</h3>
          <div class="imgbox">
            <img src="images/banner.jpg" alt="banner" />
          </div>
        </section>
      </div>
      <footer>
        <div class="btm_logo">
          <a href="#"><img src="images/logoBtm.gif" alt="btm" /></a>
        </div>
        <p class="copy">copyright <span>GREEN</span> All rights reserved</p>
        <select name="submit" id="site">
          <option value="family_site" selected>패밀리 사이트</option>
          <option value="naver">네이버</option>
          <option value="kakao">카카오</option>
          <option value="google">구글</option>
        </select>
      </footer>
    </div>
  </body>

CSS

@charset "UTF-8";
body,
h1,
h2,
h3,
p,
ul,
li {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}
a {
  color: #333;
  text-decoration: none;
}
#wrap {
  width: 1200px;
  margin: 0 auto;
}
.clear::after {
  content: '';
  display: block;
  clear: both;
}
header {
  height: 100px;
}
header .logo {
  float: left;
  margin-top: 30px;
}
header nav {
  float: right;
}
header .gnb > li {
  float: left;
  background-color: #3cb149;
  text-align: center;
  width: 180px;
  height: 50px;
  line-height: 50px;
  margin-top: 50px;
  position: relative;
}
header .gnb > li a {
  color: #fff;
}
header .gnb > li:hover {
  background-color: #1d8844;
  cursor: pointer;
}
header .gnb > li:hover .sub_menu {
  display: block;
}
.sub_menu {
  position: absolute;
  left: 0;
  top: 50px;
  width: 100%;
  display: none;
  z-index: 10;
}
.sub_menu li {
  background-color: #434748;
}
.sub_menu li:hover {
  background-color: rgb(105, 105, 105);
}
#visual {
  height: 300px;
  overflow: hidden;
  position: relative;
}
#visual .caption {
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: rgba(29, 136, 68, 0.7);
  color: #fff;
  width: 400px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  margin-left: -200px;
  margin-top: -25px;
  border-radius: 25px;
}
#content {
  height: 200px;
  padding: 20px 0 0;
}
#content section {
  float: left;
  width: 380px;
  box-sizing: border-box;
}
#content section h3 {
  color: #1d8844;
  border-bottom: 1px solid #1d8844;
  padding-bottom: 7px;
}
#content .notice_list {
  font-size: 14px;
  margin-top: 10px;
}
#content .notice_list li {
  line-height: 2.4;
}
#content .notice_list li span {
  float: right;
}
#content .gallery {
  margin: 0 28px;
}
.imgbox {
  margin-top: 20px;
  text-align: center;
}
footer {
  height: 100px;
}
.btm_logo {
  float: left;
  padding-top: 30px;
}
.copy {
  float: left;
  width: 800px;
  text-align: center;
  line-height: 100px;
}
.copy span {
  color: #3cb149;
}
#site {
  float: right;
  margin-top: 30px;
  padding: 10px;
  border: 1px solid #ccc;
  width: 200px;
}

✋ 주목할 점!

기존의 메뉴바에 서브리스트를 추가하여 마우스 hover시 나타나게 하였다.
visual 영역에 사진 위로 p 태그의 문단을 position을 이용해 띄우고 가운대로 정렬하였다.
footer 영역에 select box가 추가되어 선택할 수 있게 만들었다.

💡 서브리스트 만드는 법

서브리스트를 추가할 메인리스트의 각 li 태그안에 또 다른 ul>li를 추가한다.
css로 위치를 지정하기 위해 position을 사용해 메인리스트를 relative로 두고 absolute를 사용하여 위치를 지정하고 너비는 100%를 주어 메인리스트의 너비를 상속하도록 한다.
(참고로 메인리스트 스타일 지정시 ul>li로 지정해주어야 서브리스트의 li들이 선택되지 않고 메인리스트의 li에만 원하는 디자인이 적용된다.)
css의 위치와 디자인까지 지정되었으면 서브리스트 ul에 display: none;을 추가해주고 메인리스트 ul class 이름 > li:hover 서브리스트 class 이름 선택자에 display: block;을 추가해준다.

위와 같은 설정을 마치면 메인리스트에 마우스를 올려놓을때 해당 리스트에 포함되는 서브리스트가 나타나게된다.

(추가로 위 예제에서는 visual 사진 위의 문구를 올리기 위해 사용한 position에 의해 서브리스트의 position이 가려져서 z-index를 이용해 제일 위로 서브리스트를 올려놓았다. = z-index: 10;)

Author And Source

이 문제에 관하여(<TIL> CSS_홈페이지 제작), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@padd60/TIL-CSSPART6

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

SQL 문의 정렬 및 표준 단어별 모호 조회

시스템 사용자 이름sid의 vbs를 조회할 수 있습니다

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다