본문 바로가기
씹덕티스토리에코딩의등장이라

교보생명 이노스테이지 / 코리아리서치인터내셔널

by 희쨩 2024. 3. 27.

 

 

 

 

css 캐싱방지

  • 사이트에 최초 접속시 html, css, js, images, 폰트등의 자원이 캐시폴더에 다운로드된후 보여짐
  • 두번째 접속시는 캐시폴더에 있는 파일을 읽으므로 좀더 빠르게 화면이 로딩
  • 우리가 작성하는 css파일, 직접작성하는 js파일에 캐싱방지를 위해 타임스탬프코드 사용
  <!-- 타임스탬프 코드로 캐싱방지 -->
  <link rel="stylesheet" href="css/common.css?v=<?php echo time(); ?>">
  <link rel="stylesheet" href="css/main.css?v=<?php echo time(); ?>">

 

 

 

데이터 이미지의 비율이 레이아웃과 같거나 다를 경우

  /* 가로,세로중 작은쪽을 맞추고 큰쪽은 가려짐 */
 .main_newsroom .newsroom .img_wrap img {
   object-fit: cover;
   width:100%;
   height: 100%;
 }

 

 

게시물 말줄임 css

-webkit- 크롬, 사파리, 엣지

-moz- 파이어폭스

-ms- IE

-o- 오페라

 

.main_news .news .tit {
  font-size: 25px;
  /* 크롬,사파리(파폭,오페라도됨) 말줄임처리용 display */
  display: -webkit-box;
  /* 글자의 흐름을 세로방향으 */
  -webkit-box-orient: vertical;
  /* 말줄임기호나올 줄수 */
  -webkit-line-clamp: 3;
  overflow: hidden;
}

 

rem단위 적용 안드로이드 크롬조건

 

  • 안드로이드 크롬 조건: 문단 글자수 50개이상, 폰트크기 50px미만,
    바깥쪽요소에 높이가 없어야 브라우저설정에서 폰트크기 변경시 rem단위 적용됨
  • iOS 사파리, pc 크롬, 삼성인터넷 등은 조건없음
html {font-size:62.5%;}
body {font-size:1.5rem;}

 

 

rem 단위 사용 케이스

 

  • rem단위 사용자제하는것이 좋으며 사용할 경우 font-size에만 사용할 것
  • 레이아웃속성(padding, margin, width, height, left, top)에 사용할 경우 모바일레이아웃에서 레이아웃이 깨지므로 컨텐츠 사용불가
  • 블로그, 언론사, 메모앱등 텍스트기반의 사이트 또는 웹앱에서 사용하는것이 가장 좋음
  • 네이버모바일 폰트크기 변경기능 구현시 사용

 

 

 

 

 

 

css 코드

