CSS & HTML 기초(6)

min_chan·2024년 3월 21일
CSShtml
0

CSS & HTML

목록 보기
6/10

18. Position(레이어, relative, absolute, fixed)

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>position(레이어)</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">
          <h1 class="logo">
            <a href="index.html">
              <img src="./assets/images/logo_w.png" alt="subway" />
            </a>
          </h1>

          <p>
            pararararararpararararararpararararararpararararararpararararararpa
          </p>
        </div>
      </header>
      <main id="container">
        <section class="main_etc">
          <div class="inner">
            <p>
              amdlkasmdlkmlkmslkdmlkasmdlkmaskldalksdmlkasmdlkmasdlkmsakldmkmklmadklmkamdlkasmdlkmlkmslkdmlkasmdlkmaskldalksdmlkasmdlkmasdlkmsakldmkmklmadklmkamdlkasmdlkmlkmslkdmlkasmdlkmaskldalksdmlkasmdlkmasdlkmsakldmkmklmadklmkamdlkasmdlkmlkmslkdmlkasmdlkmaskldalksdmlkasmdlkmasdlkmsakldmkmklmadklmkamdlkasmdlkmlkmslkdmlkasmdlkmaskldalksdmlkasmdlkmasdlkmsakldmkmklmadklmkamdlkasmdlkmlkmslkdmlkasmdlkmaskldalksdmlkasmdlkmasdlkmsakldmkmklmadklmkamdlkasmdlkmlkmslkdmlkasmdlkmaskldalksdmlkasmdlkmasdlkmsakldmkmklmadklmk
              amdlkasmdlkmlkmslkdmlkasmdlkmaskldalksdmlkasmdlkmasdlkmsakldmkmklmadklmk
              amdlkasmdlkmlkmslkdmlkasmdlkmaskldalksdmlkasmdlkmasdlkmsakldmkmklmadklmk
              amdlkasmdlkmlkmslkdmlkasmdlkmaskldalksdmlkasmdlkmasdlkmsakldmkmklmadklmk
              amdlkasmdlkmlkmslkdmlkasmdlkmaskldalksdmlkasmdlkmasdlkmsakldmkmklmadklmk
              amdlkasmdlkmlkmslkdmlkasmdlkmaskldalksdmlkasmdlkmasdlkmsakldmkmklmadklmk
              amdlkasmdlkmlkmslkdmlkasmdlkmaskldalksdmlkasmdlkmasdlkmsakldmkmklmadklmk
              amdlkasmdlkmlkmslkdmlkasmdlkmaskldalksdmlkasmdlkmasdlkmsakldmkmklmadklmk
            </p>
            <div class="cover">layer</div>
          </div>
        </section>
        <section class="main_test">
          <p>
            amdlkasmdlkmlkmslkdmlkasmdlkmaskldalksdmlkasmdlkmasdlkmsakldmkmklmadklmkamdlkasmdlkmlkmslkdmlkasmdlkmaskldalksdmlkasmdlkmasdlkmsakldmkmklmadklmkamdlkasmdlkmlkmslkdmlkasmdlkmaskldalksdmlkasmdlkmasdlkmsakldmkmklmadklmkamdlkasmdlkmlkmslkdmlkasmdlkmaskldalksdmlkasmdlkmasdlkmsakldmkmklmadklmkamdlkasmdlkmlkmslkdmlkasmdlkmaskldalksdmlkasmdlkmasdlkmsakldmkmklmadklmkamdlkasmdlkmlkmslkdmlkasmdlkmaskldalksdmlkasmdlkmasdlkmsakldmkmklmadklmkamdlkasmdlkmlkmslkdmlkasmdlkmaskldalksdmlkasmdlkmasdlkmsakldmkmklmadklmk
          </p>
        </section>
      </main>
    </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: 1280px;
  height: 1500px;
}

/* position: fixed; 창고정 레이어 */
/* 크기는 내용만큼 줄어듬 */
/* position: fixed;사용 시 위치속성을 안적으면 위치가 달라질 수 있음 */
/* fixed레이어는 창기준이므로 #wrap의 min-width 적용되지 않으며 직접 적어야함 */
#header {
  background: #ddd;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 9999;
  min-width: 1280px;
}

#header .inner {
  width: 1200px;
  height: 150px;
  border: 1px solid red;
  margin: 0 auto;
  /* 앱솔 요소의 기준 */
  position: relative;
  z-index: 0;
}

