CSS란?

CSS란 무엇인가?

웹 페이지는 HTML만으로는 구조만 정의할 수 있고, 디자인이나 시각적 표현은 제한적입니다. 이때 CSS(Cascading Style Sheets)를 사용하면 색상, 폰트, 레이아웃 등 시각적인 스타일을 자유롭게 지정할 수 있습니다. 즉, HTML이 뼈대라면 CSS는 옷과 꾸밈 역할을 한다고 이해할 수 있습니다.

아래에서 CSS의 핵심 개념과 사용 방법을 정리해 보겠습니다.

1. CSS의 역할

• 텍스트 스타일링: 글자 크기, 색상, 굵기, 줄 간격 조정
• 레이아웃 구성: 화면 배치, 정렬, 크기 조정, 반응형 웹 구현
• 색상 및 배경 지정: 배경색, 배경 이미지, 그라디언트 적용
• 애니메이션 효과: 전환, 움직임, 시각적 효과 추가

2. CSS 적용 방법

CSS는 HTML 문서에 세 가지 방식으로 적용할 수 있습니다.

1. 인라인 스타일(Inline Style)
   • 요소에 직접 style 속성을 부여

<p style="color: blue; font-size: 18px;">파란색 텍스트</p>

  2. 내부 스타일(Internal Style Sheet)

• <style> 태그를 사용해 HTML 문서 안에 정의

<style>
  p {
    color: red;
    font-size: 20px;
  }
</style>

 3.외부 스타일(External Style Sheet)

• 별도의. css 파일을 만들어 <link> 태그로 연결 (가장 권장되는 방법)

<link rel="stylesheet" href="style.css">

3. CSS 선택자(Selector)

CSS는 어떤 요소에 어떤 스타일을 적용할지 선택해야 합니다.

• 태그 선택자

p { color: green; }

•  클래스 선택자 (.classname)

.highlight { background: yellow; }

• 아이디 선택자 (#idname) 자식/후손 선택자

div > p { color: blue; }   /* 자식 */
div p { color: blue; }     /* 후손 */

4. 박스 모델(Box Model)

CSS 레이아웃의 기본 개념은 모든 요소가 박스(Box)로 이루어져 있다는 점입니다.

• content: 실제 내용
• padding: 내용과 테두리 사이 여백
• border: 테두리
• margin: 요소 간 바깥 여백

div {
  width: 200px;
  padding: 10px;
  border: 2px solid black;
  margin: 20px;
}

5. 반응형 웹과 미디어쿼리

화면 크기에 따라 다른 스타일을 적용할 때 사용합니다.

@media (max-width: 600px) {
  body {
    background-color: lightgray;
  }
}

6. CSS의 발전

• CSS2 → CSS3: 애니메이션, 트랜지션, 그리드, 플렉스박스 등 다양한 기능 추가
• 최신 웹 디자인은 대부분 CSS3 기반으로 제작되며, 자바스크립트와 함께 사용해 동적 효과도 구현

마무리

CSS는 단순히 "예쁘게 꾸미는 도구"가 아니라, 웹 페이지의 사용자 경험(UX)을 좌우하는 핵심 기술입니다. HTML과 결합해 구조와 디자인을 완성하며, 반응형 웹, UI/UX 개선에도 필수적입니다.