[Web] #2 CSS - 선택자

해당 카테고리에는 웹에 대한 전반적인 내용을 정리하겠습니다. 학교 수업에서 웹에 대해 많이 학습했지만, 직접 웹 개발자로서 프로젝트에 참여하는 것은 처음입니다. 첫 프로젝트에 웹파트장으로 참여하게 되면서 배우고 느낀 점을 기록하려 합니다. 스스로 개발을 해봐야 비로소 알게 된다는 말이 뭔지 몸소 느끼고 있습니다. 아직 많이 부족하니 지적과 피드백은 언제나 환영입니다. 

---

프로젝트에 웹파트로 참여하면서 느낀 점은 css코드 작성에 굉장히 많은 시간을 쓰고 골을 썩인다는 점이다. 또, css를 잘 못 다룬다는 점이다. 여러 페이지의 css를 좋은 코드로 적으려는 노력도 안 해봐서 그런 거라 생각한다. 개념만 알고 좋은 코드를 위해 머리를 쓰며 노력한 적이 없다. 그치만 분명히 css에도 체계가 있으며 좋은 코드가 분명히 있다. 좋은 코드가 곧 편리함이다. 좋은 코드를 위한 css 위주로 정리해보려 한다.

---

css는 html의 요소가 다 만들어진 후에 적용된다. css도 html과 마찬가지로 위에서부터 아래로 순차적으로 실행되며 맨 아래에 있는 스타일이 위의 스타일을 덮는다. 

 

css는 html을 꾸며주는 역할을 하는데, 그러기 위해서는 html 요소를 선택할 수 있어야 한다. 그래서 등장한 것이 css 선택자이다. 

 

1. 태그 선택자: 태그 이름만 적으면 된다.

 

2. 클래스 선택자: 태그에 관계없이 동일한 스타일을 여러 개의 요소에 주고 싶을 때 사용한다.

html에서 선택하고 싶은 요소들에 동일한 클래스를 적어주면 된다. 클래스 이름은 어떤 기준으로 그룹을 나눈 것인지 이름을 통해서 알 수 있도록 지어주는 것이 좋다. html에서 한 태그에 여러 개의 클래스를 지정할 수 있고 공백으로 구분한다. 

아래와 같이 쓰면 된다. 

<div class="lightblue orange">6</div>

.orange {
	background-color : orange;
}
.lightblue {
	background-color : lightblue;
}

 

3. id 선택자: #id명으로 css를 적는다. 클래스와 비교해 다른 점을 알아야 한다.

html에서 여러 요소에 동일한 클래스를 부여할 수 있고, 하나의 요소에 여러 클래스를 줄 수 있었다.

 

반면 html에서 여러 요소에 동일한 id를 부여할 수 없고 id값은 유일해야 한다.

하나의 id값이 부여된 html 요소는 단 하나여야 한다. 

또한 html에서 하나의 요소에 여러 id를 줄 수 없고 하나의 id만 부여할 수 있다.

 

에러가 나지 않지만 꼭 지켜야 한다.

클래스와 id가 헷갈린다면, html 요소인 element = 나 라고 생각해보면 된다.

클래스는 학생, 알바생 등등. id는 주민번호라고 생각하면 된다. 

 

html에서 하나의 요소가 css에서 태그 선택자, 클래스 선택자, id 선택자로 모두 선택될 수 있다.

css에서 스타일이 중복될 경우, 우선순위가 있다.

id 선택자, 클래스 선택자와 가상 선택자, 태그 선택자 순대로 우선순위가 적용된다.

 

value값 뒤에 !important;를 적어주면 선택자와 상관없이 해당 속성이 무조건적으로 적용된다.

하지만 그만큼 전체적인 맥락을 무시하는 코드이므로 쓰는 것을 권장하지 않는다. 

 

4. 가상 선택자: 위 선택자들로 선택할 수 없는 상황을 선택할 때 사용한다. 대표적으로 어떤 특정 상태를 선택하는 선택자가 있다. 예를 들어 버튼에 마우스를 올렸을 때 버튼의 색이 바뀌는 경우다. 이런 상태를 선택에서 css로 스타일을 줄 수 있다. 

 

hover: 마우스를 위에 올렸을 때 잠깐의 상태

active: 클릭을 하고 있는 상태 즉, 마우스로 계속 누르고 있는 상태

focus: 클릭을 한 번 했을 때 계속 focusing되는 상태. focus상태가 있는 특정 태그에만 가상 선택자 focus를 쓸 수 있다. 예를 들어 input태그가 있다. 

 

div:hover {
	background-color : grey;
}
#green:hover {
	background-color : grey;
}
div:active {
	background-color : purple;
}
input:focus {
	background-color : blue;
}

위와 같이 사용하면 된다.