CSS & HTML 기초(5)

min_chan·2024년 3월 20일
CSShtml
0

CSS & HTML

목록 보기
5/10
post-thumbnail

16. 기아 멤버스 하단

html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <!-- 반응형 세팅이 아닐경우 (데스크탑) 뷰 포트 크기 고정해야함 기본 그리드 + 80정도-->
    <meta name="viewport" content="width = 1320" />
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0" /> -->
    <!-- ios 사파리 전화번호 링크 컬러 변경못하게  -->
    <!-- <meta name="format-detection" content="telephone=no" /> -->
    <meta
      name="desciption"
      content="기아 멤버스 프로그램인 기아멤버스 사이트 메인"
    />
    <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">
      <nav id="gnb_wrap"></nav>
      <main id="container">
        <section class="main_channel">
          <div class="inner">
            <div class="tit_wrap">
              <!-- 섹션 제목 h2 -->
              <h2>All about Kia</h2>
              <p>Kia의 다양한 채널과 함께 하세요.</p>
            </div>
            <ul class="channel">
              <li>
                <a href="#">
                  <span class="blind">MyKia</span>
                </a>
              </li>
              <li>
                <!-- target="_blank" title="새창 열림" 두개는 무조건 같이 쓰임 -->
                <a href="#" target="_blank" title="새창 열림">
                  <span class="blind">KIA</span>
                </a>
              </li>
              <li>
                <!-- target="_blank" title="새창 열림" 두개는 무조건 같이 쓰임 -->
                <a href="#" target="_blank" title="새창 열림">
                  <span class="blind">carpience</span>
                </a>
              </li>
              <li>
                <!-- target="_blank" title="새창 열림" 두개는 무조건 같이 쓰임 -->
                <a href="#" target="_blank" title="새창 열림">
                  <span class="blind">카카오 소통채널</span>
                </a>
              </li>
              <li>
                <!-- target="_blank" title="새창 열림" 두개는 무조건 같이 쓰임 -->
                <a href="#" target="_blank" title="새창 열림">
                  <span class="blind">페이스북</span>
                </a>
              </li>
              <li>
                <!-- target="_blank" title="새창 열림" 두개는 무조건 같이 쓰임 -->
                <a href="#" target="_blank" title="새창 열림">
                  <span class="blind">인스타그램</span>
                </a>
              </li>
            </ul>
          </div>
        </section>
      </main>
    </div>
  </body>
</html>

css
/* 컬러 변수 */
:root {
  --point-color1: #5d7d2b;
  --point-color2: #c7b19b;
  --txt-color-400: #999;
  --txt-color-500: #6b7376;
  --txt-color-600: #05141f;
}

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

#container .main_channel {
  height: 600px;
  background: url(images/img_main_channer.jpg) no-repeat center top / cover;
  padding-top: 85px;
}

#container .tit_wrap {
  text-align: center;
}

.main_channel .tit_wrap h2 {
  font-size: 38px;
  color: #fff;
  margin-bottom: 15px;
}

.tit_wrap p {
  font-size: 14px;

  color: #fff;
}

.main_channel .channel {
  margin-top: 60px;
  justify-content: space-around;

  display: flex;
}

.main_channel .channel li a {
  display: block;

  width: 84px;
  height: 64px;
  display: flex;
  align-items: center;
}

/* 스플릿 카우 사용해서 위치 구할 수 있음!! */
.main_channel .channel a::after {
  content: '';

  width: 100%;
  height: 28px;
  background: url(images/icon_channer_sns.png) no-repeat 0 -64px;
}

.main_channel .channel li:nth-child(2) a {
  width: 80px;
}

.main_channel .channel li:nth-child(2) a::after {
  height: 20px;
  background-position: -82px 0;
}

.main_channel .channel li:nth-child(3) a {
  width: 70px;
}

.main_channel .channel li:nth-child(3) a::after {
  height: 64px;
  background-position: -254px 0;
}

.main_channel .channel li:nth-child(4) a {
  width: 57px;
}

.main_channel .channel li:nth-child(4) a::after {
  height: 52px;
  background-position: -334px 0;
}

.main_channel .channel li:nth-child(5) a {
  width: 54px;
}

.main_channel .channel li:nth-child(5) a::after {
  height: 54px;
  background-position: -402px 0;
}

.main_channel .channel li:nth-child(6) a {
  width: 54px;
}

