카테고리 없음

CSS 기본개념

victory-line 2025. 1. 15. 21:44

1. CSS란 무엇인가?

CSS는 Cascading Style Sheets의 약자로, 웹 페이지의 스타일(디자인과 레이아웃)을 정의하는 언어임

CSS의 역할:

  • 텍스트 색상, 크기, 글꼴 설정
  • 레이아웃 조정(정렬, 배치)
  • 배경 색상, 이미지 설정
  • 애니메이션 및 트랜지션 적용

2. CSS의 구조와 문법

CSS 코드는 선택자와 선언 블록으로 이루어져 있음

기본 문법:

 

예제:

선택자 { 속성1: 값1; 속성2: 값2; }
 
 
h1 { 
	color: blue; /* 글자 색상을 파란색으로 */ 
    font-size: 24px; /* 글자 크기를 24픽셀로 */ 
    }
  • 선택자: 어떤 HTML 요소에 스타일을 적용할지 지정 (예: h1)
  • 속성: 변경할 스타일의 종류 (예: color, font-size)
  • 값: 해당 속성에 적용할 구체적인 값 (예: blue, 24px)

3. CSS 적용 방법

CSS는 HTML과 함께 사용되며, 적용 방법은 다음 세 가지로 나뉨

1) 인라인 스타일

HTML 태그 안에 style 속성을 사용해 작성

<p style="color: red;">이 문장은 빨간색입니다.</p>

2) 내부 스타일 시트

HTML 파일의 <head> 태그 안에 <style> 태그를 사용

<head> 
    <style>
        p { 
          color: green; 
        } 
    </style> 
</head>

3) 외부 스타일 시트 (추천)

CSS를 별도의 .css 파일에 작성하고 HTML 파일에서 연결

 
<!-- HTML 파일 --> 
<link rel="stylesheet" href="styles.css">
/* styles.css 파일 */ 
p {
  color: purple; 
  }

4. CSS의 주요 개념

1) 선택자 (Selector)

CSS에서 특정 요소를 선택하여 스타일을 적용하는 방법입니다.

기본 선택자:

  • 태그 선택자: 태그 이름으로 선택 
    h1 { color: blue; }

  • 클래스 선택자: .을 사용하며 특정 클래스에 스타일 적용
    .highlight { background-color: yellow; }
<p class="highlight">강조된 문장</p>

  • 아이디 선택자: #을 사용하며 특정 아이디에 스타일 적용 
    #highlight { background-color: yellow; }
<p id="highlight">강조된 문장</p>

     

  • 후손 선택자: 특정 요소 내부의 자식 요소를 선택
div p { color: gray; }

 

2) 속성 (Property)과 값 (Value)

CSS에서 스타일을 지정할 때 사용하는 속성과 그 값임

body {
    background-color: lightgray; /* 배경 색 */ 
    font-family: Arial, sans-serif; /* 글꼴 */ 
    margin: 20px; /* 여백 */ 
}

5. 박스 모델 (Box Model)

HTML의 모든 요소는 보이지 않는 상자 형태로 구성되어 있음

박스 모델은 요소의 크기와 간격을 조정하는 데 필수적임

박스 모델의 구성 요소:

  1. Content: 텍스트나 이미지 등 요소의 실제 내용
  2. Padding: 콘텐츠와 경계선(Border) 사이의 여백
  3. Border: 요소의 경계선
  4. Margin: 요소 외부의 여백

6. CSS 속성의 우선순위 (Cascading)

CSS의 이름에 들어 있는 **Cascading(계단식)**은 우선순위에 따라 스타일이 적용된다는 뜻임

우선순위:

  1. 인라인 스타일: 태그에 직접 작성된 스타일이 가장 우선
  2. 아이디 선택자: #로 작성된 선택자가 다음 우선순위
  3. 클래스 선택자: .으로 작성된 선택자가 그다음
  4. 태그 선택자: 가장 낮은 우선순위.

7. 반응형 웹 디자인의 기본: 미디어 쿼리

CSS는 다양한 화면 크기에서 잘 동작하도록 미디어 쿼리를 제공함


@media (max-width: 600px) {
    body {
        background-color: lightblue; /* 작은 화면에서는 배경색 변경 */
    }
}
 

마치며

CSS는 웹 디자인의 기초이자 필수 요소임

기본적인 문법과 개념만 이해하더라도 웹 페이지의 스타일을 자유롭게 조작할 수 있음