CSS (Cascading Style Sheets)

• 마크업 언어(HTML)가 실제로 화면에 표시되는 방법을 기술하는 언어
  (모양, 색상, 크기, 스타일 ... 지정 가능)
• 하나의 요소에 여러 CSS코드를 겹쳐서 원하는 스타일을 만들 수 있다
• W3C에서 CSS를 웹 표준으로 지정함

CSS 선택자(Selector)

• 현재 HTML 문서 내에서 특정 요소를 선택하는 문자 또는 문자열(기호)
  (스타일을 적용하고자 하는 요소를 선택하는 방법)

태그 선택자

• 현재 HTML 문서 내에 같은 태그를 모두 선택하는 선택자
• 작성법
  태그명 { CSS 코드; }

strong{ background-color : coral; }
span{ background-color : pink; }
div{ border : 3px solid skyblue; }

id 선택자

• HTML 문서 내에서 id 속성값이 일치하는 요소를 선택하는 선택자
• id 속성 값은 페이지 내에서 유일해야 한다
• 작성법
  #id속성값 { CSS 코드; }

#li1{ background-color: red; }
#li2{ background-color: orange; }
#li3{ background-color: yellow; }

클래스 선택자

• HTML 문서 내에서 class 속성값이 일치하는 요소를 선택하는 선택자
• CSS가 적용되는 요소가 겹치는 경우 마지막에 작성한 CSS가 적용된다
• 작성법
  .class속성값 { CSS 코드; }

.test-1{color: red;}
.test-2{
	background-color: black;
	color: white;
}

모든 요소 선택자

• 단독 사용 시 : 문서에 있는 모든 요소
• 다른 선택자와 사용 시 : 선택된 요소의 모든 자식/후손/형제

*{font-style: italic;}

기본 속성 선택자

• 태그에 작성된 특정 속성을 선택하는 선택자 (모든 속성을 선택할 수 있는 기본 방법)
  (id, class 로 선택 가능하지만 보통은 #, . 을 사용)
• 선택자는 생략할 수 있다 -> 특정, 속성을 가진 모든 요소를 선택
• "속성값" 에서 쌍따옴표("")는 홑따옴표('')로 변경하거나 생략할 수 있다
• 작성법
  선택자[속성명="속성값"] { CSS 코드; }

div[name="name-1"]{background-color: violet;}
p[data="data-2"]{background-color: whitesmoke;}

자식 선택자

• 지정된 요소 바로 한 단계 하위 요소를 선택하는 선택자
• 작성법
  선택자1(부모 요소) > 선택자2(자식 요소) {CSS 코드;}

#parent1>li>span{background-color: darkgreen;}

후손(자손) 선택자

• 지정된 요소의 모든 하위 요소를 선택하는 선택자
• 작성법
  선택자1(부모(조상) 요소) 선택자2(후손 요소) {CSS 코드;}

#parent2 p{background-color: aqua;}

반응 선택자

• 사용자의 움직임에 반응하여 스타일이 변경되는 선택자

:active

• 선택된 요소가 클릭 되어지고 있을 경우
• 작성법
  선택자:active

#activeTest:active{
  background-color: yellow;
  border: 10px inset black;
}

:hover

• 선택된 요소에 마우스가 올라가 있는 경우
• 작성법
  선택자:hover

#hoverTest:hover{
  background-image: url(../../images/cats/cat4.jpg);
  background-size: cover;
}

상태 선택자

• 입력 양식(input, input 관련 태그)의 상태에 따라 선택되는 선택자

:focus

• 요소에 초점이 맞춰졌을 때(커서 깜빡거림)

#focus-test:focus{
  outline-color: yellowgreen;
}

:checked

• 요소가 체크 되었을 때(radio, checkbox)

input[name="fruits"]:checked{
  width: 30px;
  height: 30px;
}

:enabled, :disabled

• 요소가 활성/비활성 상태일 때

#test-div2 > input:enabled{background-color: lightgreen;}
#test-div2 > input:disabled{background-color: lightcoral;}

동위 선택자

• 동위(동등한 위치 == 형제 관계)관계에서 다음(뒤)에 위치한 요소를 선택하는 선택자

+

• A 바로 다음(뒤)에 있는 B 요소를 하나 선택
  A선택자 + B선택자 {CSS 코드;}

#div1 + div{background-color: gold;}

~

• A 뒤에 있는 모든 B 요소를 선택
  A선택자 ~ B선택자 {CSS 코드;}

#div3 ~ div{background-color: chocolate;}

문자열 속성 선택자

• 선택자[속성명 ~= "특정값"] { CSS 코드; }
  띄어쓰기로 구분되어있는 여러 속성 값이 작성된 속성 중
  속성 값이 특정 값을 단어로 포함하는 요소를 선택
• 선택자[속성명 |= "특정값"] { CSS 코드; }
  속성 값이 특정 값을 단어로 포함하는 요소를 선택
  단, "-" 기호로 구분, "-" 앞의 내용이 동일해야 한다
• 선택자[속성명 ^= "특정값"] { CSS 코드; }
  속성 값이 특정 값으로 시작하는 요소를 선택