.main_channel .channel li:nth-child(6) a::after {
  height: 54px;
  background-position: -466px 0;
}

17.네이버(검색 필드)

html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <!-- 반응형 세팅이 아닐경우 (데스크탑) 뷰 포트 크기 고정해야함 기본 그리드 + 80정도-->
    <!-- <meta name="viewport" content="width = 1320" /> -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- ios 사파리 전화번호 링크 컬러 변경못하게  -->
    <meta name="format-detection" content="telephone=no" />
    <meta
      name="description"
      content="네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요"
    />
    <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"
    />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="http://test123123.dothome.co.kr" />
    <meta property="og:title" content="네이버" />
    <meta
      property="og:description"
      content="네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요"
    />
    <meta
      property="og:image"
      content="http://test123123.dothome.co.kr/images/20230315195155CAKTKJ.jpeg"
    />

    <link rel="stylesheet" href="../css/common.css" />
    <link rel="stylesheet" href="../css/main.css" />
    <!-- main.css가 덮어씀 그래서 큰걸 아래에 배치 해야함-->

    <!-- 파비콘 연결 -->
    <!-- <link rel="icon" href="./images/favicon.jpeg" />
    <link rel="apple-touch-icon-precomposed" href="images/favicon.jpeg" /> -->
    <!--  -->
  </head>
  <body>
    <div id="skip_navi">
      <a href="#container">본문 바로가기</a>
    </div>
    <div id="wrap">
      <header id="header">
        <div class="inner">
          <!-- 폼은 무조건 div로 감아야됨 -->
          <div class="search_area">
            <!-- 검색 영역 - 폼 필 레 -->
            <form action="">
              <fieldset>
                <legend>검색</legend>
                <!-- flex 구조는 자식 요소에 적용됨 -->
                <div class="search_wrap">
                  <!-- 모바일 자판의 아이콘이 돋보기로 변경됨 -->
                  <!-- 입력필드는 <label>이 들어가지 않으므로 title로 설명 넣어야함 -->
                  <input
                    type="search"
                    title="검색어를 입력해주세요"
                    placeholder="검색어를 입력해주세요"
                  />
                  <!-- 입력 필드의 데이터를 서버로 전송 -->
                  <button type="submit" class="search_btn">
                    <span class="blind">search button</span>
                  </button>
                </div>
              </fieldset>
            </form>
          </div>
        </div>
      </header>
    </div>
  </body>
</html>

css
/* 컬러 변수 */
:root {
  --point-color1: #03c75a;
  --point-color2: #9858f5;
  --txt-color-400: #404040;
  --txt-color-500: #101010;
  --txt-color-600: #080808;
}

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

#header .inner {
  max-width: 1340px;
  height: 267px;
  border: 1px solid red;
  margin: 0 auto;
  padding: 0 30px;
  display: flex;
  /* 좌우 정렬 */
  justify-content: center;
  /* 수직 정렬 */
  align-items: center;
}

#header .search_area {
  /* 반응형이면 맥스 위드 사용 */
  max-width: 706px;
  /* flex아이템이라 위드 100으로 해줘야 맥스 위드까지 다참  */
  width: 100%;
  border: 1px solid var(--point-color1);
  /* 높이가 60이므로 절반주면 반원 */
  border-radius: 30px;
}

#header .search_area .search_wrap {
  padding-left: 28px;
  display: flex;
  justify-content: space-between;
}

/* input은 속성 선택자를 통해 선택하기(type별로 디자인이 동일하므로) */
#header .search_area input[type='search'] {
  height: 58px;
  font-size: 21px;
  font-weight: 700;
  color: #000;
  max-width: 480px;
  width: 100%;
  border: none;
}

#header .search_area .search_wrap .search_btn {
  height: 58px;
  padding: 0 27px 0 10px;
  border: none;
  background: none;
  display: flex;
  align-items: center;
}

#header .search_area .search_wrap .search_btn::after {
  content: '';
  width: 25px;
  height: 25px;
  /* svg배경 컬러 변경하기 : -webkit-mask */
  -webkit-mask: url(../assets/images/svgexport-1.svg) no-repeat 0 0 /25px;
  mask: url(../assets/images/svgexport-1.svg) no-repeat 0 0 /25px;
  background: var(--point-color1);
}
profile
min_chan
github.com/kangminchan99
이전 포스트

CSS & HTML 기초(4)

다음 포스트

CSS & HTML 기초(6)

0개의 댓글