CSS & HTML 기초(4)

min_chan·2024년 3월 19일

CSS & HTML

목록 보기

4/10

14.아웃백(header, depth1)구현

html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <!-- 반응형 세팅이 아닐경우 (데스크탑) 뷰 포트 크기 고정해야함 기본 그리드 + 80정도-->
    <meta name="viewport" content="width = 1260" />
    <!-- ios 사파리 전화번호 링크 컬러 변경못하게  -->
    <!-- <meta name="format-detection" content="telephone=no" /> -->
    <meta name="desciption" content="OUTBACK STEAKHOUSE" />
    <title>아웃백 스테이크 하우스(OUTBACK STEAKHOUSE)</title>
    <!-- 웹 폰트 코드 먼저 연결해야함 -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <!-- 노토 산스 폰트 연결 -->
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap"
      rel="stylesheet"
    />
    <!-- 아이콘 폰트 연결 -->
    <!-- self closing규칙: </> : html5는 둘 다 적용 가능 -->
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,300,0,0"
    />

    <link rel="stylesheet" href="./common.css" />
    <link rel="stylesheet" href="./main.css" />
    <!-- main.css가 덮어씀 그래서 큰걸 아래에 배치 해야함-->
  </head>
  <body>
    <div id="skip_navi">
      <a href="#container">본문 바로가기</a>
    </div>
    <div id="wrap">
      <header id="header">
        <div class="inner">
          <h1 class="logo">
            <a href="index.html">
              <!-- 스크롤 시 로고 컬러가 변경되는 경우 css배경처리-->
              <img src="images/logo_white_type_02.png" alt="OUTBACK" />
            </a>
          </h1>
          <nav class="gnb_wrap">
            <ul class="gnb">
              <li>
                <a href="#">BRAND</a>
              </li>
              <li>
                <a href="#">MENU</a>
              </li>
              <li>
                <a href="#">MEMBERSHIP</a>
              </li>
              <li>
                <a href="#">BENEFIT</a>
              </li>
              <li>
                <a href="#">STORE</a>
              </li>
            </ul>
          </nav>
        </div>
      </header>
      <main id="container">
        <section class="main_slider">
          <!-- 이름을 지정해 줘야함 안보이더라도 -->
          <h2 class="blind">main banner</h2>
          <a href="#"
            ><img src="images/back_img1.jpeg" alt="bon &amp; bon"
          /></a>
        </section>
      </main>
    </div>
  </body>
</html>

css

/* 컬러 변수 */
:root {
  --point-color1: #be161e;
  --point-color2: #c7b19b;
  --txt-color-400: #999;
  --txt-color-500: #666;
  --txt-color-600: #222;
}

#wrap {
  /* min-width: 최소 너비를 지정하여 화면이 작아지더라도 짤림 방지  */
  /* 반응형이거나 아니거나의 차이는 min-width를 거냐 안거냐 */
  min-width: 1260px;
  height: 1500px;
}

/* 요소에 띄우는 속성이 적용되면 내용만큼 줄어든다. */
/* 그렇기 때문에 width 100% 적용 */
#header {
  /* fixed레이어는 창기준이므로 #wrap의 min-width가 작동하지 않으므로 직접 지정 */
  min-width: 1260px;
  position: fixed;
  left: 0;
  top: 0;
  background: rgba(52, 52, 54, 1);
  width: 100%;
  /* z-index는 단위 없음 */
  /* 다른 레이어 보다 무조건 위에 있도록 9999로 설정*/
  z-index: 9999;
}

#header .inner {
  width: 1180px;
  height: 100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

/* flex를 걸면 자식이 flex가 된다. 그래서 부모한테 걸어야됨*/
#header .gnb_wrap {
  margin-left: 80px;
}

#header .gnb {
  display: flex;
}

#header .gnb > li {
  /* 메뉴 구조에서 여백은 li에서 처리하여 클릭 영역을 구분해주는 것이 좋음 */
  padding: 0 15px;
}

/* 자식 선택자 */
#header .gnb > li > a {
  display: block;
  color: #fff;
  font-size: 19px;
  font-family: 'Akrobat', sans-serif;
  /* 메뉴에서 글자를 수직 정렬하며 높이 지정 시 px사용 */
  line-height: 100px;
  letter-spacing: 0.12em;
  position: relative;
}

#header .gnb > li > a::after {
  content: '';
  /* ::after는 인라인이지만 앱솔걸면 블럭이됨 */
  position: absolute;
  left: 0;
  /* 양수면 기준안으로 들어가고 음수면 기준 밖으로 나감 */
  bottom: 20px;
  /* 앱솔걸면 크기가 내용만큼 줄어드므로 100%로 늘려줌 */
  width: 100%;
  display: block;
  height: 3px;
  background: var(--point-color1);
  display: none;
}

/* 이중 리스트 구조에서 :hover는 li에서 해야 서브 메뉴를 같이 조작할 수 있으며 서브메뉴로 마우스가 이동해도 hover가 풀리지 않음 */
#header .gnb > li:hover > a::after {
  display: block;
}

/* 패딩은 밖에서 준다. */
#container {
  padding-top: 100px;
}

.main_slider {
  /* 헤더가 떠있으므로 인접이 아니며 main_slider에서 밖에 있는 메인 컨테이너까지 내려가므로 마진 병합임  */
  /* 그러므로 사용 불가 */
  /* margin-top: 100px; */

  /* 스크롤 바 가리기 */
  overflow: hidden;

  /* 포지션 앱솔의 기준 */
  position: relative;

  /* 안쪽요소가 모두 포지션 앱솔이면 높이가 0이 되며 높이를 지정해야함 */
  height: 900px;
}

