웹프로그래밍 CSS3/CSS 사용법과 선택자

CSS3 기본 사용법

별초롱언니 2025. 3. 11. 09:28

▣ 스타일 시트 사용 위치 확인하기

p3 {
  color: green;
  background-color: yellow;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>스타일 시트 사용 위치 확인하기</title>

  <!-- 외부 스타일 시트 적용 방법 -->
  <link type="text/css" rel="stylesheet" href="../../CSS/ch06/01_cssstyle_external.css">

  <style>
    p2 {
      color: blue;
    }
  </style>
</head>

<body>
  <p1 style="color: red;">인라인 스타일 시트 적용</p1><br>
  <p2>내부 스타일 시트 적용</p2><br>
  <p3>외부 스타일 시트 적용</p3>
</body>
</html>

▣ CSS 적용 우선순위 살펴보기

p {
  color : green;
  background-color: yellow;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <!-- 외부 스타일 시트를 정의하는 위치가 중요 -->
  <link type="text/css" rel="stylesheet" href="../../CSS/ch06/02_css_override.css">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 적용 우선순위 살펴보기</title>

  <style>
    p { color : blue; }
    p { color : yellow; }
    p { color : red; }
  </style>
  
</head>

<body>
  <p>CSS가 중복 정의된 경우 어떤 것이 적용될까?</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 적용 우선순위 살펴보기3</title>
</head>

<style>
  /* !important 우선순위1 */
  p { color : blue !important;}
  p { color : yellow; }
  p { color :  red; }
</style>
  <!-- 외부 스타일 시트를 정의하는 위치가 중요(최종 적용) -->
  <link type="text/css" rel="stylesheet" href="../../CSS/ch06/02_css_override.css">

<body>
  <p>CSS가 중복 정의된 경우 어떤 것이 적용될까? </p>
</body>
</html>