CSS로 웹 페이지 스타일 정의

카테고리

UI/UX

서브카테고리

UX 디자인

대상자

웹 개발자 및 디자이너(초보자 대상, CSS 기초 개념 설명)

핵심 요약

• CSS(Cascading Style Sheets)는 HTML 요소에 색, 폰트, 레이아웃 등을 적용하여 웹 페이지의 시각적 디자인을 정의함
• 세 가지 주요 선택자(요소 선택자, .class 선택자, #ID 선택자)를 활용해 스타일 적용 범위를 조절할 수 있음
• Flexbox를 활용한 레이아웃 구성 예시: .container { display: flex; justify-content: space-between; align-items: center; }

섹션별 세부 요약

1. CSS의 역할과 기본 구조

• HTML의 구조를 기반으로 스타일 규칙을 정의하여 페이지 디자인을 적용
• 기본 문법:

```css

선택자 {

프로퍼티: 값;

}

```

• 예: 요소에 파란색 글씨 적용: p { color: blue; }

2. 주요 용어 정의

• 선택자: 스타일을 적용할 HTML 요소를 지정 (예: p, .my-button, #header)
• 프로퍼티: 스타일 속성 (예: color, font-size, margin)
• 값: 프로퍼티에 할당할 구체적 값 (예: blue, 16px, 10px 20px)

3. 선택자 유형 및 사용 예시

• 요소 선택자: 특정 태그에 적용 (예: p { color: #333; })
• class 선택자: 반복 가능한 스타일 정의 (예: .my-button { background-color: green; })
• ID 선택자: 고유한 요소에 적용 (예: #header { font-size: 24px; })

4. Vue.js에서의 CSS 적용 방법

• 단일 파일 컴포넌트(SFC)에서