/* position: absolute; 걸면 제자리에서 공중에 뜸 */
/* 크기가 내용만큼 줄어듬 */
/* 인라인 요소에 앱솔, fixed 사용 시 블럭으로 변경됨 */
/* 포지션으로 떠있는 요소는 수직 방향 인접이 아니므로 마진 병합 없음 */
/* left top right bottom 위치 속성을 적으면 기준 요소를 따라 이동 됨 */
/* 앱솔 요소의 바깥에 기준이 없으면 창 기준 */
/* 앱솔 요소를 감싸고 있는 바깥 요소에 기준줄 수 있음 */
/* 앱솔 요소의 기준은 먼저 감싸고 있는 요소에 position속성이 있으면 기준이 됨 */
/* right bottom 사용 시 요소 기준점이 우하단으로 변경되며 margin방향도 맞춰야함 */
/* 포지션 요소 가운데 정렬: left: 50% top:50% transform: translate(-50%, -50%); */
/* 포지션 앱솔 요소는 기준요소에 height이 없어도 기준 요소 높이만큼 height:100%가능 */
/* 포지션 요소는 기준 요소의 패딩이 안먹음(공중에 떠있으므로) */
/* 포지션 앱솔 요소의 크기를 width,height없이 left, right, top, bottom으로 잡을 수 있음 */
/* 포지션 요소의 순서는 z-index:auto(기본 값)이므로 나중에 나온 레이어가 위로 쌓임 */
/* z-index: 의 크기가 클 수록 가장 위에 쌓인다. */
/* 스크롤 시 컨텐츠보다 무조건 위에 떠있어야되는 레이어는 z-index:9999, 1000등 매우 큰값으로 세팅하자 음수로 세팅할 경우 가장 뒤로 쌓인다*/
/* z-index 음수 사용 시 body(바닥)까지 내려가며 클릭 안됨. */
/* 기준 안에서 z-index 음수로 하나의 요소를 가장 아래로 배치할 경우 
- 기준 요소에 z-index있어야 하며 아래로 배치할 요소에 z-index:-1사용
- 기준 요소에 z-index가 없으면 body까지 내려간다. */
#header .logo {
  border: 3px solid red;
  position: absolute;
  /* margin-top: 40px; */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  /* margin-right: 100px;
  margin-bottom: 50px; */
}

#header .logo img {
  max-width: none;
}

#header .inner::after {
  content: '';
  position: absolute;
  left: 30px;
  right: 30px;
  top: 30px;
  bottom: 30px;
  border: 3px solid black;
}

#header p {
  font-size: 30px;
  background: greenyellow;
  position: absolute;
  left: 0;
  top: 50%;
}

/* 헤더가 flex구조인 경우 컨테이너에서 패딩으로 밀어줌 */
#container {
  padding-top: 150px;
}

/* position:relative는 자신의 원래 위치를 기억하는 특수 레이어 */
/* 앱솔 요소의 기준이 필요할 경우 사용 */
/* position:relative 적으러 갔을 때 position속성이 있는경우 그냥 놔두면 기준이 됨*/
.main_etc .inner {
  position: relative;
  width: 1200px;
  height: 500px;
  border: 1px solid red;
  margin: 0 auto;
}

.main_etc .inner p {
  font-size: 24px;
}

.main_etc .inner .cover {
  position: absolute;
  left: 0;
  top: 0;
  width: 300px;
  height: 300px;
  background: yellowgreen;
}

.main_test {
  border: 10px solid red;
}

.main_test p {
  font-size: 30px;
}

18-1. Position(레이어, Sticky)

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"
    /> -->

    <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=Montserrat: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" />
    <link rel="stylesheet" href="./css/sub.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">
      <main id="container" class="network">
        <div class="sub_visual">
          <h2>Business network</h2>
        </div>
        <div class="lnb_wrap">
          <ul class="lnb">
            <li>
              <a href="#">History</a>
            </li>
            <li>
              <a href="#">Vision </a>
            </li>
            <li>
              <a href="#">PR</a>
            </li>
            <li>
              <a href="#">IR</a>
            </li>
            <li class="active">
              <a href="#">Network</a>
            </li>
          </ul>
        </div>
        <div class="contents">
          <div class="inner">
            <div class="sub_tit">
              <h3>건자재 유통</h3>
              <p>평범한 일상을 새롭게! 유진의 다양한 이야기를 만나보세요.</p>
            </div>
            <ul class="sub_tab">
              <li class="active">
                <!-- 페이지 이동 시 a태그 아니면 버튼 -->
                <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>
          </div>
        </div>
      </main>
    </div>
  </body>
</html>

css

/* 컬러 변수 */
:root {
  --point-color1: #0042bf;
  --point-color2: #9858f5;
  --txt-color-400: #ccc;
  --txt-color-500: #111;
  --txt-color-600: #000;
}

#container {
  /* 서브 lnb가 길 경우 밖으로 나가면 스크롤이 나오며 스크롤하면 100% 배경이 짤리므로 hidden 설정 */
  /* position:sticky요소 밖에 overflow사용 불가 */
  /* overflow: hidden; */
}

/* 서브 비주얼  */

.sub_visual {
  height: 550px;
  background: url(../assets/images/visual02.jpg) no-repeat 50% 0 / cover;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 100px;
}

.sub_visual h2 {
  font-size: 70px;
  color: #fff;
  font-weight: 700;
  padding: 0px 40px;
}

/* lnb */
.lnb_wrap {
  border-bottom: 1px solid #ddd;
  background: #fefefe;
}

.lnb {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  justify-content: center;
  /* flex사용 시 gap 사용 */
  gap: 0 50px;
  position: relative;
}

.lnb li {
}

