web/css
CSS (Cascading Style Sheet)
blackbearwow
2024. 8. 25. 03:26
css 문법
Selector 중괄호 안에 Property:Value로 이루어져 있다.
CSS selectors
| Selector | 예시 | 예시 설명 |
| .class | .intro | class="intro"인 모든 요소를 선택한다. |
| .class1.class2 | .name1.name2 | name1과 name2가 둘다 class속성에 있는 모든 요소를 선택한다. |
| .class1 .class2 | .name1 .name2 | name1을 class로 가진 요소의 자식으로 name2를 class로 가진 모든 요소들을 선택한다. |
| #id | #firstname | id="firstname"인 요소를 선택한다. |
| * | * | 모든 요소를 선택한다. |
| element | p | 모든 <p> 요소를 선택한다. |
| element.class | p.intro | class="intro"인 <p> 요소를 모두 선택한다. |
| element,element | div, p | 모든 <div>와 <p> 요소를 선택한다. |
| element element | div p | <div>요소들 안에 있는 <p> 요소를 모두 선택한다. |
| element>element | div > p | <div>요소가 부모인 <p>요소를 모두 선택한다. |
| element+element | div + p | <div>요소 바로 뒤에 있는 <p>요소를 선택한다. |
| element1~element2 | p ~ ul | 같은 부모를 가지는 <p>요소 뒤의 모든 <ul>요소를 선택한다. |
| [attribute] | [target] | target 속성을 가진 모든 요소를 선택한다. |
| [attribute=value] | [target="_blank"] | target="_blank"인 요소를 모두 선택한다. |
| [attribute~=value] | [title~="flower"] | title속성에 단어 "flower"를 포함하는 요소를 모두 선택한다. |
| [attribute|=value] | [lang|="en"] | lang속성이 "en"과 같거나 "en-"으로 시작하는 값을 가진 요소를 모두 선택한다. |
| [attribute^=value] | a[href^="https"] | href속성이 "https"로 시작하는 값인 <a>요소를 모두 선택한다. |
| [attribute$=value] | a[href$=".pdf"] | href속성이 ".pdf"로 끝나는 값인 <a>요소를 모두 선택한다. |
| [attribute*=value] | a[href*="w3schools"] | href속성이 "w3schools"를 포함하는 값인 <a>요소를 모두 선택한다. |
| :active | a:active | 활성화된 링크를 선택한다. |
| ::after | p::after | 각 <p>요소의 콘텐트 뒤에 무언가를 삽입한다. |
| ::before | p::before | 각 <p>요소의 콘텐트 앞에 무언가를 삽입한다. |
| :checked | input:checked | 체크된 <input>요소를 모두 선택한다. |
| :default | input:default | 기본 <input>요소를 모두 선택한다. |
| :disabled | input:disabled | disabled인 <input>요소를 모두 선택한다. |
| :empty | p:empty | 텍스트를 포함한 자식이 없는 <p>요소를 모두 선택한다. |
| :enabled | input:enabled | enabled인 <input>요소를 모두 선택한다. |
| :first-child | p:first-child | 부모의 첫번째 자식인 <p>요소를 모두 선택한다. |
| ::first-letter | p::first-letter | 모든 <p>요소의 첫 글자를 선택한다. |
| ::first-line | p::first-line | 모든 <p>요소의 첫 라인을 선택한다. |
| :first-of-type | p:first-of-type | 부모의 첫번째 <p>요소인 <p>요소를 모두 선택한다. |
| :focus | input:focus | focus된 input요소를 찾는다. |
| :fullscreen | :fullscreen | 풀스크린 모드인 요소를 찾는다. |
| :has() | h2:has(+p) | 바로 뒤에 <p>요소가 있는 <h2>요소를 모두 선택한다. |
| :hover | a:hover | 마우스를 가져다댄 <a>요소를 선택한다. |
| :in-range | input:in-range | 명시된 범위값 안의 값을 가진 <input>요소를 선택한다. |
| :indeterminate | input:indeterminate | 쉽게 가늠할 수 없는 <input>요소들을 선택한다. |
| :invalid | input:invalid | 무효한 값을 가진 <input>요소를 모두 선택한다. |
| :lang() | p:lang(it) | lang속성이 "it"인 <p>요소를 모두 선택한다. |
| :last-child | p:last-child | 부모의 마지막 자식인 <p>요소를 모두 선택한다. |
| :last-of-type | p:last-of-type | 부모의 마지막 <p>요소인 <p>요소를 선택한다. |
| :link | a:link | 방문하지 않은 모든 링크를 선택한다. |
| ::marker | ::marker | 리스트 아이템들의 마커들을 선택한다. |
| :not(selector) | :not(p) | <p>요소가 아닌 모든 요소를 선택한다. |
| :nth-child() | p:nth-child(2) p.nth-child(odd) p.nth-child(even) p.nth-child(3n-1) |
부모의 두번째 자식인 <p>요소를 모두 선택한다. 부모의 홀수번째 자식인 요소를 모두 선택한다. 부모의 짝수번째 자식인 요소를 모두 선택한다. 부모의 2,5,8...번째 자식인 요소를 모두 선택한다. |
| :nth-last-child() | p:nth-last-child(2) p.nth-last-child(odd) p.nth-last-child(even) p.nth-last-child(3n-1) |
부모의 뒤에서 두번째 자식인 <p>요소를 모두 선택한다. 부모의 뒤에서 홀수번째 자식인 요소를 모두 선택한다. 부모의 뒤에서 짝수번째 자식인 요소를 모두 선택한다. 부모의 뒤에서 2,5,8...번째 자식인 요소를 모두 선택한다. |
| :nth-last-of-type() | p:nth-last-of-type(2) | 부모의 뒤에서 두번째 <p>요소인 <p>요소를 모두 선택한다. |
| :nth-of-type() | p:nth-of-type(2) | 부모의 두번째 요소인 <p>요소를 모두 선택한다. |
| :only-of-type | p:only-of-type | 부모의 오직 하나인 <p>요소를 모두 선택한다. |
| :only-child | p:only-child | 부모의 오직 하나의 자식인 <p>요소를 모두 선택한다. |
| :optional | input:optional | "required"속성이 없는 <input>요소들을 선택한다. |
| :out-of-range | input:out-of-range | 명시된 범위값을 벗어나는 값을 가진 <input>요소들을 선택한다. |
| ::placeholder | input::placeholder | "placeholder"속성이 명시된 <input>요소들을 선택한다. |
| :read-only | input:read-only | "readonly"속성이 명시된 <input>요소들을 선택한다. |
| :read-write | input:read-write | "readonly"속성이 명시되지 않은 <input>요소들을 선택한다. |
| :required | input:required | "required"속성이 명시된 <input>요소들을 선택한다. |
| :root | :root | document의 루트 요소를 선택한다. |
| ::selection | ::selection | 유저에 의해 선택된 요소의 부분을 선택한다. |
| :target | #news:target | 현재 활성화된 #news 요소를 선택한다. |
| :valid | input:valid | 유효한 값을 가진 <input>요소를 모두 선택한다. |
| :visited | a:visited | 방문한 링크들을 모두 선택한다. |
CSS Units
width, margin, padding, font-size등등은 "length"값을 가진다.
Absolute Lengths
| Unit | 설명 |
| cm | 센치미터 |
| mm | 미리미터 |
| in | 인치 |
| px | 픽셀 |
| pt | 포인트 |
| pc | picas |
픽셀은 디바이스에 따라 상대적이다.
Relative Lengths
| Unit | 설명 |
| em | 요소 폰트 사이즈의 배수이다. |
| ex | 폰트의 x높이의 배수이다. (거의 안쓰인다) |
| ch | "0"라는 문자의 가로에 배수이다. |
| rem | root 요소의 폰트 사이즈의 배수이다. |
| vw | 1vw가 viewport 가로의 1%이다. |
| vh | 1vh가 viewport 세로의 1%이다. |
| vmin | vw와 vh중 작은것이다. |
| vmax | vw와 vh중 큰것이다. |
| % | 부모 요소의 퍼센트이다. |
참고: https://www.w3schools.com/css/default.asp
-