CSS

• HTML 태그들에 디자인을 입혀주는 것

CSS 적용 방식 세가지

1. 인라인(inline) 스타일 : HTML 태그 내 style 속성(attribute)으로 직접 작성

   • 편하지만, html과 분리되지 않아 유지보수가 어려움
   • 적용해야할 스타일이 많아지면 코드가 길어져 가독성이 떨어짐

2. style 태그(<style'>) : HTML 태그인 style 태그를 만들어서 그 안에 CSS문법으로 스타일 작성

   • 기능적으로는 HTML 태그와 분리되지 않아서 유지보수가 어려움

3. CSS 파일을 만들어서 작성 : CSS 파일을 하나 만들고, <'link href="style.css" rel="stylesheet" type="text/css" />을 HTML 파일에 붙여 넣는다.

   • rel은 html 파일과 css파일의 관계를 나타내줘서, rel은 항상 'stylesheet'다.

CSS 작성법

p {              // p : 선택자(selector)
color: red;      // color : 속성(property)
}                // red : 속성 값(property value)

• selector로 html 태그가 올 때는 그냥 태그 이름만 적어도 되지만,
  id로 올 때는 #을 이름에 붙여야 하고,
  class가 올 때는 .(dot)을 이름에 붙여야 한다.

Font

• font-family : Font 스타일을 지정하는 속성

#title {
  font-family: Georgia, "Times New Roman", Times, serif;
}

위에 코드의 의미는

• 만약 브라우저가 Georgia 라는 폰트를 지원해주면 Georgia 폰트로 적용
• Georgia 폰트가 지원되지 않으면, "Times New Roman"을 적용,
• 이것도 지원되지 않으면 Times을 적용
• 앞의 세 가지 폰트가 전부 없으면 serif라는 폰트를 사용하겠다는 의미
• "Times New Roman"만 ""(쌍따옴표)로 감싸져 있는데, 폰트 이름에 띄워쓰기가 되어있으면 ""(쌍따옴표)를 사용해야합니다.

Color

• color : css property로 글자 색깔을 바꿔준다.

• hex : 여섯자리로 표현 - #eb4639

• rgb 값: 빨강, 초록, 파랑으로 표현 - rgb(235, 70, 57)

Margin

• border(테두리) 밖에 있는 여백

padding

• border(테두리) 내에서 요소를 둘러싼 여백

실질적인 너비

• Margin + border + padding + 실제 요소의 너비