Reset CSS
-
웹 브라우저마다 각기 다른 default 스타일이 지정되어 있으므로, 이를 초기화하여, 다양한 웹 브라우저에서도 동일한 스타일로 표시되도록 하는 설정이다.
-
스타일을 초기화시켜주는 다양한 기법이 있지만 최근에는 normalize.css 를 많이 사용한다고 한다.
- cdn 을 통해 링크시켜줄 수 있다.
- 기본 스타일은 남겨두고, 브라우저별 다를 수 있는 스타일만 초기화 한다.
단위 정리
1. 기본 단위
px
- 해상도에 따라 상대적인 크기를 가짐
%
- 상대단위, 지정 사이즈를 기반으로 상대적인 비율의 크기를 가짐
em
- 배수 단위, 지정 사이즈를 기반으로 배수로 계산된 크기를 가짐
- 중첨된 자식 요소에 em을 지정하면 모든 자식 요소 사이즈에 영향을 주므로 주의해야함
rem
- em과 달리 rem은 root em으로 최상위 요소(<html>) 사이즈를 기준으로 함
2. 반응형 viewport 단위
- viewport란 웹브라우저에서 웹페이지가 표시되는 영역을 의미
- 웹페이지 개발상에서는 다양한 사이즈의 디스플레이에 따라, 관련 사이즈 정보를 viewport를 통해 확인 및 제어할 수 있음
vw
- viewport 너비의 1/100
vh
- viewport 높이의 1/100
vmin
- viewport 너비 또는 높이 중 작은 쪽의 1/100
vmax
- viewport 너비 또는 높이 중 높은 쪽의 1/100
3. 색상 표현 단위
- 16진수 표기방범(HEX 코드(Hexadecimal Colors))
color : #8A 2B E2
빨강녹색파랑- RGB, RGBA(투명도)
- 관련 사이트 : adobe color, google meterial color
RGBA vs opacity
- opacity property : 투명도 설정, 0.0(투명) ~ 1.0(불투명)
- opacity property는 모든 자식 요소에 상속이 가능
- RGBA는 상속 X
CSS selector
1. attribute selector
<style> [attr] {속성 : 값;} </style>- attr 속성을 가진 모든 tag
<style> [attr = "값"] {속성 : 값;} </style>- attr 속성값이 정확히 속성을 가지는 모든 태그 (대소문자 구분 X)
<style> [attr~="값"] {속성 : 값;} </style>- attr 속성값이 "값"를 단어 로 포함하는 모든 태그 (sql문의 like)
<style> [attr|="값" {속성 : 값;}] </style>- attr 속성값이 "값"이거나 "값"으로 시작하면서 -문자가 곧바로 뒤에 다라붙는 모든 요소
<style> 태그[attr^="값" {속성 : 값;}] </style>- 태그의 요소 중 attr 속성값이 "값"으로 시작하는 모든 요소
<style> 태그[attr$="값" {속성 : 값;}] </style>- 태그 요소 중 attr 속성의 값이 "값"으로 끝나는 모든 요소
<style> 태그[attr*="값" {속성 : 값;}] </style>- 태그 요소 중 attr 속성의 값이 "값"을 포함하는 모든 요소
2. 복합 selector
descendant selector : 스페이스
- 해당 태그 밑에만 있는 다면 ok
child selector : >
- 해당 태그 바로 밑이 아니라면 X
Adjacent sibling selector : +
- 이때 바로 인접해야함
General sibling selector : ~
- 해당 태그와 동일 레벨에 있다면 OK
3. 가상 클래스 selector (Pseudo-Class Selector)
- 태그 : link : 방문하지 않은 링크가 적용된 요소
- 태그 : visited : 방문한 링크가 적용된 요소
- 태그 : hover : 마우스가 올라가 있는 상태
- 태그 : active : 링크 요소를 마우스로 누르고 있는 상태
- 태그 : focus : 특정 요소에 포커스가 있는 상태 (입력창에 커서가 깜빡이는)
4. UI 요소 상태 selector (UI Element states Pseudo-Class)
- enabled : UI 셀렉터가 사용 가능한 상태
- disabled : UI 셀렉터가 사용 불가능한 상태
- checked : UI 셀렉터가 체그된 상태
- indeterminate : UI 셀렉터가 상태가 결정되지 않은 상태(check box, radio button, etc...)
5. 구조 가상 클래스 셀렉터 (structured Pseudo-Class)
- first-child : 부모의 첫번째 자식요소
- last-child : 부모의 마지막 자식요소
- nth-child(2n-1) : 부모의 첫번째 자식 요소부터 시작해서 홀수 요소 선택
- nth-last-child(n) : 부모의 마지막 자식 요소부터 뒤에서 시작해서 n번째 요소 선택
- 태그 : first-of-type : 태그 중 첫번째
- 태그 : last-of-type : 태그 중 마지막
- 태그 : nth-of-type(n) : 태그 중 n번째
- 태그 : nth-last-of-type(n) : 태그 중 뒤에서 n번째
6. 부정 셀렉터 (negation Pseudo-Class)
- not(css selector) : 셀렉터에 해당하지 않은 모든 요소 선택
7. 정합성 체크 셀렉터 (Validity Pseudo-Class)
- valid(css selector) : 정합성이 검증된 input 또는 form 요소 선택
- invalid(css selector) : 정합성 검증이 실패한 input 또는 form 요소 선택
이때 사용하는 속성
1. required
<input type="text" id="id" name="id" required />- input 태그로 생성된 입력창에 데이터를 무조건 넣어야만 작동되게 하겠다.
2. pattern
<input type="text" id="id" name="id" pattern="[0-9]{6}" required />- input 태그로 생성된 입력창에 넣은 데이터가 원하는 데이터 포맷에 맞으면 정합성이 검증됐다고 판단
- pattern 값은 정규표현식 more
8. 가상요소 셀렉터 (Pseudo-Element Selector)
- 선택한 요소 안의 특정 부분을 선택 (예 : 특정 요소의 첫 글자, 마지막 글자 등)
- first-letter : 요소의 첫 글자
- first-line : 요소의 첫 라인 (block 요소만 적용가능)
<style>
태그::after{
content:"나중에 들어오는 값";
}
</style>- after : 요소의 뒤에 위치하는 공간 선택, content property와 함께 사용 content에 작성할 내용 기재
- before : 요소의 앞에 위치하는 공간 선택, content property와 함께 사용 content에 작성할 내용 기재
- selection : 요소에서 드래그한 부분을 선택
- 얘는 두개의 콜론(::)을 사용함
智(지)! 德(덕)! 體(체)!