본문 바로가기

분류 전체보기292

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.
웹 페이지 레이아웃 정리: 박스 모델, 마진, 패딩, 위치 속성 활용 박스 모델(Box Model)HTML 요소는 기본적으로 박스 모델(Box Model)로 구성되며, 이는 요소의 크기와 배치를 관리하는 데 중요한 개념입니다. 박스 모델은 다음과 같은 구성 요소로 이루어집니다:콘텐츠 영역(Content): 실제 내용이 들어가는 영역입니다.패딩(Padding): 콘텐츠 영역과 테두리 사이의 여백입니다.테두리(Border): 요소의 경계선입니다.마진(Margin): 요소와 다른 요소 사이의 공간입니다.속성들1. 패딩(Padding):콘텐츠 영역과 테두리 사이의 여백을 설정합니다.예시:padding: 20px;2. 테두리(Border):요소의 경계선을 설정합니다.border-style: 테두리 스타일을 지정합니다 (solid, dotted, dashed 등). 네 방향에 각각 .. 2024. 10. 3.

티스토리툴바