CSS Diner

daymoon_Β·2022λ…„ 2μ›” 2일
0

CSS

λͺ©λ‘ 보기
4/18
post-thumbnail

CSS Diner?

πŸ€” 문제 링크 : CSS Diner

CSS Selector에 λŒ€ν•΄ μ—°μŠ΅ν•  수 μžˆλŠ” μ‚¬μ΄νŠΈ


πŸ“‘ λ‹΅μ•ˆ

🍽️ 단계 1 : plate


🍽️ 단계 2 : bento


🍽️ 단계 3 : #fancy

πŸ“Œ 참고자료
λ””μ§€ν„Έλ…Έλ§ˆλ“œ 클래슀(class)와 아이디(id)의 차이점

  • id : idλ₯Ό 지칭할 경우 #(μƒΎ)을 μ‚¬μš©ν•œλ‹€.
  • class : classλ₯Ό 지칭할 경우 .(점)을 μ‚¬μš©ν•œλ‹€.


🍽️ 단계 4 : plate > apple


🍽️ 단계 5 : #fancy > pickle


🍽️ 단계 6 : .small


🍽️ 단계 7 : orange.small


🍽️ 단계 8 : bento > orange.small


🍽️ 단계 9 : plate, bento


🍽️ 단계 10 : *


🍽️ 단계 11 : plate *


🍽️ 단계 12 : plate + apple

πŸ“Œ 참고자료
MDN 인접 ν˜•μ œ κ²°ν•©μž

  • 인접 ν˜•μ œ κ²°ν•©μž(+)λŠ” μ•žμ—μ„œ μ§€μ •ν•œ μš”μ†Œμ˜ λ°”λ‘œ λ‹€μŒμ— μœ„μΉ˜ν•˜λŠ” ν˜•μ œ μš”μ†Œλ§Œ μ„ νƒν•œλ‹€.


🍽️ 단계 13 : bento ~ pickle

πŸ“Œ 참고자료
MDN 일반 ν˜•μ œ κ²°ν•©μž

  • 일반 ν˜•μ œ κ²°ν•©μž(~)λŠ” 두 개의 μ„ νƒμž 사이에 μœ„μΉ˜ν•˜λ„λ‘ λ’€μͺ½ μ„ νƒμžμ˜ μš”μ†Œμ™€ μ•žμͺ½ μ„ νƒμž μš”μ†Œμ˜ λΆ€λͺ¨ μš”μ†Œκ°€ κ°™κ³ , λ’€μͺ½ μ„ νƒμžμ˜ μš”μ†Œκ°€ 뒀에 μœ„μΉ˜ν•  λ•Œ μ„ νƒν•œλ‹€.
  • 두 μš”μ†Œκ°€ μ„œλ‘œ λΆ™μ–΄μžˆμ„ ν•„μš”λŠ” μ—†λ‹€.

🍽️ 단계 14 : plate > apple


🍽️ 단계 15 : plate > :first-child


🍽️ 단계 16 : plate :only-child


🍽️ 단계 17 : .small:last-child


🍽️ 단계 18 : :nth-child(3)

  • μ•žμ—μ„œ 3번 선택

🍽️ 단계 19 : bento:nth-last-child(3)

  • bentoνƒœκ·Έλ₯Ό κΈ°μ€€μœΌλ‘œ λ’€μ—μ„œ 3λ²ˆμ„ μ„ νƒν•œλ‹€.

🍽️ 단계 20 : apple:first-of-type

  • appleνƒœν¬μ˜ 첫 번째 type을 μ„ νƒν•œλ‹€.

🍽️ 단계 21 : :nth-of-type(even)

  • even : 짝수 type만 μ„ νƒν•œλ‹€.
  • odd : ν™€μˆ˜ type만 μ„ νƒν•œλ‹€.

🍽️ 단계 22 : :nth-of-type(2n+3)

참고 자료
MaCoder [CSS] :nth-child :nth-of-type 가상 클래슀(μ˜μ‚¬ 클래슀)

  • An + B : A와 BλŠ” μ •μˆ˜ μž…λ ₯, n은 0λΆ€ν„° μ‹œμž‘ν•˜λŠ” μ–‘μ˜ μ •μˆ˜λ₯Ό μˆœμ„œλŒ€λ‘œ λŒ€μž…ν•œλ‹€.
  • 즉, A * n + B둜 κ³„μ‚°ν•œ 값이 λŒ€μž…λœλ‹€.
  • 2 * 0 + 3 = 3 3번 선택 β†’ 2 * 1 + 3 = 5 5번 선택

🍽️ 단계 23: plate apple:only-of-type


🍽️ 단계 24 : .small:last-of-type


🍽️ 단계 25 : bento:empty

  • μžμ‹μ΄ μ—†λŠ” μš”μ†Œλ“€λ§Œ μ„ νƒν•œλ‹€.


🍽️ 단계 26 : apple:not(.small)

  • appleνƒœκ·Έμ—μ„œ .small이 μ—†λŠ” μš”μ†Œλ§Œ μ„ νƒν•œλ‹€.


🍽️ 단계 27 : [for]

  • 속성값이 for인 κ²ƒλ§Œ μ„ νƒν•œλ‹€.


🍽️ 단계 28 : plate[for]


🍽️ 단계 29 : bento[for="Vitaly"]


🍽️ 단계 30 : [for^="Sa"]

  • 속성이 forμ΄λ©΄μ„œ 속성값이 Sa둜 μ‹œμž‘ν•˜λŠ” κ²ƒλ§Œ μ„ νƒν•œλ‹€.


🍽️ 단계 31 : [for$="ato"]

  • 속성이 forμ΄λ©΄μ„œ 속성값이 ato둜 λλ‚˜λŠ” κ²ƒλ§Œ μ„ νƒν•œλ‹€.


🍽️ 단계 32 : [for*="obb"]

  • 속성이 forμ΄λ©΄μ„œ obbκ°€ ν¬ν•¨λœ κ²ƒλ§Œ μ„ νƒν•œλ‹€.


🍽️ finish~


πŸ—“οΈ μˆ˜μ • 및 μΆ”κ°€

βœ… 2022.02.03

  • 단계 13 ~ 21 μΆ”κ°€
  • 단계 22 ~ 31(λ§ˆμ§€λ§‰) μΆ”κ°€

βœ… 2022.02.26

  • 썸넀일 λ³€κ²½
profile
μƒˆλ²½κ³Ό 코딩을 μ•„μš°λ₯΄λŠ” λ―Έμ§€μ˜ 곡간 _ Study Log πŸŒ™

0개의 λŒ“κΈ€