[CSS] μ„ νƒμž

2023. 3. 12. 18:03Β·πŸ“š ν”„λ‘ νŠΈμ—”λ“œ/HTML_CSS
Class μ„ νƒμž .클래슀λͺ… .gnb { ......
νƒœκ·Έ μ„ νƒμž νƒœκ·Έλͺ… body { .....
ID μ„ νƒμž #IDλͺ… #gnb { .....
전체 μ„ νƒμž * * { .....
속성 μ„ νƒμž [ ] a[title = "daum"] aνƒœκ·Έμ— title이 daum인 것
λΆ€λͺ¨ μžμ† μ„ νƒμž μ„ νƒμž1 μ„ νƒμž2 a .daum {....  μ„ νƒμž 사이에 곡백 λ„£κΈ°
μžμ‹ μ„ νƒμž μ„ νƒμž > μ„ νƒμž body > .gnb { ....
곡백과 λ‹€λ₯Έ 점은 직계 μžμ†λ§Œ 선택 κ°€λŠ₯
인접 ν˜•μ œ μ„ νƒμž μ„ νƒμž + μ„ νƒμž a + ul { ....
μ„ νƒμž λ°”λ‘œ λ’€μ—μžˆλŠ” νƒœκ·Έκ°€ 선택됨
일반 ν˜•μ œ μ„ νƒμž μ„ νƒμž ~ μ„ νƒμž ul ~ span { ....
ul μ•„λž˜ μžˆλŠ” λͺ¨λ“  sapn νƒœκ·Έ μš”μ†Œ 선택됨
κ°€μƒμ„ νƒμž :  a:hover λ“±
νƒœκ·Έ: nth-child(n) n번째 선택
.class:nth-of-type(n) n번째 선택
κ°€μƒμš”μ†Œ :: .class::first-line 첫번째 쀄
.class::first-letter 첫번째 κΈ€μž
.class::after μš”μ†Œ 뒀에
.class::before μš”μ†Œ μ•žμ—

 

μ°Έκ³ 

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Selectors

 

CSS μ„ νƒμž - CSS: Cascading Style Sheets | MDN

CSS μ„ νƒμžλŠ” CSS κ·œμΉ™μ„ μ μš©ν•  μš”μ†Œλ₯Ό μ •μ˜ν•©λ‹ˆλ‹€.

developer.mozilla.org

 

728x90
'πŸ“š ν”„λ‘ νŠΈμ—”λ“œ/HTML_CSS' μΉ΄ν…Œκ³ λ¦¬μ˜ λ‹€λ₯Έ κΈ€
  • [HTML] aνƒœκ·Έ target 속성
  • [CSS] border에 κ·ΈλΌλ°μ΄μ…˜ λ„£κΈ°
  • μ ‘κ·Όμ„± κ³ λ €ν•˜κΈ°(Aria-label, sr-only)
  • [CSS] transform: translate(-50%, -50%);
_μ΄μ•Ž
_μ΄μ•Ž
곡뢀 기둝 λΈ”λ‘œκ·Έ
  • _μ΄μ•Ž
    곡뢀
    _μ΄μ•Ž
  • 전체
    였늘
    μ–΄μ œ
    • ✍️ λͺ¨λ“  κΈ€ (51) N
      • πŸ“š ν”„λ‘ νŠΈμ—”λ“œ (36)
        • React (9)
        • HTML_CSS (9)
        • Javascript (13)
        • git_github (4)
        • Web (1)
      • πŸ‘€ ν”„λ‘œμ νŠΈ 및 ν™œλ™ (11) N
        • μ½”λ“œμž‡ μŠ€ν”„λ¦°νŠΈ 19κΈ° (11) N
      • βš™οΈ etc. (4)
  • 링크

    • πŸ‘‹ GitHub
    • 🧐 μ½”λ”©ν…ŒμŠ€νŠΈ 기둝
  • λΈ”λ‘œκ·Έ 메뉴

    • ν™ˆ
    • νƒœκ·Έ
    • λ°©λͺ…둝
  • 인기 κΈ€

  • 졜근 κΈ€

  • hELLOΒ· Designed Byμ •μƒμš°.v4.10.4
_μ΄μ•Ž
[CSS] μ„ νƒμž
μƒλ‹¨μœΌλ‘œ

ν‹°μŠ€ν† λ¦¬νˆ΄λ°”