🎨 CSS

CSS: Cascading Style Sheet한 요소가 여러가지 속성값을 상속받게 될 경우, cascading을 통해 우선순위가 결정됨css가 선언된 위치에 따라 중요도를 판단브라우저 스타일 시트 < 사용 스타일시트 < 개발자 스타일 시트개발자 스타일 시트

CSS에서 함수 사용 함수 지정된 기능을 수행하는 요소 calc( ) 괄호 안의 사칙연산 결과를 속성값으로 사용가능 덧셈, 뺄셈 기호 앞 뒤에 반드시 공백 Position HTML 요소가 배치되는 방식을 결정하는 속성 position에 입력된 속성값에 따라 요소의 좌

transform 대상이 되는 요소에 이동, 회전, 확대/축소, 비틀기 등의 변형 효과를 부여 transform 의 속성값 translate( x, y ) 요소의 좌표를 움직일 수 있다. 좌표값을 입력하는 부분에는 양수, 음수 모두 입력 가능 좌표값을 하나만

Animation 이란? 연속되는 이미지를 연결해서 자연스럽게 움직이는 것처럼 보이게 만드는 기법 CSS를 이용해서 애니메이션을 만드는 방법 transition 속성 활용 특정 이벤트(hover 등)를 기점으로 작동 animation 속성과 keyframe

CSS 레이아웃 시스템의 역사Float ➡️ Flex ➡️ Grid(현대에는 Flex와 Grid를 상황에 따라 혼용)flex1차원적 구조를 가짐row / column 중 하나를 택하여 배치 방향을 결정grid2차원적 구조를 가짐row & column 방향의 배치 방식을

다양한 디바이스에서 접속했을 때 기기의 Viewport 규격에 반응하여 레이아웃이 자동으로 변경되는 웹페이지(예시) 에어비앤비 웹페이지웹 브라우저를 통해 웹 페이지에 접속했을 때, 주소창이나 탭 등을 제외하고 실제 웹 페이지의 컨텐츠가 차지하는 영역기기(Device)의