TIL 02 ｜CSS

✏️Study Goal
: html의 단짝 css에 대한 기초 지식을 알아보자!

🐧 CSS 작성

html이 뼈와 골격을 갖추는 것이라면 css는 피부, 옷을 담당한다. html의 <p>태그가 어떤 문장을 작성시키면 css는 문장의 색, 정렬 등을 지정시킬 수 있다.

🧊 CSS 적용 방법

css를 html에 적용시키는 방법은 3가지가 있다.

1. 인라인 스타일

<h1 style="color: 색이름;"> 내용 </h1>

: 빠르고 편하지만 스타일이 늘어나는만큼 코드 가독성이 떨어지고 html태그와 style코드가 섞여있어 유지보수에 적합하지 않다.

2. 스타일 태그

<style>
 h1 {
  color: 색이름;
 }
</style>

: html에 <style>태그를 사용하여 css를 작성한다. 한 파일에서 html과 css를 작성할 수 있어 편하고 빠르지만 기능은 분리되었더라도 파일 자체가 분리된 것은 아니기 때문에 이 또한 유지 보수에 적합하지 않다.

3. 스타일 태그

<link href="파일이름.css" rel="stylesheet" type="text/css" />

: html과 css 파일을 각각 따로 작성하는 방법으로 코드의 각각의 의미는 다음과 같다.

• <link> : css 파일을 링크하는 태그
• <href> : css 파일 경로를 적는 속성
• <type> : link 태그와 연결된 파일이 어떤 유형인지 알려주는 속성
• <rel> : 연결된 파일 간의 관계를 알려주는 속성으로 css파일 링크시 항상 "stylesheet"값을 대입한다.