CSS
-
햄버거 메뉴 CSS로 만들어보기!CSS 2025. 11. 5. 13:36
오늘 시간은 본격 반응형과 미디어쿼리에 관한 수업이였다.미디어쿼리를 처음배울때가 9년전?이였던거 같다.웹디 취준을 하기위해서 학원에서 수업을 듣고있었는데 내가 알고있던거라곤,,,HTML의 태그 몇개가 전부였다.수많은 CSS 속성과 값에 머리가 핑핑돌아가고 있을때 미디어쿼리까지 머리속에 집어넣으려니 멘붕이 왔었던 😵💫그 이후 9년동안 이 고생 저 고생하면서 많이 만들어보니까 이제 미디어쿼리쯤이야 .....라고 생각했는데 아직도 모르는게 있었다 😇수업을 듣다가 @media screen and (orientation: landscape) 같은 건 처음 안 사실이였다,,orientation은 사용자의 디바이스 방향을 의미하고 값은 아래와 같다.portrait: 세로 방향landscape: 가로 방향반응..
-
CSS만 건드려서 Parallax 만들어보기CSS 2025. 11. 3. 13:27
오늘은 CSS에 대해 본격 알아본 수업이었다!(CSS면 내가 또 잘하지만) 그래도 다시 복습해보는 좋은 시간이였던거 같다.마침 실습과제가 또 있어서 직접 코딩해보면서 설명을 해보았다! 오늘 과제는 Parallax 레이아웃 만들어 보기!패럴랙스란 아래로 스크롤했을때 시차를 이용한 레이아웃을 말하는데보통 배경을 이용한 레이아웃들을 많이 이용한다.사실 이런 인터렉션들은 회사다닐때도 정말정말많이 사용했었기때문에구현에 정답은 없겠지만 나대로 문제풀이를 해보았다.방법 1. parallax에게 ::before 선택자를 쓰기 .bg-wrap { width: 100%; min-height: 600px; position: relative; overflow: hi..