더보기
/* 컬러 변수 */
:root {
  --point-color1: #5cd591;
  --point-color2: #907354;
  --txt-color-400: #96969696;
  --txt-color-500: #565656;
  --txt-color-600: #191919;
}
#wrap {
  height: 2000px;
}
#header {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: center;
}
#header::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 20;
  width: 100%;
  height: 1px;
  background: #ededed;
  display: none;
}
#header .logo {
  width: 119px;
  position: absolute;
  left: 56px;
  top: 50%;
  transform: translateY(-50%);
}
#header .logo a {
  display: block;
  height: 36px;
  background: url(../images/img_logo_white.svg) no-repeat left top / 100%;
}
#header .gnb {
  display: flex;
}
#header .gnb>li {
  position: relative;
}
#header .gnb>li>a {
  color: #fff;
  display: block;
  line-height: 80px;
  padding: 0 40px;
  font-size: 20px;
  font-family: 'Outfit',sans-serif;
  position: relative;
}
#header .gnb>li:hover>a::after {
  transition: all 0.3s;
  transform: scaleX(1);
}
#header .gnb>li>a::after {
  content: '';
  position: absolute;
  /* 가운데 기준으로 늘리기 */
  transform: scaleX(0);
  height: 1px;
  left: 40px;
  right: 40px;
  bottom: 0;
  background: #191919;
  z-index: 20;
}
#header .gnb .depth2 {
  position: absolute;
  left: 40px;
  top: 80px;
  z-index: 10;
  /* 호버가 유지되야하므로 빈공간이 아니어야함 */
  padding-top: 30px;
  /* 페이드효과 */
  transition: all 0.2s;
  opacity: 0;
  visibility: hidden;
}
#header .gnb .depth2 li + li {
  margin-top: 15px;
}
#header .gnb .depth2 a {
  font-size: 16px;
  transition: all 0.2s;
}
#header .gnb .depth2 a:hover {
  color: var(--point-color1);
}
#header::after {
  content: '';
  position: absolute;
  left: 0;
  top: 80px;
  width: 100%;
  height: 200px;
  height: 0;
  background: #fcfcfc;
}
#header .login_wrap {
  position: absolute;
  right: 56px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
}
#header .login_wrap .login {
  width: 24px;
  height: 24px;
  background: url(../images/ico_login_white.svg) no-repeat left top / 100%;
}
#header .open_btn {
  display: none;
}
.main_video {
  height: 100vh;
  position: relative;
}
.main_video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.main_video::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(25, 25, 25, 0.6);
}
.main_video .tit_wrap {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  z-index: 10;
  text-align: center;
  color: #fff;
  padding: 0 32px;
  word-break: keep-all;
  word-wrap: break-word;
}
.main_video .tit_wrap h2 {
  font-size: 64px;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
}
.main_video .tit_wrap p {
  font-size: 32px;
  font-weight: 500;
  margin-top: 28px;
}
@media (max-width:1200px){
  #header {
    height: 65px;
  }
  #header .logo {
    left: 32px;
    width: 86px;
  }
  #header .logo a {
    height: 26px;
  }
  #header .gnb_wrap {
    display: none;
  }
  #header .login_wrap {
    right: 32px;
    gap: 0 15px;
  }
  #header .open_btn {
    width: 26px;
    background: none;
    border: none;
    display: flex;
    flex-direction: column;
    gap: 5px 0;
    align-items: center;
    justify-content: center;
  }
  #header .open_btn i {
    width: 20px;
    height: 2px;
    background:#fff;
    transition: all 0.5s;
  }
  #header .open_btn:hover i:nth-of-type(1) {
    transform: rotateZ(135deg) translate(5px, -5px);
  }
  #header .open_btn:hover i:nth-of-type(2) {
    transform: scaleX(0);
    opacity: 0;
  }
  #header .open_btn:hover i:nth-of-type(3) {
    transform: rotateZ(-135deg) translate(5px, 5px);
  }
  /* vw 공식 - 768 : 42 = 100: x   x=5.46vw
  x = calc (100wv * 요소크기 / 768) */
  .main_video .tit_wrap h2 {
    font-size: calc(100w * 42 / 768);
  }
  .main_video .tit_wrap p {
    font-size: calc(100vw * 21 /768);
    margin-top: calc(100vw * 18 / 768);
  }
}
@media (max-width: 767px) {
  #header {
    height: 52px;
  }
  #header .logo {
    left: 20px;
  }
  #header .login_wrap {
    right: 20px;
  }
  .main_video {
    height: 50vh;
  }
  .main_video .tit_wrap {
    padding: 0 20px;
  }
  .main_video .tit_wrap h2 {
    font-size: calc(100vw * 24 / 360);
  }
  .main_video .tit_wrap p {
    font-size: calc(100vw * 13 / 360);
    margin-top: calc(100vw * 7 /360);
  }
}

 

  /* vw 공식 - 768 : 42 = 100: x   x=5.46vw
  x = calc (100wv * 요소크기 / 768) */

 

 

 

 

 

 

 

 

 

