본문 바로가기

CSS Study9

CSS 트랜스폼, 트랜지션, 애니메이션 정리 1. CSS 트랜스폼(Transform)CSS transform 속성은 HTML 요소에 2D 및 3D 변형을 적용할 수 있게 해줍니다. 변형에는 이동, 회전, 크기 조정 등이 포함됩니다.1.1 translate(): 요소를 이동용도: 지정한 방향으로 요소를 이동시킵니다.값: translate(x, y)로 x축, y축으로 각각 이동할 거리를 지정합니다.transform: translate(50px, 100px); /* x축으로 50px, y축으로 100px 이동 */1.2 scale(): 요소의 크기 조정용도: 요소를 확대하거나 축소시킵니다.값: scale(x, y)로 x축과 y축 방향으로 각각 크기를 조정합니다. (값이 1보다 크면 확대, 작으면 축소).transform: scale(1.5, 2); /*.. 2024. 10. 3.
CSS 선택자 CSS 선택자 정리CSS에서 선택자는 특정 HTML 요소를 선택해 스타일을 적용할 때 사용됩니다. 연결 선택자(조합 선택자)를 통해 특정 관계에 있는 요소들에 스타일을 지정하거나, 속성 선택자와 가상 클래스 선택자를 활용해 다양한 조건과 상황에서 스타일을 적용할 수 있습니다.1. 연결 선택자 (Combinator Selectors)연결 선택자는 요소 간의 관계를 정의하며, 두 개 이상의 요소를 조합해 특정 요소에만 스타일을 적용합니다.1.1 하위 선택자 (section p)용도: 선택한 요소 안의 모든 하위 요소에 스타일을 적용합니다.예시: section 요소 안에 있는 모든 p 요소에 적용.section p { color: blue;}1.2 자식 선택자 (section > p)용도: 선택한 요소의 직.. 2024. 10. 3.
CSS 그리드 레이아웃 CSS 그리드 레이아웃은 2차원 레이아웃 시스템으로, 웹 페이지를 행과 열로 나누어 복잡한 레이아웃을 쉽게 구성할 수 있도록 도와줍니다. 그리드 레이아웃은 가로뿐만 아니라 세로 축도 함께 다루므로, 플렉스 박스와 달리 가로/세로 모두에 대한 배치를 손쉽게 설정할 수 있습니다.1. 기본 개념CSS 그리드 레이아웃에서는 다음 두 가지 주요 구성 요소가 있습니다:그리드 컨테이너(Grid Container): 그리드 레이아웃을 적용하는 부모 요소.그리드 아이템(Grid Item): 그리드 컨테이너 내의 자식 요소.2. 그리드 컨테이너 설정그리드를 사용하려면 부모 요소에 display: grid 또는 display: inline-grid 속성을 지정합니다..container { display: grid;}3. .. 2024. 10. 3.
플렉스 박스(Flexbox) 레이아웃 플렉스 박스(Flexbox)는 CSS3에서 제공하는 레이아웃 모델로, 요소들을 쉽고 유연하게 정렬할 수 있도록 도와줍니다. 플렉스 박스는 가로 축과 세로 축을 기반으로 아이템을 정렬하며, 다양한 화면 크기와 장치에 대응할 수 있는 반응형 웹 디자인에 특히 유용합니다.1. 기본 개념플렉스 박스 레이아웃은 두 가지 핵심 요소로 구성됩니다:컨테이너(Flex Container): 플렉스 레이아웃을 적용할 부모 요소.아이템(Flex Item): 플렉스 컨테이너 안에 들어가는 자식 요소들.2. 플렉스 컨테이너 설정플렉스 박스를 사용하려면 부모 요소에 display: flex 속성을 지정해야 합니다..container { display: flex;}이렇게 하면 container 안에 있는 모든 자식 요소가 플렉스 .. 2024. 10. 3.
반응형 웹 디자인 (Responsive Web Design) 정리 반응형 웹 디자인 (Responsive Web Design)반응형 웹 디자인은 다양한 화면 크기(PC, 태블릿, 스마트폰 등)에 맞춰 화면 요소들을 자동으로 변경하는 웹사이트를 구현하는 방법입니다. 사용자의 화면 크기에 따라 유연하게 디자인이 조정되며, 더 나은 사용자 경험을 제공합니다.1. 뷰포트(Viewport)뷰포트(Viewport)는 웹 페이지가 표시되는 기기의 화면 영역을 말합니다.웹 페이지를 반응형으로 만들기 위해서는 기본적으로 뷰포트 설정이 필요합니다.뷰포트 설정:width=device-width: 기기의 가로 너비에 맞춰 콘텐츠가 표시되도록 설정.initial-scale=1: 페이지를 처음 로드할 때 확대/축소 없이 화면 크기에 맞게 표시.2. 글자 크기 반응형em과 rem 단위는 반응형 .. 2024. 10. 3.
배경 이미지와 색상 처리: CSS 속성 정리 및 활용법 1. 배경색 설정 (background-color)용도: 웹 요소의 배경색을 지정합니다.예시:background-color: #f0f0f0;2. 배경 클립 설정 (background-clip)용도: 배경이 웹 요소의 어느 부분까지 적용될지 지정하는 속성입니다.기본값은 테두리까지 적용됩니다.값:border-box: 배경을 테두리 영역까지 확장.padding-box: 배경을 패딩 영역까지 확장.content-box: 배경을 콘텐츠 영역까지만 적용.예시:background-clip: padding-box;3. 배경 이미지 설정 (background-image)용도: 웹 요소의 배경으로 이미지를 지정합니다.예시:background-image: url('images/bg.jpg');4. 배경 반복 설정 (back.. 2024. 10. 3.

티스토리툴바