1) 학습한 내용
적용 우선순위
CSS 적용 순서
- 속성 값 뒤에 !important 를 붙인 속성
- HTML에서 style을 직접 지정한 속성
- #id 로 지정한 속성
- .클래스, :추상클래스 로 지정한 속성
- 태그이름 으로 지정한 속성
- 상위 객체에 의해 상속된 속성
같은 우선 순위에 있는 경우, 부모-자식 관계가 많은 경우가 우선되며, 모든 설정이 같은 경우 나중에 선언한 것이 우선되어 적용됩니다.
!important
우선순위를 무시하고, 꼭 적용 시키고 싶은 속성이 있다면, 속성 값 뒤에 !important 를 붙여서 적용시켜주면 된다.
.normal { color: blue }
.compulsion{ color: black !important }
다중 조건 선택자
개요
CSS 선택자에서도 AND나 OR과 같은 선택자를 비슷하게 나마 쓸 수 있습니다.
- 태그이름#아이디 { 속성1:속성값; 속성2:속성값; }
- 태그이름.클래스명 { 속성1:속성값; 속성2:속성값; }
- .클래스명#아이디 { 속성1:속성값; 속성2:속성값; }
선택자 사이에 공백이 제거되는 경우 여러 선택자를 동시에 만족하는 태그에 스타일을 적용 할 수 있다. (AND 연산)
- #아이디, .클래스명{ 속성1:속성값; 속성2:속성값; }
- 태그이름, .클래스명{ 속성1:속성값; 속성2:속성값; }
쉼표 (,)를 통해 두 선택자 중 하나라도 만족시 적용되는 조건을 만들 수도 있다. (OR 연산)
가상 클래스 선택자
개요
선택자 뒤에 :가상이벤트를 붙이면 특정 이벤트마다 적용 할 스타일을 설정 할 수 있으며, 이를 가상 (추상)클래스라 한다.
:link - 방문한 적이 없는 링크
:visited - 방문한 적이 있는 링크
:hover - 마우스를 롤오버 했을 때
:active - 마우스를 클릭했을 때
:focus - 포커스 되었을 때 (input 태그 등)
:first - 첫번째 요소
:last - 마지막 요소
:first-child - 첫번째 자식
:last-child - 마지막 자식
:nth-child(2n+1) - 홀수 번째 자식
2) 학습내용 중 어려웠던 점
CSS 작성법은 간단하지만 CSS를 작성하다보면 클래스와 id를 헷갈려서 전혀 엉뚱한 곳에다 작성을 하거나 아예 오타를 치면 그걸 찾는데 많은 시간을 할애한다는 단점이 있다.
3) 해결방법
CSS를 작성할 때, 다시 한 번 훑어보거나 CSS의 적용 위치가 제대로 타이핑 되었는지 확인해야 한다. 그리고, HTML 파일과 CSS 파일을 따로 열어서 확인해야 할 필요가 있다.
4) 학습소감
CSS 자체는 쉽지만 CSS 작성의 최대 난제는 코드가 길어지면 길어질수록 그만큼 복잡해진다는 단점이 있다.
