Landing page 만들기
먼저 Landing page란 검색 엔진, 광고 등을 경유하여 접속하는 이용자가 최초로 보게 되는 웹페이지 라고 한다.
오늘은 어떤걸 해볼까 하고 둘러보다가 가장 기본이되는 페이지이기도 하고 순수 CSS로 만든 웹페이지인데 보기 좋은 효과가 많아 보여서 제작해보기로 했다.
이번에도 저번 Dashboard 때와 마찬가지로 유튜버의 영상을 보면서 제작했다.
html과 css로만 구성되어 있고 아주 적은 분량의 Javascript 코드가 들어가 있는데, 이는 반응형 웹디자인을 위해 상단 네비게이션바(헤더-리스트)를 Toggle하는데 쓰이기 때문에 분량이 매우 적고 간단하다.
html과 css만 사용하고 엄청 복잡하거나 어려운 내용 없이 간단하게 구성되어있기 때문에 간단하게 혹은 빠르게 웹페이지를 제작해보고 싶다면 한번 만들어 보면서 css 작동 방식을 공부해보는 것도 좋을 것 같다.
transform-origin
이번 Landing page를 만들 때 transform-origin 이라는 css의 transform 속성을 사용해봤다.
처음 사용해보는 transform 속성이라 MDN 사이트를 찾아보니 간단하게 "회전, 변형 속성을 사용하기 전에 기준점을 지정"해두는 속성이라고 알면 될 것 같았다.
이 프로젝트에서는 회전할 때 사용하지 않았고, 화면 중앙에 보이는 글자가 검은색 박스로 덮어져 있다가 미닫이 문처럼 측면으로 검은색 박스가 이동하면서 뒤에 숨겨져 있던 글자가 화면에 보이는 형식인데, 이때 글자의 기준점을 정해두는 용도로 사용하는 것 같다.
처음 봤지만 알아두면 언젠가 쓸 수 있을 것같아서 이번에도 좋은 지식을 하나 얻어갈 수 있는 것 같다.
MDN-transform-origin : https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin
transform-origin - CSS: Cascading Style Sheets | MDN
The transform-origin CSS property sets the origin for an element's transformations.
developer.mozilla.org
작동 모습
참고 유튜브 링크
'연습 프로젝트' 카테고리의 다른 글
| Dashboard 제작 (0) | 2022.01.20 |
|---|