lyla-bae 님의 블로그

오늘 시간은 본격 반응형과 미디어쿼리에 관한 수업이였다.미디어쿼리를 처음배울때가 9년전?이였던거 같다.웹디 취준을 하기위해서 학원에서 수업을 듣고있었는데 내가 알고있던거라곤,,,HTML의 태그 몇개가 전부였다.수많은 CSS 속성과 값에 머리가 핑핑돌아가고 있을때 미디어쿼리까지 머리속에 집어넣으려니 멘붕이 왔었던 😵‍💫그 이후 9년동안 이 고생 저 고생하면서 많이 만들어보니까 이제 미디어쿼리쯤이야 .....라고 생각했는데 아직도 모르는게 있었다 😇수업을 듣다가 @media screen and (orientation: landscape) 같은 건 처음 안 사실이였다,,orientation은 사용자의 디바이스 방향을 의미하고 값은 아래와 같다.portrait: 세로 방향landscape: 가로 방향반응..

Cascade : 폭포처럼 위에서 아래로 흐르는 물Cascade의 사전적인 의미는 폭포처럼 흐르는 물이란 뜻으로CSS의 C는 Cascading Style Sheet로 폭포처럼 흐르는 스타일 문서라고 해석할수있겠다. 막무가내로 적는다고 스타일링되는것이 아니고 나름의 규칙이 있다. 스타일은 상속된다부모요소에 적용된 스타일이 자식에게도 상속이 되는데모든 스타일이 상속되는것은 아니다.그러나 만약 강제로 상속시키고 싶다면 inherit; 값을 주는 방법도 있다! 캐스케이딩에도 점수가 있다?기본적으로 CSS는 뒤에있는 코드일수록 우선순위를 가지게 되는데, 그렇다고 무조건 1등인것은 아니다.⭐️명시도, 중요도도 같이 고려해서 우선순위(Specificity)가 정해진다⭐️ 위 그림은 명시도순으로 점수를 매긴 자료인..

오늘은 CSS에 대해 본격 알아본 수업이었다!(CSS면 내가 또 잘하지만) 그래도 다시 복습해보는 좋은 시간이였던거 같다.마침 실습과제가 또 있어서 직접 코딩해보면서 설명을 해보았다! 오늘 과제는 Parallax 레이아웃 만들어 보기!패럴랙스란 아래로 스크롤했을때 시차를 이용한 레이아웃을 말하는데보통 배경을 이용한 레이아웃들을 많이 이용한다.사실 이런 인터렉션들은 회사다닐때도 정말정말많이 사용했었기때문에구현에 정답은 없겠지만 나대로 문제풀이를 해보았다.방법 1. parallax에게 ::before 선택자를 쓰기 .bg-wrap { width: 100%; min-height: 600px; position: relative; overflow: hi..

오늘은 3일차수업! 클론코딩을 같이 만들어보았다.숙제로 블로그 안올려도 된다고하셨지만....나는 성실한 잇티제이기 때무네 숙제까지 해서 결과물을 착착 올린다 (헤헤) 이번엔 css까지도 같이 다루었는데flex, grid 를 잘쓰는 편이라 어렵진않았지만,역시나 축약형같은건 쓰지않은터라 모르는부분들은 따로 디깅해보았다. 오늘의 클론코딩 무난하게 1시간 안되서 만들수 있었는데 결과물은 git에 업로드해놓았으니 궁금한사람은 봐두되구..https://lyla-bae.github.io/goorm_FE/HTML-CSS/html-3/products.html ProductsTitle Body text for whatever you’d like to say. Add main takeaway points, quotes, ..