더보기
/* 컬러 변수 */
:root {
  --point-color1: #F8C900;
  --point-color2: #907354;
  --txt-color-400: #8F98AC;
  --txt-color-500: #77797E;
  --txt-color-600: #212121;
}
#wrap {
  height: 3500px;
}
#header {
  position: fixed;
  left:0;
  top:0;
  width:100%;
  z-index: 9999;
}
#header .inner {
  /* 1920은 일반적으로 안적어도되지만 큰모니터에서 좌우가 너무 넓어지는것을 방지해줌 */
  max-width:1920px;
  /* 테블릿 여백 미리줘서 창 줄었을때 안붙게 */
  padding:0 20px;
  height: 100px;
  margin:0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#header .logo {
  width:146px;
  /* 제자리띄우기 */
  position: relative;
  z-index: 10;
}
#header .logo a {
  display: block;
  height: 35px;
  background: url(../images/logo_w.svg) no-repeat left top / 100%;
}
/* 헤더기준 가운데 정렬 */
#header .gnb_wrap {
  position: absolute;
  left:0;
  top:0;
  /* 서브메뉴의 기준이므로 100%로 늘려야 서브를 늘릴수있음 */
  width:100%;
  /* gnb 가운데 정렬 */
  display: flex;
  justify-content: center;
}
#header .gnb {
  display:flex;
}
#header .gnb>li {
  padding:0 45px;
}
#header .gnb>li>a {
  color:#fff;
  display: block;
  line-height: 100px;
  font-size: 18px;
  position: relative;
}
#header .gnb>li>a::after {
  content: '';
  position: absolute;
  left:50%;
  bottom: -12px;
  /* scale효과가 있으므로 transform대신 마진으로 중앙정렬 */
  margin-left:-12px;
  width:24px;
  height: 24px;
  background: url(../images/on.png) no-repeat left top / 100%;
  transition: all 0.5s;
  /* 크기를 0%로 안보이게 */
  transform:scale(0);
  z-index: 10;
}
#header .gnb>li:hover>a::after {
  /* transform 기준은 요소의 중심 */
  transform: scale(1);
}
#header .gnb>li:hover .depth2 {
  /* flex로 보여줌 */
  display: flex;
}
#header .gnb .depth2 {
  position: absolute;
  left:0;
  top:100px;
  width:100%;
  height: 100px;
  justify-content: center;
  align-items: center;
  background: #F9F9F9;
  gap: 0 50px;
  display: none;
}
#header .gnb .depth2 a {
  transition: all 0.3s;
  color:rgba(0,0,0,0.5);
  font-weight: 500;
}
#header .gnb .depth2 a:hover {
  color:rgba(0,0,0,1);
}
#header .lang_wrap {
  /* 제자리띄우기 */
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  gap:0 50px;
}
#header .lang {
  display: flex;
}
/* 메뉴사이 구분선은 글자보다 높이가 작은경우가 많으므로 before로 띄워서 처리 */
#header .lang li + li {
  margin-left: 15px;
  padding-left: 15px;
  position: relative;
}
#header .lang li + li::before {
  content: '';
  position: absolute;
  left:0;
  top:4px;
  width:1px;
  height: 12px;
  background: #fff;
}
#header .lang a {
  color:rgba(255,255,255,0.3);
}
#header .lang li.active a {
  color:#fff;
  position: relative;
}
#header .lang li.active a::before {
  content: '';
  position: absolute;
  left:50%;
  top:-10px;
  transform: translateX(-50%);
  width:6px;
  height: 6px;
  background: #fff;
  /* 정원 */
  border-radius: 50%;
}
#header .inquiry_btn {
  height: 50px;
  color:#fff;
  border-color:#fff;
  border-radius: 25px;
  width:148px;
  font-size: 18px;
  font-weight: 500;
  gap:0 10px;
}
/* flex아이템이므로 블럭임 */
#header .inquiry_btn::after {
  content: '';
  width:22px;
  height: 21px;
  -webkit-mask: url(../images/power_icon.svg) no-repeat left top / 100%;
  mask: url(../images/power_ikon.svg) no-repeat left top / 100%;
  background: #ffcc00;
  transform: rotateZ(-135deg);
  transition: all 0.5s;
}
#header .inquiry_btn:hover {
  background: #212121;
  border-color:#212121;
}
#header .inquiry_btn:hover::after {
  background: #fff;
  transform: rotateZ(0);
}
.main_slider {
  height: 1000px;
  position: relative;
}
.main_slider video {
  /* background-size: cover 기능을 html요소에 적용 */
  width:100%;
  height: 100%;
  object-fit: cover;
}
.main_slider .slider_bottom {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}
.main_slider .slider_bottom img {
  width: 100%;
}
#header .open_btn {
  display: none;
}
#header .m_gnb_wrap {
  display: none;
}
/* 헤더 분기점 */
@media (max-width:1550px) {
  #header .gnb>li {
    padding: 0 25px;
  }
  #header .gnb>li>a {
    font-size: 16px;
  }
  #header .lang_wrap {
    gap: 0 20px;
  }
}
/* 테블릿 분기점 */
@media (max-width:1200px) {
  #header .inner {
    height: 80px;
  }
  #header .logo {
    width:127px;
  }
  #header .logo a {
    height: 30px;
  }
  #header .lang_wrap {
    font-size: 16px;
  }
  #header .gnb_wrap {
    display: none;
  }
  #header .open_btn {
    width: 26px;
    height: 26px;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
  }
  #header .open_btn i {
    width: 12px;
    height: 12px;
    background: #fff;
  }
  #header .m_gnb_wrap {
    transform: translateX(100%);
    display: block;
    position: fixed;
    width: 320px;
    height: 100%;
    background: #fff;
    padding: 140px 0 60px 50px;
    z-index: 20;
    right: 0;
    top: 0;
    overflow-y: scroll;
  }
  #header .m_gnb_wrap .close_btn {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 28px;
    height: 28px;
    background: none;
    border: none;
  }
  #header .m_gnb_wrap .close_btn i {
    position: absolute;
    top: 45%;
    left: 0;
    width: 100%;
    height: 2px;
    background: #5b606a;
    transform: rotateZ(-45deg);
  }
  #header .m_gnb_wrap .close_btn i:nth-of-type(2) {
    transform: rotateZ(45deg);
  }
  #header .m_gnb>li {
    font-size: 16px;
    margin-bottom: 30px;
    position: relative;
  }
  #header .m_gnb>li::before {
    content: '';
    position: absolute;
    left: -50px;
    top: 9px;
    width: 0;
    height: 2px;
    background: #142345;
  }
  #header .m_gnb>li:hover::before {
    width: 30px;
    transition: all 0.5s;
  }
  #header .m_gnb>li>a {
    display: block;
    font-weight: 500;
    color: #313741;
    letter-spacing: -0.5px;
  }
  #header .m_gnb>li:hover .depth2 {
    display: block;
  }
  #header .m_gnb .depth2 {
    display: none;
    margin-top: 20px;
  }
  #header .m_gnb .depth2 li + li {
    margin-top: 12px;
  }
  #header .m_gnb .depth2 a {
    color: #494d54;
    opacity: 0.6;
    letter-spacing: -0.5px;
    transition: all 0.4s;
  }
  #header .m_gnb .depth2 a:hover {
    opacity: 1;
  }
}
@media (max-width:767px) {
  #header .inner {
    height: 60px;
  }
  #header .logo {
    width: 106px;
  }
  #header .logo a {
    height: 25px;
  }
  #header .lang a {
    font-size: 14px;
  }
  #header .lang li.active a::before {
    width: 4px;
    height: 4px;
    top: -6px;
  }
  #header .inquiry_btn {
    display: none;
  }
  #header .m_gnb_wrap {
    width: 80%;
  }
  .main_slider {
    height: 630px;
  }
}

 

 

 

 

 

 

저작자표시

'씹덕티스토리에코딩의등장이라' 카테고리의 다른 글

넥슨 가변레이아웃  (0) 2024.03.28
포스코이앤씨 푸터  (0) 2024.03.27
아웃백 헤더  (0) 2024.03.22
position(레이어)  (0) 2024.03.21
아웃백 홈페이지 한화생명 홈페이지  (0) 2024.03.19

관련글

댓글

티스토리툴바