CSS 기본 2

CSS 선택자

• 태그 선택자 => ex. div { }

• id 선택자 => ex. #id {}

• class 선택자 => ex. .class {}

• 그룹 선택자 => ex. div, span, p {} [div, span, p 태그를 선택하여 한 번에 같은 속성을 줄 수 있다]
  
  

• 자손 선택자 => ex. .box span [box라는 클래스 안에 있는 span 태그를 선택한다]

• 자손 선택자 (직속자손만) => ex. .box > span [box라는 클래스 안에 있는 자손들 중 바로 직손 자손인 span 태그만 선택한다]

• 다중 선택자 => ex. .box#title [box라는 클래스와 title이란 아이디 둘 다를 가지고 있는 태그를 선택한다]
  
  

+a) ex.<div class="class1 class2"> <= 이런 식으로 class 를 여러 개 지정할 수도 있음

가상클래스 선택자

first-child

• first-child => ex. .box1 div:first-child {} [box1 안에 있는 태그 중 첫 번째를 선택한다]
• last-child => ex. .box1 div:last-child {} [box1 안에 있는 태그 중 마지막을 선택한다]
• 직접 지정 => ex. .box1 div:nth-child(3) {} [box1 안에 있는 태그 중 3번째를 선택한다]

first-of-type

• first-of-type => ex. .box1 div:first-of-type { } [box1 안에 있는 div 태그 중 첫 번째를 선택한다]
• 직접 지정 => ex. .box1 div:nth-of-type(3) [box1 안에 있는 div 태그 중 3번째를 선택한다]

+a)div:first-child{ }, div:first-of-type <= 이런식으로 태그만 단독으로 해서 선택도 가능

+a) ex. 3번째 [div] 태그를 선택하는 경우
       div:nth-child(3)는 상위 부모태그 내에 div, span같은 태그들 포함해서 전체 태그들 중에 3번째       태그 선택
       div:nth-of-type(3)은 전체 태그들 중에 3번째 div 태그를 선택 (div만 순서로 셈)

focus

focus되어 있는 요소를 선택하는 선택자

focus는 input같은 입력 칸에 입력가능하게 되어있는 상태를 의미

ex. button:focus { }

visited

사용자가 방문한 적 있는 링크를 선택하는 선택자

ex. link:visited { }

active

활성화 된 요소를 선택하는 선택자

ex. button:active { } <= 버튼을 누르는 순간 해당 CSS 속성이 적용됨

hover

요소 위에 마우스를 올리면 이벤트가 발생하는 경우, 이 이벤트가 발생할 때의 속성값을 hover 로 줄 수 있음


ex.

.button:hover {
         background-color:blue;   
       }

↑ (button에 마우스를 올려두면 버튼 색상이 파란색으로 변함)



+a) hover = 버튼에 마우스를 두는 순간에 속성 적용
       active = 버튼을 클릭한 이후 떼는 순간까지 속성 적용


+a) .box:hover span { } => box 클래스에 hover 할 경우 span 태그에 속성값 적용
       .item:hover:after { } => item 클래스에 hover 할 경우 가상클래스 item::after에 속성값 적용


+a) ↑ 위의 hover 속성은 [상위부모]:hover [자식] { } 인 경우에만 성립!

가상요소 선택자 (after, before)

실제로 HTML내의 요소를 수정하지 않고, CSS만으로 지정한 클래스 자식요소의 앞이나 뒤에 가상요소를 추가하여 속성값 부여

1. class1 이라는 클래스의 div를 .class1:after { } 선택자로 선택하여 css 속성값을 줌
2. 실제 HTML 구조상으로는 표시되지 않지만 class1의 자식격인 새로운 요소가 class1 뒤에 생기고,      .class1:after { }에 적용한 속성값이 새로 생긴 요소에 적용됨

+a) content의 값은 빈 값이 될 수 없으며, 적을 내용이 없으면 "" 이라도 표시해야 함

형제 요소 선택자

같은 부모를 두고 있는 각 형제 요소들 중에 지정한 요소만 선택


ex. .class2~class3 <= 같은 부모를 두는 형제 요소들 중에 class2 바로 다음의 형제인 class3 만 선택

선택자 정리 코드

/* 자손 결합자 */
.outer li {
  color: olivedrab;
}

/* 자식(1촌 자손) 결합자 */
.outer > li {
  color: dodgerblue;
}

.outer > li li {
  text-decoration: underline;
}

/* 뒤따르는 모든 동생들 결합자 */
.starter ~ li {
  font-style: italic;
}

/* 뒤따르는 바로 다음 동생 결합자 */
.starter + li {
  font-weight: bold;
}

/* 첫 번째, 마지막 요소 가상 클래스 */
ol li:first-child,
ol li:last-child {
  color: yellowgreen;
}

/* ~가 아닌 요소 가상 클래스 */
.outer > li:not(:last-child) {
  text-decoration: line-through;
}

ul:not(.outer) li {
  font-weight: bold;
}

/* ~번째 요소 가상 클래스 */
/* #, #n, #n+#, odd, even 등 시도해보기 */
ol li:nth-child(3) {
  font-weight: bold;
  color: deeppink;
}

/* 마우스오버 가상 클래스 */
li:hover {
  font-weight: bold;
  color: blue;
}