1. 변환 Transformations 요소의 모양을 이동하거나 변경하는 것 (ex. hover) 변환은 transform 속성을 사용하는데 이 속성은 변환하려는 요소에 추가하는 것이 아니라, 변환을 발생시키는 요소에 추가한다. 아래 예시를 통해 다시 살펴보자. .card-container { background-color: rgb(255, 255, 255); width: 350px; margin: 50px auto; box-shadow: 3px 3px 10px rgb(201, 200, 200); } .card-container:hover { transform: scale(1.05); } 변환하려는 요소는 .card-container이지만 여기에 transform 속성을 추가하는 것이 아니고, .card..
1. html 하는 css 규칙은 html에 적용되고 html 안에 포함된 요소들에도 상속된다. 아래의 css 변수 예제에서 사용했던 논리 html { --color-grey-100: rgb(236, 236, 236); --color-grey-400: rgb(134, 134, 134); --color-grey-600: rgb(58, 58, 58); --color-grey-900: rgb(41, 41, 41); --color-primary-300: rgb(167, 226, 255); --color-primary-700: rgb(0, 170, 255); --size-1: 18px; --size-5: 50px; background-color: var(--color-grey-100); } 2. :root 가상 ..
1. 폰트 크기에서의 em, rem, % 1) px 장점: Easy to understand & translateable 단점: Limited user focus & not scalable 2) em vs. rem (1) em (element) Size is relative to font-size 다른 요소의 폰트 크기와 연관된 크기 - 폰트 크기는 부모 요소의 크기에 달려있다. 단점 %와 마찬가지로 부모 요소에서 상속받는 크기에 따라 사이즈가 달라지기 때문에 관리가 어렵다. (2) rem (root em) Size is relative to root element’s font size 현재 요소의 폰트 크기와 최상위 요소의 폰트 크기와 연결되어 있다. HTML에서 최상위 요소: 최상위 요소에 폰트 크기..
20230522 - 20230526 Week 2 자바스크립트 문법 개강 후 정신없는 한 주가 지나갔다.. 수업부터 첫 개인 과제 발제까지 😱 매일매일 TIL을 쓰고 싶었는데 강의 보고 부족한 부분 좀 찾아보고 하다보니(딴 짓을 그렇게 많이 한 것도 아닌데) 새벽 12시, 1시가 뚝딱 되어있더라.. 그날 그날 정리하고 싶은데 공부를 막 시작하는 단계라 한꺼번에 지식이 쏟아져 들어오니 정리가 쉽지 않았다. 앞으로 공부하면서 이해가 잘 가지 않거나, 헷갈리는 개념 등 특별히 정리가 필요하다고 느껴지는 내용은 따로 정리할 계획이다. 개인과제1 개요 1. 순수 바닐라 자바스크립트만으로 영화 리스트 조회 및 검색 UI 구현 2. 학습해온 자바스크립트 문법을 최대한 활용 3. 스타일링 작업하며 css와 친해지기 1...
📌 CSS란? Cascading Style Sheets의 약자로, 웹페이지를 보기 좋게 꾸미기 위해 작성하는 코드 HTML이 웹문서의 뼈대를 이룬다면, CSS는 근육이라고 볼 수 있음 (나중에 배우게 될 JS는 동적인 웹사이트 구현하는 뇌의 역할) /* 선택자 { 속성1: 속성값, 속성2: 속성값2} */ p { text-align: center; color: red; } 📌 스타일 시트 스타일 시트는 크게 '브라우저 기본 스타일'과 '사용자 스타일'로 나뉘고, 여기서 사용자 스타일은 다시 '인라인 스타일', '내부 스타일 시트', '외부 스타일 시트' 세 가지로 나뉘는데 이 중에서 내부 스타일 시트와 외부 스타일 시트에 대해 정리해보려고 한다. 1. 내부 스타일 시트 : 같은 HTML 웹문서 안에 작성..
