공부기록
UI 프로젝트발행일 2022. 7. 30.원본 https://blog.naver.com/jword_/222834746889 ↗

header영역제작하기 (2)

header영역제작하기 (2) — #header 웹사이트 디자인 소개 및 학습목표 MASK이미지 모션을 활용하여 회사 소개 페이지 만들기 mask...

#MASK#Naver Blog

#header

웹사이트 디자인 소개 및 학습목표

#

MASK이미지 모션을 활용하여 회사 소개 페이지 만들기

mask모션을 활용하여 웹사이트를 제작해봅니다. 본글은 패스트 캠퍼스 "최성일"강사님의 강의를 요약한 내용입니다.

​

이전글을 차례대로 보고 오셔야 이해가 빠릅니다

사용하는 언어

이미지

HTML

  • header태그를 잡아준다.
  • main>header>h1 //로고
  • main>header>ul#navi>li>h2 + p // btns : 메뉴

​

CSS

  • 웹폰트아이콘 (연결방법)
  • positioning //적절한 레이아웃
  • &::before // 글자 밑 선 만들기
  • backdrop-filter // header영역 뒤 배경 필터
  • li.on 효과 지정 //글자 확대, 선명히 , 배경색 변경

​

​

HTML

header영역지정

<main> <header> <h1>JWORD</h1> <ul id="navi"> <li> <h2>COMPANY</h2> <p>Lorem ipsum dolor sit amet consectetur.</p> </li> </ul> </header></main>​로고영역main>header>h1​메뉴영역main>header>ul#id>h2+p

CSS

header전체 틀

header{ width: 450px; height: 100%; position: absolute; top: 0px; left: 0px; background: rgba(0,0,0,.2); backdrop-filter: blur(2px);//header밑의 부분을 블러처4 z-index: 5; }​​기억할 속성width: 450px; //전체 크기 잡아주기z-inde: 5; //패널이 총 4개 들어가기 때문에 항상 제일 위로 보이도록 지정 backdrop-filter: blur(2px) //header영역 뒤쪽 배경은 블러처리

로고꾸미기

h1{ position: absolute; top: 20%; left: 20%; font: 35px/1 "Cormorant SC"; color: #fff;​ &::after{ content: ""; display: block; width: 100%; height: 3px; background: #fff; margin-top: 8px; } }폰트/위치 잡아주기&::after활용하여 글자 밑에 선 만들어주기(복습)

이미지

메뉴영역 제작 - 전체틀 ul

#navi{ width: 100%; position: absolute; top: 50%; left: 5%; transform: translateY(-50%); }ul id="navi" 위치지정해주기

​

메뉴영역 제작 - 세부틀 li

li{ width: 450px; padding: 20px 40px; position: relative; overflow: hidden; opacity: 0.4; cursor: pointer; transition : transform 1.4s, opacity 1.4s; transform-origin:left center ; }position: relative; // 세부 컨텐츠의 틀로 잡기cursor:pointer //버튼 모양 처럼 만들기transtion //.on활성화시 움직임 구현할 예정

메뉴영역 제작 - 세부 컨텐츠 h2/p

h2{ font: bold 12px/1 "Cormorant SC"; color: #fff; letter-spacing: 1px; margin-bottom: 5px;​ &::after{ content: ""; display: block; width: 1px; height: 1px; transition: 1.4s; margin-top: 3px; } } p{ font: 10px/1 "arial"; color: #fff; letter-spacing: 1px; opacity: 0.7; } }특별히 기억할건 없는듯. 속성 보면서 맞추면됨&::after로 가상의 선 제작하기(복습)&::after {width:1px;} //.on활성화시 선이 그어지는 모션 구현할 것

이미지

li.on활성화 모션 구현

li.on{ background: linear-gradient(to right, rgba(0,0,0,.4), rgba(0,0,0,0)); transform: scale(1.3); opacity: 1;​ h2::after{ //h2::after로 쓰면된다 width: 140px; background: #fff; } }li.on.on 붙을때 모션 구현하기h2::after {width:155px; background #fff; //.on시 선이그어지는 모션 구현

이미지

복습

이미지

짚어갈 포인트

  • backdrop-filter
  • ::after로 선 만들기
  • li.on 붙을때 모션구현

​

이미 예전에 다뤘던 내용이 많아 생략한 부분이 많습니다.. MUSIC PLAYER, SVG UI 보고오면 더 이해가 빠를 것입니다.