Css(cascading style sheet)

• Html 태그들에 디자인을 입혀준다.

---

1. Inline style

• 태그 style 속성에 직접 작성한다.

<h1 style=“color: red;”>frontend 101</h1>

• 편리하지만 적용해야할 스타일이 많아질수록 가독성이 떨어진다.
• Html 코드와 혼재되어있어 유지보수에도 좋지 않다.

2. Style tag

• Html 파일내에 안에 css문법을 사용하여 스타일을 작성한다.
• 기능적으로 html 구조와 다지인이 분리되지 않앗기 때문에 유지보수에 적합하지 않다.
• 수정할시 각자의 파일을 열어서 확인하는 것이 개발에 좋다.

3. Css 파일에 작성

• Html 파일과 분리하여 css 파일에 따로 작성하는 방법
• Html 파일에서 어느 css 파일이 쓰였는지 브라우저에 알려야 하므로 링크를 해주는 태그를 추가한다.

<link href=“index.css” rel=“stylesheet” type=“text”/css>

• Href: 속성에 css 파일 경로를 작성
• Type: link 태그로 연결되는 파일이 어떤 것인지 알려준다. Css 파일을 연결하므로 값은 항상 “text/css”
• Rel: html 파일과 css 파일과의 관게를 설명하는 속성. css파일을 링크할때는 항상 “stylesheet” 값을 대입

4. Css 작성법

태그 이름

P{
   Color: red;
}

• p: 디자인을 적용할 선택자(selector). 선택자는 태그 이름, class 이름, id 이름 등 여러 종류가 올 수 있다.
• color: property (속성)
• red: 속성 값

class 이름

• selector에 .(dot)을 적어준다.

. ClassName{
Font-weight: bold;
}

id 이름

#profile{
   border-width: 1px;
   text-align: center;
}