modern CSS 단위, selector

강정우·2022년 12월 19일
0

HTML, CSS

목록 보기
14/27
post-thumbnail

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
        빨강녹색파랑

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 : 요소에서 드래그한 부분을 선택
  • 얘는 두개의 콜론(::)을 사용함
profile
智(지)! 德(덕)! 體(체)!

0개의 댓글