CSS 기본

CSS는 STYLE.CSS 파일을 만들어 거기에 넣는게 가장 좋은 방법이다.

CSS 를 문서에 넣기 위해서는 head에 link< rel="styleshet" href="이름.css">을 적어야 한다.

text-align 은 텍스트 정렬

font-weight 는 폰트 굵기

text-decoration 은 텍스트를 꾸며줌 ( text-decoration: underline wavy; 를 하면 물결 밑선이 생김 )

letter-spacing 은 글자들의 간격

height 는 글자들의 줄간격 

 

css selector 

* 는 모든 요소 선택

h1,h2 와 같이 여러개의 요소 선택 가능

id #

class . ==> id는 한 페이지에 동일한 아이디가 하나만 들어가기 때문에 class를 더 많이 사용한다. (대부분)

footer a {

    color: red;

}

와 같이 모든 footer 태그의 a에 red color를 입힌다와 같이 부모 자식 selector 도 가능하다. 

h2+button {

    background-color: magenta;

    font-size: 20px;

}

와 같이 h2 바로 다음에 작성된 button에 magenta와 20px 주는 인접 태그도 가능하다.

 

footer>a {

    color: #a8dadc;

}

와 같이 footer 의 직계자손인 a에만 color를 주는 태그도 가능하다.

(footer 의 자식이 ul > li > a 인 a가 있고 footer > a 인 a가 있다면 직계자손인 footer > a 인 a만 color가 주어짐)

 

input[type="password"] {

    color: green;

}

와 같이 input중 type이 password한테만 color를 주는 것도 가능

 

section[class="post"] {

    background-color: purple;

}

section 중 class가 post인 애들한테만 color를 주고 싶은데 다른 많은 태그한테도 class 태그를 사용했을시

위처럼 작성하면 된다. 아니면 아래처럼 더 쉽고 간편한 방법도 있다.

section.post {

    background-color: purple;

}