CSS

Box는 컨텐트(Content), 패딩(Padding), 테두리(Border), 마진(Margin)으로 구성된다.Box Modelbox-sizing의 기본값은 content-box이다. 이때 박스의 너비와 높이는 컨텐츠 영역만을 대상으로 하여 값이 설정된다.컨텐츠 영역

레이아웃을 구성할 때 블록 요소들을 가로로 배치할 때 사용하는 속성종류 : left, right, nonefloat 속성을 사용하면 해당 요소를 다음 요소 위에 붕 뜨게 된다. 이때, 부모요소와 형제요소들은 float 속성을 통해 공중에 뜬 요소를 찾을 수 없게 된다.

요소를 원하는 위치로 자유롭게 이동시키기 위해 사용하는 속성종류 : static, relative, absolute, fixed, sticky▪️ static : position 프로퍼티의 기본값으로, 부모 요소 내에 자식 요소로서 존재할 땐 부모 요소의 위치를 기준으

요소들을 유연하게 정렬하고 배치하기 위한 CSS 레이아웃 모델로, 가로 또는 세로 축을 기준으로 정렬할 수 있다. 1\. display: flex | inline-flex 정렬할 요소들을 포함한 부모요소에 flex 선언하기부모 요소가 inline 요소일 경우엔 inl

meta tag 선언하기▪️ meta tag : 웹 페이지의 메타 데이터를 정의하고, 검색엔진최적화(SEO)를 위해 검색엔진에게 메타 데이터를 전달하기 위해 사용된다. css에 media query 적용하기▪️ @media : 미디어 유형에 따라 다른 스타일을 적용하는

반응형 웹 📍반응형 웹을 만들기 위해 필요한 2가지 meta tag 선언하기 ▪️ meta tag : 웹 페이지의 메타 데이터를 정의하고, 검색엔진최적화(SEO)를 위해 검색엔진에게 메타 데이터를 전달하는데 사용된다. css에 media query 적용하기 ▪️

CSS 프로퍼티 값이 자연스럽게 변화하도록 하는 것transition-property : 필수 속성 / 전환하고자 하는 property 지정하는 속성transition-duration : 필수 속성 / 변화 지속시간 지정하는 속성 (단위 : ms, s)transitio

요소에 동적인 움직임과 변화를 부여하기 위해 사용한다.@keyframes로 어떤 애니메이션을 사용할지 정의하기요소에 animation 속성 사용하여 정의하기위치 이동하고 배경색 변하는 애니메이션animation-name : keyframes로 정의한 애니메이션 지정an

📍 Box Shadow 요소에 그림자 효과를 주는 속성 형태 속성 ▪️ h-offset : 그림자의 가로 위치(x축). 양수는 오른쪽, 음수는 왼쪽으로 이동한다. ▪️ v-offset : 그림자의 세로 위치(y축). 양수는 아래로, 음수는 위로 이동한다. ▪️ b