1. Css for Styling

3.1 Basic CSS

• The bad way to style

:이렇게 inline형식으로 하면 매우 안좋다.

• CSS는 어떻게 적용할까?

.css파일을 만들어서 거기에 코드를 적고 link 시키는게 좋다.

• Basic CSS rule syntax

CSS의 기본형식은 이렇게 어떤 tag에 적용시킬지 쓰고 {}안에 property와 value를 넣는다.

*은 모든 element를 뜻한다.

• CSS properties

• Colors

색을 줄 수 있는건 color과 background color밖에 없다.

색을 지정해주는 건 위에 있듯이 3가지 방법으로 줄 수 있다.

• Fonts

Font-family는 글자체를 지정해준다.

예시처럼 여러가지 폰트를 주면 첫번째것이 되면 하고 안되면 두번째 준 폰트로 지정하고 이런 식이다.

Font-size는 폰트의 크기를 지정해주는 것인다.  PX, PT, EM이렇게 3가지 방법으로 크기를 줄 수 있다.

font-weight는 bold체로 할지 안할지 정해주는 것이다.

font 로 필요한 font property를 한번에 다 줄 수 있다.

• *Grouping style

여러개의 tag에 한번에 CSS하려고 하면 ,하고 옆에 써주면 된다.

• *주석

주석은 // 와 /* */이다

• *validator

자신이 작성한 CSS가 문법에 맞는지 어디가 틀렸는지 알려주는 validator이다

jigsaw.w3.org/css-validator/

3.2 CSS properties

• Text

text-align은 정렬을 뜻한느데 left, right, center, justify(다른 것에 맞춰가는것)

Text-decoration은 밑줄 윗줄 중간줄을 쓰는 것이다. 여러개가 같이 쓰일 수 도 있다.

Font-shadow는 그림자를 지정해주는데 x축 y축 (기준이 다름 조심!) 그리고 색을 지정해줄수 있다.

• Backgrounds

Background-image는 url을 줘서 배경에 사진을 넣을 수 있다.

Background-repeat는 배경 사진을 x축 반복, y축 반복, 반복없이를 지정해줄 수 있다.

Background-position은 배경 그림을 어떤 위치로 할지 정한다 정확한 위치도 되고 left right bottom같은 것도 된다.

• List-style-type

ol특수 style인데 List-style-type을 주고 번호를 매기는 것을 바꿀 수 있다.

• Table

Table에 관련된 CSS를 줄 수 있다. 

• Border-collapse

Border-collapse : collapse를 주면 바깥 외관이 1줄이 된다.

• *rowspan and colspan

colspan은 열합체이고 rowspan은 줄합체이다. 각각 칸을 몇개씩 줄여줘야한다.

• Column styles : <col>, <colgroup>

col은 각각의 column을 지정해 줄 수 있다.colgroup은 col을 묶는 것이다.

• Don't use tables for layout!!!

중요한 점이다 . 테이블은 절때 레이아웃으로 쓰이면 안된다.!!!!!!!!!!!!!!!!!!!

• New Features

몇몇 개의 더 있는 기능인다. table corner을 둥글게 줄 수 도 있다.

3.3 More Css Syntax

• Body styles

body태그를 지정하고 속성을 주면 모든 body에 적용이 된다.

• Styles that conflict

style이 여러개 줘서 충돌 할 경우 뒤에 쓰여진 code가 적용된다.

• *Embedding style sheets : <style>

html안에서도 inline방법과 다르게 style속성으로 css를 줄수 있다.

• *Inline style

inline 방법은 위에서의 방법과 다르게 각각의 tag에 속성을 줘서 매우 비효율적이다.

• *Content vs. presentation

• Cascading style sheets

Cascading은 css의 중요도로써 중요도가 높은 것이 보통 적용이 됩니다.

• Inheriting styles

• IDs, & ID selectors

ID는 1개 밖에 쓰일수 없다. id는 #으로 불러온다.

• Classes & Class selectors

class는 여러개 쓸 수 있다. .으로 불러온다.

• CSS pseudo-classes

특수한 경우에 css를 주는 경우이다.