클론코딩 - CGV 웹페이지2

🕒 일정

• 아이콘 이미지 코드 추가
• 접근성을 고려한 마크업 추가
• 브라우저 viewport와 screen
  1. 브라우저 viewport
  2. 브라우저 screen
  3. vw, vh
  4. mediea query
• 가상요소 사용하여 input 박스 스타일 작성
• CSS 애니메이션 효과 사용하기
• video 스타일 작성

1. 브라우저의 viewport 와 screen

1-1. 브라우저 viewport

브라우저 에서 Viewport 는 화면 크기를 이야기하며,
메뉴바, 탭영역 등을 제외한 순수 화면 영역이다.

그렇기 때문에 디바이스마다, 또 각각의 계산되는 브라우저 영역에 따라
같은 웹 페이지라도 나타내는 viewport의 결과는 다양한 차이가 있다.
( * 그래서 뷰포트에 따라 스타일을 다르게 작성해야 한다.)

Viewport 는 화면이 크기이기 때문에 viewport 보다 웹 문서가 클 경우 스크롤이 생성되며,
이를 가지고 viewport 를 이동시킬 수 있다.

문서의 viewport 크기 : document.documentElement.clientWidth (실시간 값 적용)
브라우저 viewport의 스크롤포함 크기 : window.innerWidth (실시간 값 적용)
브라우저 창 크기 : window.outerWidth (모든 요소 포함, 고정 값)
문서의 크기 : document.documentElement.offsetWidth (실시간 값 적용)
(브라우저의 창 크기를 확대, 축소 할 때마다 값은 실시간으로 적용된다).

1-2. 브라우저 screen

screen 는 viewport 와 관계없이 화면의 전체 크기와 픽셀값들을 가지고 있다.
브라우저의 상태와 관계 없이 screen.width 와 screen.height 으로 현재 모니터의 크기를 알 수 있다.

1-3. vw, vh 단위

vw, vh는 CSS unit 중 하나이다.
이 단위로 CSS 크기를 설정하게 되면, 브라우저의 viewport 크기를 기준으로 계산되어 적용된다.

그래서 화면이 커지거나 작아질 때마다 자동으로 크기가 변화하게 되며,
디바이스 사이즈에 맞는 크기를 유동적으로 적용할 수 있게 된다.

1) CSS Position

css fixed position 은 상태에 따라 viewport 의 영향을 받는다.
top, bottom, left, right 로 설정한 값은 viewport 의 위치에 따라 계산되어 적용되며,
viewport 위치에 고정되게 된다.

모바일에서는 사용자의 액션에 따라 (keyboard, 확대/축소 등)
viewport 의 위치가 달라지며, 원하는 위치와 다른 결과가 나올수 있다.

2) media query

미디어 쿼리는 화면의 크기 또는 Viewport 크기에 따라 CSS 를 조절할 수 있다.
이때 width 는 스크롤 크기를 포함한 window.innerWidth 의 viewport 크기와 같다.

ㅡ 참고 블로그
1. https://pks2974.medium.com/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EB%B7%B0%ED%8F%AC%ED%8A%B8-layout-%EC%99%80-visual-viewport-%EA%B0%84%EB%8B%A8-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B0-47756d5ee3cf
2. https://www.daleseo.com/css-width/

---

2. 이미지 가운데 정렬하기

유연한 스타일이 아닌 position으로 요소를 꾸밀 때
margin: 0 auto 를 주면 가운데 정렬이 된다.

하지만 아직 원리는 못깨우침..

3. CSS 애니메이션 사용하기

애니메이션 효과를 사용하기 위해서는 '@keyframes' 키워드를 설정해야 한다.

모든 속성에 각 키 프레임이 지정된 게 아니라 키 프레임이 여러번 정의 된 경우엔
가장 최근의 키프레임에 선언된 값들만 유효하다.

from : 애니메이션이 시작되는 스타일
to : 애니메이션이 끝나는 스타일

🚨 이슈

1. html 에서 css 파일을 가져오지 못한다.

경로가 문제였던것 같다.
html 파일을 'public' 폴더에 넣고 package.josn 파일에서 live-server 루트 경로를
'./public' 로 잡아주었었는데, 혹시나 하고 html 파일을 폴더에서 빼내니까 동작한다.
live-server에서 경로를 지정할때는 스타일 경로도 상대적으로 바뀌어야하는건지 궁금하네..

2. fade-down 영역을 벗어나면 메뉴가 사라지는 효과 구현

자바스크립트로 class 유무로 나타났다가 사라지는 효과는 했는데,
CGV 홈페이지처럼 위에서 아래로 떨어지는 fade-down 효과는 내지 못했다.
단순히 요소가 없었다가 추가되는 원리는 아닌것같은데 잘 모르겠다 .. 
이걸로 1시간 이상 잡아먹었는데 결국 해결모탐.. 유유

3. video-wrap의 가상요소에 gradient가 안먹힘

video-wrap 의 너비만큼 100% 너비를 주고나서
z-index 를 video 보다 상위로 올려놓아야 한다.
이것도 꽤 헤매서 CGV 홈페이지 요소 하나하나 뜯어보면서 해결했다.

🌝 느낀점

지금까지 해봐야 transition, transform 만 사용했었는데
애니메이션을 다뤄보려 하니 참 어렵다. 그동안 무의식에 회피했던 거였어..

keyframes 사용해야하는 것도 까먹고. 껄껄..
역시 기술은 계속계속 사용해야 한다 ✊🏻


이슈 중에 fade-down 효과 해결 못한건 우선 나중으로 미뤄두기로 했다.
붙잡고 있어봐야 해결도 안되고 시간만 잡아먹으니
우선은 전체적인 스타일을 마쳐놓고 디테일한 부분은 2차전 때 하자!