CSS란
문서를 디자인하고 배치하는 역할을 한다.
head태그 안에 style태그로 연결하면 사용할 수 있다. HTML 안에서 적용할 때는 style 태그가 필요했지만 외부 CSS 파일에 작성할 때는 절대 쓰면 안되고 바로 디자인 태그 작성하면 된다. 그리고 웹디자인 실기시험 볼 때는 꼭 외부 파일로 작성해서 link 할 것. 대부분 외부 파일을 link해서 사용한다.
HTML 계층 구조에 따라 CSS 작성하는 버릇을 들일 것! HTML에서 body가 더 큰 태그이므로 CSS에서도 h1보다 더 위에 작성한다. 물론 css가 동작하는 데엔 아무 문제 없지만 나중에 코드 길어지면 찾기 힘들어진다. 그리고 나중에 쓴 코드가 이전 코드에 덮어씌워진다. (셀렉터 중복되면 나중에 작성한 코드가 적용된다.)
선택자
CSS의 선택자는 다음과 같다
- 태그 선택자 :
blah - 클래스 선택자 :
.blah - 아이디 선택자 :
#blah - 태그와 함께 쓰는 선택자 :
blah.blah혹은blah#blah같은
속성이 완전히 똑같은 두 태그는 묶어서 한번에 작성하자! 콤마(,)로 구분한다.
태그 두 개를 같이 쓸 때도 있는데, 위의 경우와 다른건 앞 태그가 뒤 태그의 부모일 경우이다. 사진의 경우는 p태그 안의 span 태그에 적용하겠다는 뜻! 그룹과 하위를 잘 구분할 것.
! 선택자 이름은 숫자 또는 특수기호로 시작하지 않도록 하고
! 단어가 중복될 경우 - 나 _를 사용하자.
! 선택자 이름은 대소문자가 구분되므로 주의할 것.
선택자의 우선순위
우선순위는 다음과 같다.
1. !important
2. Inline
3. ID Selecter
4. Class Selecter
5. Tag Selecter
태그, 클래스, 아이디는 위에서 설명했고...
- Inline은 style 속성을 사용하여 HTML 문서의 태그 안에 바로 작성해버리는 것을 말한다. 그치 아무래도 외부에서 연결하는 것보다는 내부에 작성한걸 우선하겠지?
- !important 속성은 CSS 속성값 옆에 붙인다. (위치를 잘 기억해두자)
이 속성이 붙은 속성값은 가장 최우선으로 적용된다. 선택자가 태그든 아이디든 상관 없다! 자주 쓰이는 속성은 아니지만 가끔 CSS 충돌 문제 찾을 때 사용되곤 한다고.
