CSS 스타일링 방법

Inline

html 내의 element에 바로 스타일 정의하는 방식
html 작업을 하며, 그 때 그 때 element마다 적용하기에 직관적이긴 하지만 너무 지저분해진다.

<p style='color: red;'>I'm learning to code!</p>

Internal

html의 head에서 각 element에 대한 style을 정의하는 방식
Inlined에 비해 비교적 깔끔하지만, 여전히 html 내에 있어 다소 지저분하다.

<head>
  <style>
    h1 {
      color: red;
    }
  </style>
</head>

External

같은 위치(동일한 폴더 내에) css파일(보통 style.css)을 만들어 html 파일과 연결시키는 방식
html의 head에 link를 사용한다.
href는 css파일의 주소(url도 가능하다), rel는 relation의 약자로 html파일과 link된 파일간의 관계를 설명한다.
사실상 거의 External 방식만 사용한다고 봐도 무방하다!
우리가 변수를 선언하거나 함수를 정의하여 계속 사용할 수 있듯이, External 방식으로 style.css를 만들어두면 계속 사용 가능하다!

<!-- html 파일 -->
<head>
  <link href="./style.css" rel="stylesheet">
</head>

/* css 파일 */
p {
  color: blue;
  font-size: 5px;
}

'🎭 HTML CSS > 크스스' 카테고리의 다른 글

[CSS] Position과 Display (0)	2022.05.20
[CSS] box-sizing : content-box VS border-box (0)	2022.05.19
[CSS] Selector(선택자) (0)	2022.05.19

티스토리툴바