CSS 기초 - 선택기, 클래스 선택자, 범용 선택기, 그룹화 선택기

CSS 선택기

CSS 선택기는 스타일을 지정할 HTML 요소를 찾는(선택하는) 데 사용된다

 

위의 코드에서 head 태그 안에 style 태그를 만들어 주었고 body 태그안에는 웹페이지에 보여줄 p 태그가 있다

 

style 태그 안쪽에 해시(#) 문자를 적고 id를 적어주고 해당 아이디의 내용을 중괄호 안에 적어준다

 

body 태그 안에 있는 p 태그중 id 값으로 paral 이 되어있는 p 태그에 위에서 설정한 내용으로 변경되어 웹페이지에 나타나는걸 확인할 수 있다

※ ID 이름은 숫자로 시작할 수 없고 항상 시작태그에 들어가 있어야 한다 ※

 

 

CSS 클래스 선택자

위 사진에서 class 이름이 center인 모든 HTML 요소는 초록색으로 하고 가운데 정렬로 바꾸도록 한다

 

h1 과 p 태그 모두 class 가 center 이므로 초록색 색상의 글자이고 가운데 정렬이 된 상태이다

 

특정 HTML 요소만 클래스의 영향을 받도록 지정할 수도 있다

위 예제에서는 class 가 center 인 것들 중에서 p 요소만을 초록색 글자와 가운데 정렬로 표현을 해 주도록 하였다

 

둘 이상의 클래스를 참조할 수도 있다

위의 예제에서는 center 클래스 말고 large 클래스 하나를 더 추가해 주었고
body 태그 안에 2가지의 클래스를 참조하는 태그를 추가적으로 만들어 주었다

※ 클래스 이름은 숫자로 시작할 수 없다 ※

 

 

CSS 범용 선택기

범용 선택기(*)는 페이지의 모든 HTML 요소를 선택해준다

w3schools - CSS

* { 이곳에 적혀져 있는 내용들은 HTML 모든 페이지에 영향을 미치게 된다 }

 

 

CSS 그룹화 선택기

위 사진처럼 h1, h2, p 선택기 모두 동일한 내용의 스타일 내용이 있으므로 최소화하고 간편하게 하기 위해 선택기를 그룹화 할 수 있다

 

같은내용의 선택기들을 쉼표로 구분하여 위 사진과 같이 보기 좋게 하였다

 

 

 

 

 

w3schools - CSS 공부내용 정리