250915_css/01_syntax.html at main · DevCoursePracticeProjects/250915_css · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- ctrl + / (window), cmd + / (mac) -->
    <title>CSS 기초</title>
    <style>
      p {
        /* css 주석 (ctrl + /, cmd + /) */
        /* color: aqua; */
        color: skyblue;
      }
    </style>
    <link rel="stylesheet" href="style.css" />
    <!-- '동일한 (우선도의) 선택자'라면 나중에 나오는게 최종적으로 적용된다 -->
  </head>
  <body>
    <!-- html 기본 양식이 !로 작성된 상황에서 우클릭 (Open with Live Server) -->
    <p style="color: tomato; font-weight: bold">
      인라인 스타일 : CSS 관련 문법이 style attribute를 통해 요소(element)에
      직접 적용 (특정 요소에만 적용이 되서 재사용성이 떨어짐, 가장 확실히 적용이
      됨, 한 개의 요소에 대한 것이기 때문에 적용 우선도 높음)
    </p>
    <p>
      내부 스타일 시트 : 일반적으로 head 태그 안에 집어넣은 style 태그에 css
      문법으로 '선택자'를 사용해서 기술 (html 파일 단위)
    </p>
    <p>재사용성, 일괄적용</p>
    <h1>외부 스타일 시트 : 외부에 일반적으로 ().css 파일을 만들어서 적용</h1>
    <p>
      내부 스타일 시트와 외부 스타일 시트 간의 우선도는 어떻게 되나요? -> 동일한
      선택자의 경우엔 나중에 나오는게 '덮어씌우는' 개념
    </p>
  </body>
</html>