CSS(Cascading Style Sheets).01

HTML 태그들에 디자인을 입혀주는 것이다.
HTML이 헤더, 문단, 테이블 등으로 정보를 조직화하는 구조를 제공한다면, CSS는 HTML이 아름다워 보이도록 스타일을 입히는 것이다.

1. 인라인 스타일

태그 style 속성에 직접 작성할 수 있다.

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

적용해야할 스타일이 10개가 넘어간다면 코드 가독성이 떨어진다.

2. style 태그

html 파일 내에 css를 작성할 수 있는 방법이다.

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

3. css 파일에 작성

1, 2번은 html 파일에 직접 디자인을 했다면,
3번의 방법은 html 파일과 분리하여 css파일에 따로 작성하는 방법이다.
대신 html파일에서 어느 css파일이 쓰였는지 브라우저에 알려야 하므로,
링크를 해주는 태그를 추가해야 한다.

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

link link태그로 사용할 css파일을 링크해준다.
hrefhref 속성에 css 파일 경로를 작성해준다.
typelink태그로 연결되는 파일이 어떤 것인지 알려준다. 여기서 css file을 연결하므로 type값은 항상 "text/css"해준다.
relrel은 HTML file과 CSS file과의 관계를 설명하는 속성이다. css파일을 링크할 때는 항상 "stylesheet"값을 대입해준다.


CSS 작성법

스크린샷 2019-08-10 오후 9.46.45.png

선택자(selector)를 지정하고
위의 예제는 p라는 태그의 내용(텍스트)을 빨간색으로 바꾼다는 뜻이다.
콜론(:)을 기준으로
왼쪽의 color는 property(속성)이라고 하며,
오른쪽의 red는 속성 값이다.
selector(선택자)는 여러 종류가 올 수 있다.
태그이름도 올 수 있고, class이름도, id 이름도 올 수 있다.

tag: 태그이름

p {
  font-size: 12px;
}

이러한 css가 적용되면, 모든 p태그의 글씨 크기가 12픽셀로 적용된다.

class: .클래스이름

selector가 태그였을 때는 단순히 태그이름만 적어주었다.
그런데 클래스에 디자인을 적용하고 싶을 때는 selector에 .(dot)이 필요하다.
아래와 같이 .(dot)클래스이름 이라고 selector를 작성해주어야 한다.

.profile-detail {
  font-weight: bold;

"profile-detail" 이라는 클래스가 적용된 태그에는 모두 글씨 두께가 두꺼워 진다.

<p class="profile-detail">이것도 두꺼워 지고</p>
<span class="profile-detail">이것도</span>
<div class="profile-detail">그리고 이것도..</div>

id: #아이디이름

해당 id의 요소만 스타일이 적용된다.

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

font style

font family

font-family는 폰트 스타일을 지정하는 속성

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

Georgia, "Times New Roman", Times, serif 라는 값을 해석해보자면,
브라우저가 Georgia 라는 폰트를 지원해주면 Georgia 폰트로 적용하겠다는 뜻이다.
만약 Georgia 폰트가 지원되지 않으면, "Times New Roman"을, 이것도 없으면 Times, 그리고 앞의 세 가지 폰트가 전부 없으면 serif라는 폰트를 사용하겠다는 뜻이다.

"Times New Roman"만 ""(쌍따옴표)로 감싸져 있는데,
폰트 이름에 띄워쓰기가 되어있으면 ""(쌍따옴표)를 사용해야한다.

font size

.big-size-font {
  font-size: 50px;
}

폰트 크기 단위는 'px', 'em', 'pt'등 여러가지 있다.

font weight

.bold-font {
  font-weight: bold;  =200px
}

글씨 두께를 조절하는 property이다.

font style

a {
  font-style: italic;
}

글씨 스타일을 바꿀 수 있다.

color

.pink {
  color: pink;
}
.yellow {
  color: yellow;
}

더 세밀한 색표현

h1 {
 color: #eb4639;
}
h1 {
 color: rgb(235, 70, 57);
}
h1 {
 color: hsl(4, 82%, 57%);
}

hex 색상코드: 여섯자리로 표현 - #eb4639
rgb 값: 빨강, 초록, 파랑으로 표현 - rgb(235, 70, 57)
hsl: 색상, 채도, 명도(hue, saturation, lightness)로 표현 - hsl(4, 82%, 57%)
등 여러가지로 표현할 수 있다.