css 선택자 기본

 

 

-css 선택자 개요

css는 html문서의 스타일을 꾸미는 데에 사용됩니다. 글자의 크기, 스타일, 색상 부터 요소의 너비, 높이, 위치 등 여러가지 스타일을 줄 수 있습니다. 또한 애니메이션과 반응형 디자인, 자바스크립트와의 상호작용도 가능합니다.

 

주로 태그이름, 클래스와 아이디 등으로 요소를 선택해서 한번에 여러개의 요소에 스타일을 부여하게 됩니다. 이 때 클래스와 아이디 뿐만 아니라, 여러 선택자가 있고 우선순위도 존재합니다. css 선택자로 html 요소를 선택하고, 뒤에{스타일 줄 내용;} 원하는 요소에 대한 스타일 내용을 쓰는 데 목적이 있습니다.

 

 

 

-css 선택자 우선순위

우선순위는 일반적으로 css 문서의 아래로 갈 수록 우선순위가 생깁니다. 또한 선택자를 구체적으로 쓸 수록 우선순위가 높아집니다. 예를들어 그냥 header a라고  선택하는 것 보다, header nav ul li a라고 선택하는 것이 우선순위를 가집니다.

 

 

 

-css 전체 선택자

*(별표)로 html 문서 안에 있는 모든 태그를 선택할 수 있습니다. 브라우저마다 기본으로 주어진 패딩&마진 값이 다른데, 이 값을 리셋할 때 주로 쓰입니다.

 

모든 요소에 적용되는 선택자이기 때문에, 문서의 상단에 쓰는 것이 가독성 측면에서도 좋고 추후에 개별 요소에 적용한 스타일이 아래에 쓰이므로 자연스럽게 우선순위를 가져가 의도대로 스타일을 줄 수 있습니다. 

 

 

 

-css 부모 자식, 자손 관계

html 태그는 부모 태그와 자식 태그로 이루어져 있습니다. 이러한 부모 자식 관계를 css 선택자에서는 "띄어쓰기"로 나타냅니다. 띄어쓰기 앞에 있는 요소가 css 부모 선택자가 되는 것 입니다.

 

• 자손 선택자

footer 태그 안에 있는 address 태그 안에 있는 p 태그를 선택하려면, footer address p라고 선택할 수 있습니다.

이것은 자손 선택자로, footer address 안에 있는 모든 p 태그를 선택하게 됩니다.

 

• 자식 선택자

만약 footer 태그 안에 address 태그 안에 div안에 있는 태그가 또 있어서 의도치 않게 선택이 된다면?

이럴 때 유용하게 쓰이는 선택자는 자식 선택자 입니다. footer address >p 이렇게 써주면 부모의 바로 아래 자식을 선택함으로서 자손을 선택하는 것과 다릅니다. 이 선택자를 이용해 자손 선택자로 스타일을 이미 준 요소라도, 아래에 따로 자식 선택자를 기입하면 원하는 요소만 예외로 하여 스타일을 개별적으로 줄 수 있습니다.

 

 

 

-css 클래스 선택자

1. html 태그에서 div에 class를 부여하려면 <div class="클래스 이름"></div>라고 먼저 씁니다.
2. css문서에서 .(온점)클래스 이름으로 선언해서 선택합니다.

 

css 선택자 중에서 가장 많이 쓰이는 선택자라고 할 수 있습니다. 보통 클래스 선택자로 큰 레이아웃이나 성질을 정의하고, 아래에 클래스이름 자손이나 자식 선택자를 이어씁니다. 결과적으로 아래로 갈 수록 선택자가 길어집니다. 이것은 가독성 측면에서도 좋고, 자연스러운 우선순위를 형성하게 해줍니다.

 

div.클래스 이름 이라고 쓰면, 이런 클래스 이름을 가진 div라고 쓸 수 있습니다. 선택하는 데에는 그다지 불필요 할 수도 있지만, 이렇게 쓰면 요소가 많아졌을 때 요소와 클래스 이름을 기억하기에 좋습니다.

 

 

 

-css id 선택자

1. html 태그에서 div에 id를 부여하려면 <div id="아이디 이름"></div> 라고 먼저 씁니다.
2. css문서에서 #(샵)아이디 이름으로 선언해서 선택합니다.

 

id는 유일하기 때문에 html 태그에 아이디를 부여할 때부터 중복되지 않게 써야합니다. 만약 중복되게 되면 자바스크립트에서 명령을 했을 때 오류가 나타나게 됩니다. 클래스와 마찬가지로 div#아이디 이름 이라고 쓰면, 이런 아이디를 가진 div라고 쓸 수 있습니다.

 

 

 

-css 복수 선택자

서로 다른 1개 이상의 요소에 같은 스타일을 부여하고 싶을 때 선택자 사이에 ,(콤마)를 찍어서 사용합니다.

 

예를 들어 header 안에 있는 ul, footer 안에 있는 ul에 같은 스타일을 주려면 지금 이렇게 말로 풀어 쓴 것 처럼 콤마로 구분해주면 됩니다.

header ul, footer ul{스타일 줄 내용;} 간단하죠? 가독성을 더 주려면 엔터를 한번 쳐서 구분해 주어도 좋습니다.

 

header ul,

footer ul{스타일 줄 내용;} 이렇게요.

 

 

 

 

css 선택자는 위의 내용만 알아도 기본적인 선택이 가능합니다. css 부모 선택자 자식 선택자만 알아도 일단은 선택은 대략적인 선택이 가능하니까요.

 

하지만 이 밖에도 많은 종류가 있습니다. 선택자를 알 수록 길지 않은 명령으로 정확하게 요소를 선택할 수 있습니다. 기초적인 선택자를 익힌 다음에는 꼭 필요한 내용인데, ul li와 같은 여러개가 존재하는 요소에서 특정 요소를 제외할 필요가 있기 때문입니다. 다음 포스팅에 이어서 대략적으로 몇가지 더 설명해드리겠습니다.