• 선택자[속성명 $= "특정값"] { CSS 코드; }
  속성 값이 특정 값으로 끝나는 요소를 선택
• 선택자[속성명 *= "특정값"] { CSS 코드; }
  속성 값이 특정 값을 포함하는 요소를 선택

div[name~="aaa"]{background-color: greenyellow;}
div[class|="str"]{color: red; font-weight: bold;}
div[class^="class"]{background-color: black; color: white;}
div[class$="2"]{font-style: italic; font-size: 30px;}
div[name*="2"]{border: 2px solid magenta;}

일반 구조 선택자

• 형제 관계에 있는 요소 중 특정 요소를 선택하는 선택자
• 위치를 기준으로 구분함
• (※) 선택된 형제 중에서 순서를 찾는게 아닌 모든 형제 중에서 순서를 찾고 그 다음 지정된 선택자가 맞는지 확인하기 때문에 잘 살펴봐야 한다

:first-child

• 형제 관계 중 첫 번째 요소

#test1 > p:first-child{
  background-color: red;
  color: white;
}

:last-child

• 형제 관계의 요소 중 마지막 요소

#test1>p:last-child{
  background-color: blueviolet;
}

:nth-child()

• 형제 관계 중 숫자/수열 번째 형제 요소 선택

#test1>p:nth-child(2){
  background-color: yellow;
}
#test1>p:nth-child(2n+1){
  font-style: italic;
}

:nth-last-child()

• 뒤에서 부터 숫자|수열 번째 요소 선택

#test1>p:nth-last-child(2){
  color: brown;
}
#test1>p:nth-last-child(2n){
  color: brown;
}

형태 구조 선택자

• 선택된 형제 관계 요소 중 특정 요소를 선택하는 선택자
• 선택된 요소들을 기준으로 구분

:first-of-type

• 같이 선택된 형제들 중에서 첫 번째 요소

#test2>p:first-of-type{
  background-color: orange;
}

:last-of-type

• 같이 선택된 형제들 중에서 마지막 요소

#test2>p:last-of-type{
  background-color: deepskyblue;
}

:nth-of-type()

• 같이 선택된 형제들 중에서 숫자|수열 번째 모든 요소

#test2>p:nth-of-type(2n+1){
  font-family: "궁서체";
  font-size: 30px;
}

:nth-last-of-type()

• 같이 선택된 형제들 중에서 뒤에서 숫자|수열 번째 모든 요소

#test2>p:nth-last-of-type(2n){
  background-color: aquamarine;
}

부정 선택자

:not()

• 괄호 내 선택자를 제외한 나머지 요소를 선택

#test3>li:not(:nth-of-type(3n)){
  background-color: violet;
}

기타 선택자, 추가 선택 작성 방법

:only-child

• 특정 요소의 자식이 하나밖에 없을 때 선택

#test1-1>p:only-child{
  background-color: gold;
}

:only-of-type

• 특정 요소의 자식 중 지정된 형태와 같은 자식 요소가 하나만 있을 때 선택

#test2>p:only-of-type{
  background-color: plum;
}

:empty

• 자식 요소가 없는 요소인 경우 선택
• (태그, 글자, 띄어쓰기 모두 자식이라고 함)

#test3>p:empty{
  height: 30px;
  background-color: greenyellow;
}

여러 선택자 동시 작성

• 같은 스타일을 지정하고 싶은 요소가 있으나 선택자 하나로 모두 선택할 수 없을 때 사용
• 작성법
  선택자1, 선택자2, 선택자3, ... {CSS 코드;}

#test4-1, #test4-2, .test4-3{
  border: 3px dashed black;
}

특정 요소 내부에 있는 특정 클래스만 선택

• #test5-1의 후손 중 클래스가 c5인 요소 선택

#test5-1 .c5{
  background-color: rgb(170, 142, 17);
}

• #test5-2의 자식 li 태그 중 클래스가 c5인 요소 선택

#test5-2>li.c5{
  background-color: brown;
}

여러 클래스가 작성된 요소만 선택

.test6.c6{
  background-color: red;
}

CSS 선택자 우선순위

• 기본적으로 css 속성은 style태그 또는 css 파일에 작성된 순서(위->아래)대로 해석이 진행 되지만 같은 요소에 여러 css 속성이 설정되는 경우 우선 순위가 적용된다.
• 동일한 우선 순위로 css 속성이 설정된 경우 제일 마지막에 작성된 css 속성이 반영된다
• 여러 선택자를 이용해서 같은 요소를 선택하더라도 지정되는 css 속성이 다르면 모두 반영된다.

선택자 우선순위

1. css속성 : 속성값 !important;
2. inline-style 속성 (요소에 직접 작성되는 style 속성)
3. 아이디 선택자 (#아이디 속성명)
4. 클래스 선택자 (.class 속성명)
5. 태그 선택자 (태그명)

• !important로 같은 요소에 같은 CSS 설정이 적용되면 감싸고 있는 선택자 우선순위를 먼저 판별, 감싸고 있는 선택자 우선순위가 같으면 마지막 작성된 내용이 적용