css 기본 개념 / 선택자와 선언 / 선택자의 종류( 태그 / 아이디 / 클래스 )에 대해서 정리한다.
CSS
- 웹 페이지를 꾸며주는 언어
- html이 정보로서의 표현을 집중하기 위해서 디자인을 담당하는 언어
- <style></style> 태그안에서 동작하는 코드
- HTML에서 CSS를 만들게 되면서 정보와 디자인의 분리가 명확해졌다.
- CSS 문법 안에 효과를 줄때 구분자는 ';' 세미콜론을 이용해서 구분하게 된다.
- CSS를 사용하는 방법
1. 태그 안에 style 속성을 이용하면 그안에 CSS에 대한 값을 줄 수 있다.
( style 속성에 대한 값은 무조건 CSS가 들어가도록 약속이 되있다 )
2. <style></style> 태그 안에 CSS를 이용해서 디자인을 바꿀 수 있다.
( <style> 태그안에 태그 선택자를 이용해서 <h2> 태그에 대한 CSS를 적용시키고
html style 속성을 이용해서 원하는 위치에만 CSS를 적용 시킬수도 있다... )
선택자와 선언( Selector and Declaration )
- 해당 하는 위치에 대한 CSS를 적용할때 지정해야 하는데 이때 사용하는 것을 선택자라고 하고
선택자 안에 들어가는 CSS에 대한 내용을 선언이라고 한다.
( CSS 선택자와 선언을 쉽게 이해하기 위한 그림이다.. )
( 태그 선택자를 이용해서 <li> 태그에 대해서 CSS를 한번에 다 적용 시켰다... )
선택자의 종류
- 태그 선택자, 아이디 선택자( # ), 클래스 선택자( . )
* 아이디 선택자 사용 방법
- HTML id 속성에 대한 속성값을 CSS에서 선택할때 그 태그의 이름 앞에 #을 주게 되면
해당 id에 대한 이름을 가진 곳에 CSS 설정이 모두 적용이 된다.
( 다만 id의 값은 중복되면 안되고 CSS가 적용은 되지만 그건 규칙 위반으로 간주한다.
여러개의 태그 디자인을 한번에 다루려면 클래스 선택자를 이용하면 된다.. )
( 아이디 선택자를 사용할때는 html id 속성에 이름값을 주고
CSS에서 id에 대한 선택자를 적을때 앞쪽에 #을 적어주며 사용 가능하다..
대신 아이디 선택자를 사용할때는 id에 대한 중복은 허용하지 않는다... )
* 클래스 선택자 사용 방법
- HTML class 속성을 이용해서 이름값을 넣어주고 CSS에서는 선택자 이름 앞에 .을 적어주면 되고
클래스의 중복 사용이 가능하며 태그의 종류에 관계없이 하나의 클래스를 적용할 수 있다.
- CSS에서 클래스를 이용할때는 선택자 이름 앞에 .을 붙여주면 이용이 가능하다.
( 클래스 선택자를 이용할때는 html class 속성과 CSS에서 선택자 이름앞에 .을 붙여주게 되고
아이디 선택자와는 다르게 중복이 가능하고 태그의 종류가 다르다해도 CSS를 모두 적용 시킬 수 있다... )
부모 자식 선택자
- 좀더 섬세한 CSS 디자인을 적용 시키려고 할때 사용
- 선택자를 사용할때 띄워쓰기를 이용해서 해당 태그의 하위로 내려간다.
- '>' 기호를 이용하게 되면 바로 아래 있는 태그에만 CSS 설정이 적용되고
공백으로 구분하게 되면 하위에 있는 모든 해당 태그에게 CSS 설정이 적용된다.
그리고 종류가 다른 태그에 같은 내용의 CSS를 적용시키려면 ','로 구분해서
선택자 이름을 적어주는게 불필요한 CSS 코드를 없앨수있다.
( 부모 자식 선택자를 이용하면 더 섬세하게 CSS를 다룰수 있고
'>' 기호를 사용하면 바로 하위에 있는 태그에만 CSS가 적용되고
띄워쓰기를 이용해서 구분하면 하위에 있는 해당 전체 태그에 모두 CSS가 적용된다.. )
선택자 팁
- CSS CheatSheet를 이용해서 필요한 부분을 찾아본다.. ( 검색을 통해서 찾아보면 나옴.. )
CSS 선택자 관련 게임
- 선택자를 사용해보는 CSS 선택자 게임
- http://flukeout.github.io/
댓글