CSS를 적용하는 세 가지 방법
-
인라인 스타일(inline style) : HTML 태그 마다 style 속성으로 CSS 코드를 넣어주는 방식, 적용범위는 하나의 tag이기에 거의 사용되지 않음
-
내부 스타일 시트(internal style sheet) : head 태그 내에 style 태그 이용하여 하나의 HTML 문서에 적용. HTML과 CSS의 전체 코드량이 많지 않고 CSS가 해당 HTML 문서에서만 적용될 경우 유용하게 사용
-
링킹 스타일 시트(linking style shee) : 외부 (external) 시트. 스타일 시트를 별도 파일로 저장 후 파일명.css 지정하여 적용범위는 전체 웹페이지에 각 HTML문서에 적용
eg.
<link rel="stylesheet" type="text/css" href="파일명.css">
3번이 제일 잘 사용되고 있음. 선택자(Selector)
css는 기본으로 선택자와 선언부로 구성
선택자 : css 속성을 적용할 대상(태그, 요소)을 지정하는 영역
선언부 : 선택자로 지정된 대상(태그, 요소)에 적용할 css 속성과 값을 적는 영역
기본 & 그룹 선택자
css 작성시 요소, 클래스, id 등 마다 적용방식에 있어 우선순위가 있으니 참고하자. 
결합자와 가상 클래스
선택자 종류
- 단일 선택자
Tag 선택자 : 스타일을 적용할 태그의 이름을 하며, 다수의 태그에 적용
id 선택자 :
- 특정한 Tag를 지정하기 위하여 HTML Tag의 id 속성을 사용
- id 속성은 하나의 HTML문서에서 고유(Unique)해야 한다. 즉, 하나의 Tag만 선택
- #문자와 id 이름으로 정의하고 지정
class 선택자 :
- class 속성을 갖는 모든 태그에 스타일 적용
- .문자와 class 이름으로 정의하고 지정
- 그룹 선택자 : 같은 스타일이 적용되는 여러 태그들에 대해, 쉼표를 이용하여 선택자를 그룹하여 스타일 적용
선택자1, 선택자2, 선택자n {CSS코드}
특성 선택자
body { font-size: 1.4em; }
/* 속성 값을 기준으로 선택 */
a[href="https://www.yalco.kr"] {
color: #ff4e00;
font-weight: bold;
}
/* 특정 속성이 있는 요소 선택 */
input[disabled]+label {
color: lightgray;
text-decoration: line-through;
}
/* 속성값이 특정 텍스트를 포함하는 요소 */
span[class*="item"] {
text-decoration: underline;
}
/* 속성값이 특정 텍스트로 시작하는 요소 */
span[class^="fruit"] {
color: tomato;
}
span[class^="vege"] {
color: olivedrab;
}
/* 속성값이 특정 텍스트로 끝나는 요소 */
span[class$="-1"] {
font-weight: bold;
}가상클래스 마우스 & 포커스 관련
focus 관련 기능은 브라우저에 따라 지원이 잘 안되기도 함 (eg. 사파리 등)
가상클래스 순서
가상 요소
해당 요소 안쪽의 마지막 요소로 추가하는 것, 
상속과 리셋
inherit : 스스로 값을 포기하고 부모로부터 받은 상속값을 적용
** 모든 속성이 전부 상속되지는 않는다는 점
initial : 브라우저가 부여한 값을 포기하고 각 속성의 초기값을 적용
unset : 상속되는 값이 있다면 inherit, 없다면 initial처럼 작동
revert : unset과 같지만, 상속받지 않은 값을 초기값으로 되돌리지는 않음
all 속성 : 대부분의 속성을 inherit, initial, unset, revert값으로 지정할 수 있음.
브라우저에서 지정한 기본값을 비우고 원하는 스타일로 초기화하는데 유용
벤더 프리픽스
아직 표준화되지 않은 CSS 속성들에 사용한다. os 마다 지원되는 속성이 다를수 있으니!
음,,, 아마 css, html 같은경우 구글링하면 템플릿은 꽤 있는거 같고 이해 & 적용할수 있는 수준이면 따라는 할수 있지 않을까 하는 생각이..든다...
+++ 08.06
출처 : 코딩 자율학습
전체 선택자
*{ css 코드 }태그 선택자
태그명{ css 코드 }아이디 선택자
#id속성값{ css 코드 }HTML에서 id 속성값은 하나의 HTML 문서 안에서 고유한 값이어야 한다.
클래스 선택자
HTML에서 사용할 수 있는 class 속성값을 이용해 선택자를 지정하는 방법. 속성값 앞에 .기호를 붙인다.
실무에서 가장 많이 사용하는 선택자 지정 방법.
.class속성값{ css 코드 }기본 속성 선택자
[속성]{ css 코드 }
[속성=값]{ css 코드 }위 예시로는 a태그의 target 속성값이 _blank인 요소에 적용
자식 선택자
부모선택자 > 자식 선택자{css코드}
eg) class속성값이 box인 요소와 자식 관계에 있는 p태그
.box > p {
color:red;
}하위 선택자
div 태그의 하위에 있는(자손인) p태그에만 적용
가상 요소 선택자
content 속성은 CSS 속성으로 새로운 콘텐츠를 생성할 때 사용
링크 가상 클래스 선택자
동적 가상 클래스 선택자
:hover 요소에 마우스를 올리면 해당 태그가 선택자로 지정된다.
:active 요소를 마우스로 클릭하고 있는 동안 해당 태그가 선택자로 지정된다.
입력 요소 가상 클래스 선택자
:focus 입력 요소에 커서가 활성화된 상태
:checked 체크박스 요소에 체크한 상태
:disabled 상호작용 요소가 비활성화된 상태
:enable 상호작용 요소가 활성화된 상태
구조적 가상 클래스 선택자
:first-child, :last-child 첫 번째 자식 태그와 마지막 자식 태그
:nth-child(n), nth-last-child(n) n번째 자식 태그와 끝에서 n번째 자식 태그
:nth-of-type(n), :nth-last-of-type(n) n번째 특정 자식 태그와 끝에서 n번째 특정 자식 태그
:first-of-type, :last-of-type 부모의 첫 번째 특정 자식 태그와 마지막 특정 자식 태그
