CSS

사용목적

HTML 태그들에 디자인을 입혀 보다 다양한 미적 효과를 추구

적용방법

1. 인라인 스타일

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

태그 style 속성에 직접 작성하는 케이스
위와 같이 태그 내부에 인라인 스타일로 CSS를 적용할 경우 빠르고 간편하나 권장되는 방식은 아님.

why?

• 적용해야할 스타일이 많을 시 가독성이 떨어지므로,
  → html 태그와 css 코드들의 혼재로 유지보수에도 악영향

그렇다면..

2. style 태그

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

• 이 역시 html과 css가 기능적으로 분리되지 않았으므로 적합하다 볼 수 없음

그러므로

3. CSS파일 작성

CSS 파일을 별도로 작성하고,

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

html 파일의 head 섹션에 위 내용을 추가해 html 파일과 css 파일을 연결한다

CSS 작성방법

폰트 스타일

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

• 좌에서 우로 해당 브라우저가 지원하는 폰트에 한해 우선적으로 적용하라는 뜻(Georgia가 최우선시됨)
• Times New Roman의 경우 띄어쓰기가 들어가있어 쌍따옴표 처리
• 폰트 크기의 단위는 픽셀

텍스트 스타일

1. 정렬

.center {
  text-align: center;
}

• 기본값은 왼쪽 정렬
• span은 inline element로써 텍스트 길이만큼 영역을 차지하기 때문에 텍스트 정렬이 일어나지 않는다

2. 들여쓰기

.js-description {
  text-indent: 50px;
}

• 들여쓰기 단위는 픽셀
• 참고 1: Blockquote은 인용구문에 사용하는 태그로 브라우저에서 자동적으로 좌우 여백을 적용
• 참고 2: 자바스크립트의 경우  를 입력하면 스페이스 추가 가능