CSS

CSS의 정의

• CSS(Cascading Style Sheets)의 줄임말
• HTML 태그들에 디자인을 입혀주는 것

CSS의 적용 방법

1. 인라인 스타일:

태그 style 속성에 직접 작성

<h1 style="color: red;">FRONTEND 101</h1>

• 장점 : 빠르고 편함
• 단점 : 코드 가독성이 떨어짐, 유지보수에 나쁨

2. style 태그:

style 태그 사이에 css문법을 사용하여 작성

<style>
 h2 {
  color: #408090;
 }
</style>

• 장점 : 빠르고 편함
• 단점 : 유지보수에 적합하지 않음

3. CSS파일에 작성:

html 파일과 분리하여 css파일에 따로 작성하는 방법
링크를 해주는 태그를 추가해야 함

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

1. link — link태그로 사용할 css파일을 링크
2. href — href 속성에 css 파일 경로를 작성
3. type — link태그로 연결되는 파일이 어떤 것인지 알려줌, 여기서 css file을 연결하므로 type값은 항상 "text/css"
4. rel — rel은 HTML file과 CSS file과의 관계를 설명하는 속성, css파일을 링크할 때는 항상 "stylesheet"값을 대입

CSS 작성법

디자인을 적용할 선택자(selector)를 지정하고, 어떤 디자인을 적용할지 작성

tag: 태그이름

p {
  font-size: 12px;
}

class: .클래스이름

.profile-detail {
  font-weight: bold;
}

id: #아이디이름

#profile {
  border-width: 1px;
  border-color: black;
  border-style: solid;
  text-align: center;
}

모든태그: *

* {
  box-sizing: border-box;
}