::before 모션 추가하기. inline-block 여백 없애기 (4)

::before 모션 추가하기. inline-block 여백 없애기 (4) — #::before #inlineblock 웹사이트 디자인 소개 및 학습목표 MASK이미지 모션을 활용하여 회사 소개 페...

#MASK#Naver Blog

#::before #inlineblock

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

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

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

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

사용하는 언어

HTML

CSS

HTML

.slogan 자동완성

<article class="on"> <div class="slogan"> <h2> <div class="inner">COMPANY</div> </h2> <div class="p1"> <div class="inner">lorem15</div> </div> <div class="p2"> <div class="inner">lorem7</div> </div> </div> </article>	.slogan자동완성.slogan>h2>.inner^.p1>.inner^.p2>.inner h2/ .p1 / .p2에는 after모션 해야해서 .inner에 텍스트 수정loremh2은 li제목과 일치하게 만들어준다..p1은 .p2보다 약 2개 길게 lorem완성

CSS

.slogan 위치잡기

.slogan{ top: 20%; right: 8%; text-align: right; padding: 40px; position: absolute; perspective: 900px; }	perspective.slogan의 &::before요소를 회전시킬거라 perspective 속성값을 준다.

h2 , .inner 속성

h2{ display: inline-block; overflow: hidden; position: relative; margin-bottom: 20px; .inner{ font: 250px/1.2 "Bebas Neue"; color: #fff; transform: scaleY(1.3); transform-origin: top center; //opacity:0 //transition: opacity 0.2s 0.5s }	h2display:inine-block: //h2의 전체 넓이는 자식요소의 크기가 결정::after모션을 h2에 달아줄 것이다..innerh1이 inline-block이라도 폰트 속성에 따라 위아래 여백이 남아있는 경우가 있다. 이럴 경우 transform: scaleY(1.3);을 통해 최대한 여백을 채워준다. 특히 아래여백이 많을경우 .p2와의 간격이 넓어진다.

transform-orign: top center;. (우)

그냥 transform을 적용하면 위 공백쪽으로 글자길이가 커지기 때문에, 반드시 transform-origin 속성을 걸어주자.

::before 속성

.slogan{ &::before{ content: ''; display: block; border: 1px solid #fff; position: absolute; width: 600px; height: 600PX top: 0px; right: 0px; //opacity: 0; transition: all 1.5s; } }	::before흰색 네모선을 만들어준다.aricle.on이 붙을경우 돌려줄 것이다. opacity:0; 을 지정후 article.on 일때 나타나도록 한다

article.on 모션 지정

article.on { .slogan{ &::before{ opacity: 1; transform: rotateY(220deg); } } }	article.on이 될 떄 ::before요소가 회전하는 것을 볼 수 있다.

복습

짚어갈 포인트

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