Chapter 2-1. CSS 소개 및 기본 문법(CSS)

 

📌 CSS 개념 정리

CSS는 Cascading Style Sheets의 약자로, HTML과 함께 웹 페이지의 스타일과 레이아웃을 지정하는 언어입니다. CSS는 글꼴, 색상, 간격, 위치, 애니메이션 등 웹 페이지의 시각적 요소를 정의하며, HTML의 구조에 스타일을 부여하여 사용자 경험을 향상시킵니다.

🚦 동작 원리 및 구조

CSS는 선택자(Selector)와 선언(Declaration)으로 구성됩니다. 선택자는 스타일을 적용할 HTML 요소를 지정하고, 선언은 스타일 속성(Property)과 값(Value)을 포함하여 실제로 어떤 스타일을 적용할지 명시합니다.

예시:

선택자 { 속성: 값; }

예) h1 { color: blue; font-size: 20px; }

💻 코드 예시 및 흐름 분석

CSS 적용 흐름:

1. HTML 파일에서 스타일을 적용할 요소를 결정합니다.
2. CSS 파일에서 선택자를 통해 이 요소를 지정합니다.
3. 선택된 요소에 스타일 선언을 통해 스타일을 적용합니다.

.highlight { color: red; font-weight: bold; }

위 코드가 적용되면 클래스명이 'highlight'인 모든 요소는 빨간색으로 강조되고 글씨가 두껍게 표시됩니다.

🧪 실전 사례

버튼을 디자인하는 CSS 예시입니다:

 

HTML: 클릭

CSS: .btn { background-color: #4CAF50; color: white; padding: 15px 32px; border: none; border-radius: 4px; cursor: pointer; }

 

마우스를 올렸을 때 스타일 변경:

.btn:hover { background-color: #45a049; }

🧠 고급 팁 or 자주 하는 실수

✅ 고급 팁:

• 클래스 선택자를 활용하여 재사용 가능한 스타일을 작성하세요.
• 미디어 쿼리를 사용하여 반응형 웹 디자인을 구현하세요.
• Flexbox 또는 Grid와 같은 최신 레이아웃 기술을 사용하여 효율적인 레이아웃을 구성하세요.

🚫 자주 하는 실수:

• 동일한 선택자에 대해 중복된 스타일을 작성하는 경우.
• 구체성이 부족한 선택자를 사용하여 의도하지 않은 요소까지 스타일이 적용되는 경우.
• CSS 속성값의 잘못된 단위 사용(예: 픽셀(px)과 퍼센트(%)의 혼용).

✅ 마무리 요약 및 복습 포인트

• CSS는 웹 페이지의 스타일을 정의하는 필수적인 언어입니다.
• 선택자와 선언을 통해 HTML 요소에 스타일을 적용합니다.
• 효율적이고 가독성 높은 CSS 작성법을 연습하는 것이 중요합니다.
• 고급 레이아웃 기법 및 반응형 디자인 원칙을 활용하면 사용자 친화적인 웹사이트를 만들 수 있습니다.

이 자료를 참고하여 웹 페이지 디자인 능력을 지속적으로 향상시키세요!