CSS
Cascading Style Sheet
종류:
-블록 : E {display=block; width: 100%; height: auto;}
일정 높이를 가진 태그들의 집합
-인라인: E {display=inline;}
실제 렌더링된 크기만큼 너비와 높이를 동적으로 갖는 태그들의 집합
형식:
-선택자 : CSS 스타일을 적용할 HTML 태그
-선언부=규칙집합 : 선택자에서 선택한 태그에 적용할 스타일을 작성
-구분자 : 세미콜론(;)을 넣으면 여러 스타일을 연속해서 작성
적용방식:
-내부 스타일 시트:
-외부 스타일 시트: / css.css
-인라인 스타일:
기타:
html과 다른 영역. 주석처리도 다름
스타일 적용: 중복된 범위에서 규모가 작은 선택자 스타일을 우선하여 적용 = Cascading
선택자 활용 컨트롤이 중요함
선택자:
/ 오름차순으로 규모가 작아지고 = 내림차순으로 우선 적용 . inline style이 가장 높음 /
/ 체인으로 확장가능 section > div#adv +
::first-line /
/ document.querySelector("#test").matches("li:first-child") getElementById("ex6a") /
1. 전체선택자 * (asterisk) : , 포함 모든 태그들을 선택함
2. 태그선택자
- 클래스선택자 css : .title { color = purple; }
- 아이디선택자 css : #title { color = purple; }
id 속성값은 하나의 HTML 문서 안에서 고유한 값
아이디 속성값을 필수적으로 사용하는 태그들이 있음 - 기본 속성 선택자
속성 선택자는 다른 선택자와 함께 사용할 수 있음(id, class 등). 단독 사용도 가능. 다만 잘 쓰이지 않음- css : 태그선택자[속성선택자] {}
- 문자열 속성 선택자 :
-[속성~=]
-[속성|=]
-[속성^=]
-[속성$=] img 태그 확장자 지정
-[속성*=]
조합선택자
-그룹 선택자 ','
-하위 선택자=후손선택자 ' '
-자식 선택자 '>'
!
! 명시
! 실행
-형제선택자=동위선택자
-인접 '+' : 단일대상
-일반 '~'
가상요소 선택자 E : {일부}
-가상요소 선택자 : HTML 문서의 명시적 구성요소 아님. 논리적 선택자 ::before ::after
가상클래스선택자 E : {상태,구조}
-링크 가상 클래스 선택자 :link :visited
-동적 가상 클래스 선택자=반응선택자 :hover :active
-입력요소 가상 클래스 선택자=상태선택자 :focus :checked :disabled :enabled
-구조적 가상 클래스 선택자
-일반구조 선택자 first-child last-child nth-child(n) nth-last-child(n)
-타입구조 선택자 nth-of-type(n) nth-last-of-type(n) first-of-type last-of-type
특이점
-Block Formating Context(BFC) = .clearfix
.clearfix::after {
content: "";
display: block;
clear: both;
}
HTML: <ul class="clearfix">...</ul>
ul {
overflow: hidden;
}