/* 일반적으로 absolute를 쓸 경우, 기준이 될 부모에게 position: relative; 를 부여하고 원하는 위치를 지정 */
.main_slider a {
  position: absolute;
  left: 50%;
  top: 0;
  /* margin-left: -960px; */
  /* translate에 %는 요소 자신의 크기가 기준 */
  transform: translate(-50%);
}

.main_slider img {
  /* none으로 껐기 때문에 이미지가 줄지 않는다. */
  max-width: none;
}

15. 한화 생명(큰 이미지 & 꾸미는 이미지, 리뉴얼 전 주소)구현

html
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <!-- 반응형 세팅이 아닐경우 (데스크탑) 뷰 포트 크기 고정해야함 기본 그리드 + 80정도-->
    <meta name="viewport" content="width = 1140" />
    <!-- ios 사파리 전화번호 링크 컬러 변경못하게  -->
    <!-- <meta name="format-detection" content="telephone=no" /> -->
    <meta name="desciption" content="OUTBACK STEAKHOUSE" />
    <title>한화 생명</title>
    <!-- 웹 폰트 코드 먼저 연결해야함 -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <!-- 노토 산스 폰트 연결 -->
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap"
      rel="stylesheet"
    />
    <!-- 아이콘 폰트 연결 -->
    <!-- self closing규칙: </> : html5는 둘 다 적용 가능 -->
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,300,0,0"
    />

    <link rel="stylesheet" href="./common.css" />
    <link rel="stylesheet" href="./main.css" />
    <!-- main.css가 덮어씀 그래서 큰걸 아래에 배치 해야함-->
  </head>
  <body>
    <div id="skip_navi">
      <a href="#container">본문 바로가기</a>
    </div>
    <div id="wrap">
      <main id="container">
        <section class="main_recommand">
          <div class="inner">
            <div class="tit_wrap">
              <h2>01월의 추천상품</h2>
              <p>한화생명 온슈어가 드리는 추천상품입니다.</p>
            </div>
            <ul class="recommand">
              <li>
                <a href="#">
                  <em>저축보험</em>
                  <p>저축보험 vs 은행적금 어떤걸 가입할까?</p>
                </a>
              </li>
              <li>
                <a href="#">
                  <em>내게 맞는 보험 찾기</em>
                  <p>
                    보험 가입이<br />고민 되시는 분께<br /><strong
                      >꼭 맞는 보험</strong
                    >을<br />찾아드립니다
                  </p>
                </a>
              </li>
            </ul>
          </div>
        </section>
      </main>
    </div>
  </body>
</html>

css
/* 컬러 변수 */
:root {
  --point-color1: #eb6242;
  --point-color2: #c7b19b;
  --txt-color-400: #999;
  --txt-color-500: #333;
  --txt-color-600: #222;
}

#wrap {
  /* min-width: 최소 너비를 지정하여 화면이 작아지더라도 짤림 방지  */
  /* 반응형이거나 아니거나의 차이는 min-width를 거냐 안거냐 */
  min-width: 1140px;
  height: 6000px;
}

.main_recommand {
  height: 610px;
  /* fixed는 ios 사파리에서 안되며 (성능 이슈 때문에 막아놨음) */
  background: url(./images/mainBanner01.jpg) no-repeat center top / cover fixed;
  /* 100%는 이미지 크기가 줄어드므로 cover사용 */
  /* background-size: cover; */
  border: 1px solid red;
  padding-top: 61px;
}

.main_recommand .inner {
  width: 1060px;
  border: 1px solid blue;
  /* 가운데 정렬 */
  margin: 0 auto;
}

.main_recommand .tit_wrap {
  color: #fff;
  border: 1px solid pink;
  text-align: center;
}

.main_recommand .tit_wrap h2 {
  font-size: 40px;
}

.main_recommand .tit_wrap p {
  font-size: 18px;
}

.main_recommand .recommand {
  display: flex;

  /* 좌우는 justify 위 아래는 align */
  justify-content: center;
  margin-top: 30px;
}

.main_recommand .recommand li {
  background: #fff;
  width: 300px;
  border-radius: 5px;

  /* 안쪽 내용인 a는 네모 형태이므로 모서리를 가려줌 */
  overflow: hidden;
}

.main_recommand .recommand li + li {
  margin-left: 40px;
}

.main_recommand .recommand li:nth-child(1) {
  background: #f0f0f0 url(./images/icon-top0102.png) no-repeat bottom right;
}

.main_recommand .recommand li:nth-child(2) {
  background: #f0f0f0 url(./images/icon_searchResult.png) no-repeat bottom right;
}

.main_recommand .recommand a {
  display: block;
  height: 310px;
  padding: 30px 25px;
}

.main_recommand .recommand em {
  font-size: 16px;
  position: relative;
  padding-bottom: 20px;
  /* em은 인라인이므로 위아래 패딩이 제대로 작동하지 않음 */
  display: block;
}

.main_recommand .recommand em::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 16px;
  height: 3px;
  background: var(--point-color1);
}

.main_recommand .recommand p {
  font-size: 27px;
  color: var(--txt-color-600);
  margin-top: 10px;
  line-height: 1.2;
}

.main_recommand .recommand strong {
  color: var(--point-color1);
}

min_chan

github.com/kangminchan99

이전 포스트

CSS & HTML 기초(3)

다음 포스트

CSS & HTML 기초(4)

CSS & HTML

14.아웃백(header, depth1)구현

15. 한화 생명(큰 이미지 & 꾸미는 이미지, 리뉴얼 전 주소)구현

CSS & HTML 기초(3)

CSS & HTML 기초(5)

0개의 댓글