728x90
반응형

1. CSS란

1. 개요

  • CSS(Cascading Style Sheets)는 웹 페이지의 스타일과 디자인을 정의하는 스타일시트 언어이다. HTML은 웹 페이지의 구조와 컨텐츠를 정의하는데 사용되는 반면, CSS는 컨텐츠의 레이아웃, 색상, 글꼴, 간격 등의 시각적 표현을 제어한다.
  • CSS를 사용하면 웹 페이지의 여러가지 스타일을 중앙 집중식으로 관리할 수 있어 효율적이며, 유지 관리가 쉬워진다.

CSS 웹페이지 구성

2. 사용법

  • CSS는 선택자(Selector)를 사용하여 HTML 요소를 대상으로 지정하고, 대상에 적용 할 스타일 속성을 정의한다. 적용 방식에 따라 아래와 같이 세 가지로 나눌 수 있다.
    1. 내부 스타일 시트 방식
      1. HTML 문서의 <head>태그 안의 <style> 태그 내에 작성 된 CSS 코드를 적용
    2. 외부 스타일 시트 방식
      1. <link rel="stylesheet" href="css 외부 파일 경로">를 통해 CSS 파일(CSS 확장자를 가짐)에 작성된 CSS 코드를 적용
    3. 인라인 방식
      1. HTML 요소의 style 속성(attribute)에 CSS 코드를 적용

3. style과 stylesheet

  • style
    • HTML 태그의 style 속성(attribute)에 CSS 코드를 작성한 것이다. 해당 태그에만 스타일이 적용된다.
  • stylesheet
    • HTML 문서에서는 CSS 파일을 외부 파일로 분리하여 사용할 수 있다. 이렇게 분리한 CSS 파일을 스타일 시트라고 부르며, 이를 HTML 문서에 연결하여 사용한다.
    • 스타일 시트는 HTML 문서에서 스타일을 관리하기 쉽고, 중복 스타일을 제거할 수 있어 보다 효율적이다.
    • 스타일 시트에는 다양한 선택자를 사용하여 스타일을 적용할 수 있다.
    • 스타일 시트는 내부 스타일 시트 방식과 외부 스타일 시트 방식으로 작성할 수 있다.
  • 내부 스타일시트
    • CSS 코드를 HTML 문서 내부에 포함하여 작성하는 방식이다.
    • 이 방식에서는 HTML 문서의 head 태그 안에 style 태그를 사용하여 CSS 코드를 작성한다.
    • 이렇게 작성한 CSS 코드는 해당 HTML 문서의 모든 요소에 대해 적용된다.
    • 이 방식의 장점은 CSS 코드와 HTML 코드가 같은 파일에 있으므로 파일 관리가 용이하다는 것이다.
    • 또한, 다른 사람이 HTML 코드를 수정하지 않더라도 CSS 코드만 수정하여 디자인을 변경할 수 있다는 것이다.
    • 내부 스타일시트 예시
<!DOCTYPE html>
<html>
<head>
  <title>내부 스타일시트</title>
  <style>
    h1 {
      color: blue;
    }
    p {
      color: red;
    }
  </style>
</head>
<body>
  <h1>Hello World!</h1>
  <p>This is an example of internal style sheet.</p>
</body>
</html>
  • 외부 스타일시트
    • CSS 코드를 HTML 문서에서 분리하여 작성하는 방식이다.
    • 이 방식에서는 HTML 문서의 head 태그 안에서 CSS 파일을 연결하여 사용한다.
    • 이렇게 분리한 CSS 파일을 스타일 시트라고 하며, 이를 HTML 문서에 연결하여 사용한다.
      • 스타일 시트는 HTML 문서에서 스타일을 관리하기 쉽고, 중복 스타일을 제거할 수 있어 보다 효율적이다.
      • 스타일 시트에는 다양한 선택자를 사용하여 스타일을 적용할 수 있다.
    • 스타일 시트는 내부 스타일 시트 방식과 외부 스타일 시트 방식으로 작성할 수 있다.

4. 외부 스타일 시트 방식 예제

  • style.css 파일을 작성한다.
h1 {
    color: red;
}

p {
    color: blue;
}
  • HTML 문서의 head 태그 안에서 link 태그를 사용하여 style.css 파일을 연결한다.
<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Welcome to my website!</h1>
    <p>This is some example text.</p>
</body>
</html>
          ※

이렇게 하면 HTML 문서에서h1 태그에 대한 스타일은 빨간색으로, p 태그에 대한 스타일은 파란색으로 적용된다.

5. 인라인

  • 인라인 방식은 HTML 요소의 style 속성(attribute)을 사용하여 CSS 코드를 적용하는 방식이다.
  • 이 방식은 하나의 HTML 요소에만 스타일을 적용하므로, 다른 HTML 요소에는 동일한 스타일이 적용되지 않는다.
  • 일반적으로 인라인 방식은 내용이 많지 않은 작은 요소에 대해서만 사용하는 것이 좋다.
  • 인라인 방식 예시
<p style="font-size: 24px; color: red;">인라인 방식 예시</p>

      ※ 위 예시에서는p 요소에 직접 style속성을 추가하여 글자 크기와 색상을 지정하고 있다. 

 

728x90
반응형

'이것 저것 개발 공부 > CSS' 카테고리의 다른 글

[CSS] CSS 목록 스타일 완벽 가이드 : ul, ol, li 꾸미는 방법  (0) 2025.03.19
[CSS] CSS 문단 스타일 완벽 가이드: 정렬, 간격, 줄 간격 설정하기  (0) 2025.03.19
[CSS] CSS 텍스트 스타일링 필수 속성 총정리 (font, color, align)  (0) 2025.03.19
[CSS] CSS 글꼴(font) 스타일 개념과 예제 | 폰트 설정하는 법  (0) 2025.03.18
[CSS] CSS 선택자 완벽 가이드 | 초보자도 쉽게 이해하는 스타일링  (0) 2025.03.18

+ Recent posts

티스토리툴바