CSS

웹 페이지의 디자인과 레이아웃을 책임지는 **CSS(Cascading Style Sheets)**에 대해 핵심 키워드를 중심으로 상세히 설명해 드리겠습니다.

---

1. CSS의 정의

CSS는 Cascading Style Sheets의 약자로, HTML로 작성된 문서가 사용자에게 어떻게 보여질지(색상, 글꼴, 크기, 배치 등)를 정의하는 스타일 시트 언어입니다.

HTML이 웹사이트의 '뼈대(구조)'를 만든다면, CSS는 그 위에 입히는 '옷(디자인)'과 같은 역할을 합니다.

 

http://www.csszengarden.com/

CSS Zen Garden: The Beauty of CSS Design

---

---

2. 스타일시트를 사용하는 이유

웹 개발에서 CSS를 사용하는 이유는 크게 세 가지로 요약할 수 있습니다.

• 디자인과 구조의 분리: HTML은 정보 전달에만 집중하고, CSS는 디자인에만 집중하여 코드가 깔끔해집니다.
• 유지보수의 용이성: 수백 페이지의 웹사이트라도 하나의 CSS 파일만 수정하면 사이트 전체의 디자인을 일괄적으로 변경할 수 있습니다.
• 다양한 기기 대응: 같은 HTML이라도 CSS만 다르게 적용하여 스마트폰, 태블릿, PC 등 각 기기 화면에 최적화된 레이아웃(반응형 웹)을 제공할 수 있습니다.

---

3. 스타일 규칙 작성 방법

CSS는 **선택자(Selector)**와 **선언 블록(Declaration Block)**으로 구성됩니다.

CSS

 

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

• 선택자(Selector): 스타일을 적용할 대상을 지정합니다. (위 예시에서는 h1)
• 속성(Property): 바꾸고 싶은 디자인 요소입니다. (위 예시에서는 color, font-size)
• 값(Value): 속성에 적용할 구체적인 수치나 설정입니다. (위 예시에서는 blue, 20px)
• 선언(Declaration): 속성: 값;의 한 쌍을 의미하며, 반드시 끝에 세미콜론(;)을 붙여야 합니다.

---

4. 스타일 주석 표기 방법

코드 내에 설명을 남기거나 특정 코드를 실행되지 않게 처리할 때 사용합니다.

CSS 주석은 /*로 시작해서 */로 끝납니다.

CSS

 

/* 메인 배너 스타일 시작 */
.banner {
  background-color: #f0f0f0; /* 배경색 지정 */
}
/* .banner { display: none; } <- 이 코드는 실행되지 않습니다. */

---

5. CSS 코드 경량화 (Minification)

웹사이트의 로딩 속도를 높이기 위해 CSS 파일의 용량을 줄이는 기법입니다.

• 방법: 코드 내의 불필요한 공백, 줄 바꿈, 주석을 모두 제거합니다.
• 효과: 파일 크기가 작아져 브라우저가 CSS 파일을 다운로드하고 해석하는 시간이 단축됩니다.
• 결과: 보통 배포용 파일에는 .min.css라는 확장자를 붙여 사용합니다.

---

학습 정리

• CSS는 HTML의 구조를 아름답게 꾸며주는 언어입니다.
• 선택자 { 속성: 값; } 이라는 기본 구조만 기억하면 시작할 수 있습니다.
• 작성 중에는 주석을 잘 달고, 실제 사이트를 오픈할 때는 경량화 과정을 거쳐 성능을 최적화하는 것이 프로의 습관입니다.

---

CSS의 기본 개념과 구조를 완벽하게 정리하셨습니다!

---