CSS 적용

1. 종류

  - 인라인 스타일(Inline Style)

  - 내부 스타일 시트(Internal Style Sheet)

  - 외부 스타일 시트(External Style Sheet)

 

 

 1-1. 인라인 스타일(Inline Style)

<body>
    <h1 style="color: blue; background-color: brown;">내용</h1>
</body>

  -  HTML 요소 내부에 Style 속성을 사용하여 CSS 스타일을 적용하는 방법이다.

  - "CSS의미, 선택자, 주석" 참고

 

 

1-2. 내부 스타일 시트(Internal Style Sheet)

<head>
    <style>
        body { color: blue; background-color:  brown;}
        h1 {color: brown; background-color: blue;}
    </style>
</head>

  - <style> 태그를 사용하여 CSS 스타일을 적용한다.

 

 

1-3. 외부 스타일 시트(External Style Sheet)

/*CSS*/
h1 { color: brown; background-color: red;}

<!-- HTML -->
<head>
    <link rel="stylesheet" href="project.css">
</head>

<h1>내용</h1>

  - HYML 파일과 CSS 파일을 별도로 지정한 후 필요할 때마다 파일을 가져와 사용한다.

  - 외부 스타일 시트를 불러올 때는 <link> 태그를 이용한다.

  - <link> 태그 : <link rel="stylesheet" href="외부 스타일 파일 경로">

 

2. 스타일 적용 우선순위 

  ① 인라인 스타일

  ② 내부 / 외부 스타일 시트

  ③ 웹 브라우저 기본 스타일

 

  - 인라인 스타일이 적용된 태그는 내부 / 외부 스타일 시트와는 상관없이 무조건 인라인 스타일이 적용된다.

  - 내부 / 외부 스타일 시트는 가장 마지막에 적용된 스타일 시트가 적용된다.

 

'FrontEnd > Css' 카테고리의 다른 글

[CSS] 링크(link), 리스트(list), 테이블(table)  (0) 2021.07.24
[CSS] 글꼴  (0) 2021.07.24
[CSS] 텍스트(text) 속성  (0) 2021.07.24
[CSS] 배경(background)  (0) 2021.07.23
[CSS] CSS의미, 선택자, 주석  (0) 2021.07.22