728x90

CSS(Cascading StyleSheet)

css는 스타일을 정의하는 문서이다. HTML 문서에 스타일을 추가한다.

css는 다수의 스타일 선언문으로 구성된다.

선택자 {
  속성명1: 속성값1;
  속성명2: 속성값2;
}
/* 주석 */

CSS 적용 방법

1. 인라인 스타일

: 스타일 시트를 사용하지 않고 요소에 직접적으로 스타일을 정의. style 속성 사용

  <p style="color: red;">인라인 스타일</p>

2. 내부 스타일 시트

: 웹 문서 내에 스타일을 정리. <head> 태그 안에 <style>과 </style> 태그 사이에 작성

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    p {
      color: red;
    }
  </style>
</head>
<body>
  <p>인라인 스타일</p>
</body>

3. 외부 스타일 시트

: 스타일을 별도 파일로 저장하여 웹 문서에 연결. <link> 태그 사용

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./main.css">
</head>

<body>
  <p>인라인 스타일</p>
</body>
/* main.css */
p {
  color: red;
}

선택자

선택자는 웹 문서에서 스타일을 적용할 부분을 선택한다.

전체 선택자(*)

문서의 모든 요소에 스타일 적용

* { ... }

타입 선택자

특정 태그를 사용한 모든 요소에 스타일 적용

태그명 { ... }

클래스 선택자

특정 클래스 값이 지정된 모든 요소에 스타일 적용

.클래스명 { ... }

id 선택자

특정 아이디 값이 지정된 요소에 스타일 적용

#아이디명 { ... }

그룹 선택자

여러 선택자를 한번에 스타일 적용. 쉼표로 구분해 여러 선택자를 나열한 후 스타일 정의

선택자1, 선택자2 { ... }
  <style>
    * {
      color: red;
    }
    li {
      color: blue;
    }
    .asia {
      background-color: burlywood;
    }
    #korea {
      color: chartreuse;
    }
    #america, #franch {
      color: khaki;
    }
  </style>
</head>

<body>
  <h1>나라</h1>
  <p>다양한 나라들</p>
  <ul>
    <li class="asia" id="korea">한국</li>
    <li class="asia">일본</li>
    <li class="asia">중국</li>
    <li id="america">미국</li>
    <li id="franch">프랑스</li>
  </ul>
</body>

728x90

스타일 우선순위

스타일 규칙의 중요도와 적용 범위에 따라 우선순위가 결정된다.

!importand > 인라인 스타일 > id 스타일 > 클래스 스타일 > 타입 스타일

스타일 규칙에 !important를 붙이면 그 스타일은 다른 스타일보다 우선순위가 높아진다.

중요도와 적용 범위가 같다면 스타일을 정의한 소스 순서로 우선순위가 정해진다. 나중에 작성한 스타일이 먼저 작성한 스타일을 덮어쓴다.

  <style>
    * {
      color: red;
    }
    li {
      color: blue !important;
    }
    .asia {
      background-color: burlywood;
    }
    #korea {
      color: chartreuse;
    }
    #america, #franch {
      color: khaki;
    }
  </style>

상속

자식 요소에 별도로 스타일을 지정하지 않으면 부모 요소의 스타일 속성이 자식 요소로 전달된다. 모든 속성이 상속되는 것은 아니다. 아래 사이트에서 속성별 상속 여부를 확인할 수 있다.

https://www.w3.org/TR/CSS2/propidx.html

 

Full property table

 

www.w3.org

공용 키워드

스타일 속성마다 상속 가능 여부가 기본적으로 설정되어 있지만 CSS에서 속성의 상속 여부를 제어할 수 있는 키워드를 별도로 지원한다. 모든 속성에 적용할 수 있어 '공용 키워드' 또는 '전역 키워드'라 부른다.

  • inherit: 상속받음
  • initial: 해당 속성의 기본값을 적용
  • unset: 상속 속성은 상속받고, 상속되지 않는 속성은 상속받지 않음
  <style>
    .list {
      /* 상속 되는 예 */
      color: red;
      font-style: italic;
      font-weight: 900;

      /* 상속 안되는 예 */
      border: 3px dashed green;
      padding: 0;
    }
  </style>
</head>

<body>
  <div class="list">
    <ul>
      <li>CSS</li>
      <li>상속 예제</li>
    </ul>
  </div>
</body>

  <style>
    .list {
      /* 상속 되는 예 */
      color: red;
      font-style: italic;
      font-weight: 900;

      /* 상속 안되는 예 */
      border: 3px dashed green;
      padding: 0;
    }

    ul {
      border: inherit;
    }
    li:nth-child(2) {
      color: initial;
      font-style: initial;
      font-weight: initial;
    }
  </style>

728x90

'HTML, CSS' 카테고리의 다른 글

CSS 배경, 텍스트 관련 속성  (0) 2025.04.15
CSS 박스 모델  (0) 2025.04.14
HTML 기초  (0) 2025.04.02
CSS 이론 (2) - 박스 모델 / 우선순위 / 단위  (0) 2025.03.26
CSS 이론 (1) - 적용 방법 / 선택자 / 주요 속성  (1) 2025.03.23

티스토리툴바