.lnb a {
  display: block;
  line-height: 79px;
  font-weight: 500;
  /* 크기를 늘리면서 간격을 넓히려면 패딩 사용 */
  padding: 0 30px;
}

.lnb li.active a {
  color: var(--point-color1);
  position: relative;
}

/* 글자 밑 하단 바 생성하기 */
.lnb li.active a::after {
  content: '';
  position: absolute;
  width: 100px;
  height: 2px;
  bottom: 0; /* 하단 정렬 추가 */
  left: 0; /* 좌측 정렬 추가 */
  background: var(--point-color1);
}

/* network.html */
.network {
  overflow: hidden;
}

.contents {
  background: #fefefe;
  padding: 120px 0 200px;
}

.contents .inner {
  max-width: 1200px;
  padding: 0 40px;
  margin: 0 auto;
}

/* 서브 제목 */
.sub_tit {
  text-align: center;
  margin-bottom: 80px;
}

.sub_tit h3 {
  font-size: 46px;
  content: var(--txt-color-600);
  font-weight: 700;
}

.sub_tit p {
  color: var(--txt-color-600);
  margin-top: 30px;
}

.sub_tab {
  display: flex;
}

.sub_tab li {
  /* 메뉴(li)개수가 다르므로 너비 100%로 설정 시 flex-shrink:1 기본 설정으로 자동으로 줄여준다.*/
  width: 100%;
  border: 1px solid #ddd;
  border-right: none;
}

/* .을 붙여서 사용하면 자기 자신 */
.sub_tab li.active {
  background: var(--point-color1);
  box-shadow: 3px 3px 20px rgba(154, 185, 243, 0.62);
}
.sub_tab li.active a {
  color: #fff;
}

.sub_tab li:last-child {
  border-right: 1px solid #ddd;
  font-weight: 500;
}

.sub_tab a {
  display: block;
  line-height: 80px;
  text-align: center;
  font-size: 20px;
}

/* social페이지 */
.social .sns_wrap {
  display: flex;

  justify-content: space-between;
  align-items: flex-start;
  margin-top: 126px;
}

.social .sns_wrap .sns_menu {
  position: sticky;
  top: 126px;
  border: 5px solid black;
}

.social .sns_wrap li {
  margin-bottom: 50px;
}

.social .sns_menu a {
  font-size: 30px;
  color: #ccc;
  font-weight: 700;
}

.social .sns {
  width: 65%;
  display: flex;
  flex-wrap: wrap;
}

.social .sns li {
  /* 2컬럼 이므로 8% / 2 만큼 빼준다. */
  width: 46%;
  padding: 150px 0;
}

.social .sns li:nth-child(odd) {
  margin-right: 8%;
}

.social .sns li:nth-child(even) {
  margin-top: 80px;
}
.social .sns_wrap .sns {
  border: 5px solid red;
  width: 65%;
}

.network .sub_visual {
  background-image: url(../assets/images/visual07.jpg);
}

/* lnb용 분기점 */
/* 768이상에서 이미 내용이 넘쳐 스크롤바가 나오므로 좀 더 미리 분기점 처리 */
@media (max-width: 780px) {
  .lnb_wrap {
    /* 스크롤로 처리 */
    overflow: auto;
    /* .lnb의 크기를 내용만큼 줄어들게 하여 margin 0 auto가 작동하도록*/
    display: flex;
  }
  .lnb {
    gap: 0;
    /* justify-content: center; 는 창크기가 줄었을 때 좌우 측으로 나가버림 */
    justify-content: flex-start;
  }
  .lnb a {
    padding: 0 16px;
    font-size: 16px;
  }
}

/* 모바일 분기점 */
@media (max-width: 767px) {
  .sub_visual {
    height: 270px;
    padding-top: 80px;
  }

  .sub_visual h2 {
    font-size: 32px;
    text-align: center;
  }

  .contents {
    padding: 60px 0;
  }

  .contents .inner {
    padding: 0 18px;
  }

  .sub_tit {
    margin-bottom: 40px;
  }

  .sub_tit h3 {
    font-size: 24px;
  }
  .sub_tit p {
    font-size: 16px;
    margin-top: 20px;
  }

  .sub_tab a {
    font-size: 15px;
    line-height: normal;
    word-break: break-all;
    height: 60px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .social .sns_menu {
    flex-wrap: wrap;
  }

  .social .sns_menu {
    /* 포지션 초기화 */
    position: static;
  }

  .social .sns {
    width: 100%;
  }

  .social .sns li {
    padding: 50px 0;
  }
}

배운점

1. position-sticky가 적용 안되는 경우

  • position-sticky요소 바깥 쪽에 overflow를 사용하면 sticky가 적용이 안된다!!
  • flex 아이템인 경우 align-items: flex-start;로 높이가 줄어야한다!!

2. 단위가 없는 css

    1. z-index: 9999
    1. line-height: 1.5
    1. font-weight: 700
  1. 숫자 0일 경우
profile
min_chan
이전 포스트

CSS & HTML 기초(5)

다음 포스트

CSS & HTML 기초(7)

0개의 댓글