[HTML-CSS] CSS, 적용방식, 선택자, 결합자, 가상클래스

얄코님의

'제대로 파는 HTML & CSS 강좌-웹 개발 퍼블리싱 끝장내기' 강의를 들으며 정리해보고 있습니다.

지난 강의까지는 HTML에 대해서 알아보았습니다.

이번 시간엔 CSS에 대해 정리를 시작해보겠습니다.

 

CSS를 적용하는 방식

CSS를 적용하는 방식이 세가지 있다고 해요. 

• inline style : 태그 안에 style이라는 속성을 이용해서 적용, 그러나 HTML과 분리되지 않기때문에 특별한 경우가 아니면 사용 안 함.

• internal style sheet : head 태그 안에 style태그를 넣어서 적용, 그러나 코드가 길어지면 스크롤도 많이 해야하고 코드가 두배로 늘어남.

• linking style sheet : 외부의 CSS파일을 HTML문서에 연결해 적용.가장 널리 사용되는 방식

CSS파일을 새로 만들어주고 다음과 같이 작성해줍니다. 

CSS파일과 HTML파일을 연결시키기 위해 link 태그를 사용합니다.

결과

이제 원하는 요소를 선택해서 CSS를 적용하게 될텐데요. 

 

선택자

선택자 {

    속성1 : 값 ;

    속성2 : 값;

}

 

* : 모든 요소 선택. 해당 HTML의 모든 태그들에 CSS 속성이 적용됨.

뒤에 동일하게 *를 사용해 모든 요소를 선택하여 적용하게되면 뒤에 오는 속성이 우선순위가 높기에 해당 속성이 적용됨.

 

태그 선택자

: 해당 태그들의 요소들을 선택하여 CSS 속성 적용. 모든 요소를 선택하는 것보다 우선순위를 가짐.

클래스 선택자

 

: blue라는 클래스를 가진 요소들만 CSS 적용.

 

 

: p태그를 가지며 blue클래스를 가진 요소들에게 CSS적용. 다른 선택자에 이어 붙이는 경우. 

 

: 요소가 클래스를 여러 개 가지는 경우는 클래스 속성에서 공백으로 구분. CSS에서는 둘을 붙여주어 같이 씀.

구체적일수록 우선순위를 가짐.  

 

id 선택자

: 클래스는 한 HTML 페이지에서 여러개 공유해서 사용 가능하지만 id는 딱 하나만 사용 가능. (자바스크립트에서 문제 생김.)

 

그룹 선택자

 

결합자 : 복합 선택자

자손 결합자

동생 결합자

 

가상 클래스

: ol태그의 첫번째 자식 태그와 마지막 자식 태그 요소에 CSS 적용

 

: 마우스가 올라가 있을 때 CSS 적용.