(0615)css 기본지식 및 selector

cascading style sheet 즉 종속형 스타일 시트이다.
css는 html에 종속되어 style을 표현하는 언어이다.

css는 선택자와 선언으로 구성되어있다.
선택자로 html tag를 선택하고, 해당 tag에 선언을 적용한다.
기본적으로 css는 마지막에 쓴 문법을 우선적으로 html에 적용한다.

html에 css 적용하는 2가지 기본방법

html에 css를 적용하는 방법은 2가지이다.

<head>
  <style>
    h1 {
      font-color:red;
    }
  </style>
</head>

<h1 style="font-color:red;"></h1>

selector란 css를 적용하기 위해 html tag를 선택하는 방법이다

html tag의 이름이나
id 혹은 class 라는 html attribute에 값을 할당하여
그 값으로 해당 html tag를 select 할 수 있다

ul li {
  color:red;
}

부모tag(ul) 자식tag(li) 로 구성되어 있는
위 코드에서처럼 띄어쓰기로 tag를 구분해주면
해당 부모tag에 속하는 자식tag를 모두 선택할 수 있다

해당 부모의 바로 아래 자식tag만 선택하고 싶을 때는 > 를 쓰자

ol>li {
  color:red;
}

위 처럼 >를 사용하여 ol바로 아래 li를 선택할 수 있다

ul, ol {
  color:red;
}

적용할 selector들을 ,로 연결해주면 된다.

html tag의 상태(클릭, 마우스오버 등)에 따라서 적용되는 class

대표적으로 hover, active 등이 있다

http://flukeout.github.io/ 게임하며 즐겁게 공부하자

깊게 이해하고 넓게 소통합니다.