[TIL] 210830

Lee SyongΒ·2021λ…„ 8μ›” 30일
0

TIL

λͺ©λ‘ 보기
12/204
post-thumbnail

πŸ“ 였늘 ν•œ 것

  1. CSS 직접 μž‘μ„±ν•΄λ³΄κΈ° (μ΄μ–΄μ„œ)

  2. λ‚΄κ°€ μ§  μ½”λ“œμ™€ κ°•μ˜ λ‚΄μš© 비ꡐ·뢄석 (μ΄μ–΄μ„œ)


πŸ”Ž κ°•μ˜λ₯Ό 톡해 배운 것

1. navbar

  • color(폰트 색깔) 속성을 #navbar에 μ§€μ •ν•΄μ„œ ν•œ λ²ˆμ— ν•˜μœ„ μš”μ†ŒκΉŒμ§€ μ „λΆ€ 적용될 수 μžˆλ„λ‘ ν–ˆλ‹€.

  • flexbox ꡐ차좕 쀑앙 μ •λ ¬ β†’ align-items: center πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯

  • navbar-menu-item, 즉 <li>λ“€ 사이λ₯Ό λ„μš°λ €λ©΄ justify-content: space-between 말고 κ·Έλƒ₯ marginμ΄λž‘ padding 값을 λ„£μ–΄μ£Όλ©΄ λœλ‹€.

  • text-decoration: noneκ³Ό list-style: none처럼 항상 λ˜‘κ°™μ΄ μ μš©ν•  속성듀은 맀번 classλ§ˆλ‹€ 지정해주지 말고, μ•„μ˜ˆ /* universal tags */에 a와 li νƒœκ·Έλ₯Ό λͺ…μ‹œν•΄μ„œ 지정해둬라.

  • ꡬ글 폰트λ₯Ό body에 지정해쀬닀.

  • 기본적으둜 ν…μŠ€νŠΈ μœ„μ— 마우슀 μ»€μ„œλ₯Ό μ˜¬λ €λ„ κ·Έ λͺ¨μ–‘이 λ³€ν•˜μ§€ μ•Šλ„λ‘ ν•˜κΈ° μœ„ν•΄ body에 cursor: defaultλ₯Ό 지정해쀬닀.

  • 단, li μœ„μ— 마우슀 μ»€μ„œλ₯Ό μ˜¬λ Έμ„ λ•ŒλŠ” 손 λͺ¨μ–‘μœΌλ‘œ λ°”λ€Œλ„λ‘ cursor: pointerλ₯Ό 지정해쀬닀.

  • border-radiusλŠ” 이 λ¬Έμ„œ λ‚΄μ—μ„œλŠ” 항상 λ™μΌν•œ 값을 μ‚¬μš©ν•  것이기 λ•Œλ¬Έμ— :root에 λ³€μˆ˜κ°’μ„ μ§€μ •ν•΄μ£Όμ—ˆλ‹€.

  • class="navbar-menu-item active"λ₯Ό κ°€λ¦¬ν‚€λŠ” CSS μ„ νƒμžλŠ” navbar-menu-item.active이닀. 이 κ²½μš°μ— .active μ•žμ—μ„œ 띄어쓰기 ν•˜λ©΄ μ•ˆ λœλ‹€.

  • border-radius 속성은 .active와 :hoverμ—μ„œ λ°˜λ³΅λ˜λ―€λ‘œ μ•„μ˜ˆ .nav-menu-item에 ν•œ 번만 써주도둝 ν•œλ‹€.

2. home

  • 원 λͺ¨μ–‘μœΌλ‘œ λ§Œλ“  ν”„λ‘œν•„ 이미지λ₯Ό μ›ν•˜λŠ” μœ„μΉ˜κ°€ 보이도둝 μ‘°μ •ν•˜λŠ” 법을 λͺ¨λ₯΄κ² λ‹€. imgλ₯Ό κ°μ‹ΈλŠ” div νƒœκ·Έλ₯Ό λ§Œλ“€μ–΄μ„œ μ΄λ―Έμ§€μ˜ 쀑앙이 보이도둝 ν–ˆμœΌλ‚˜ λ‚΄κ°€ μ›ν•˜λŠ” 건 μ΄λ―Έμ§€μ˜ 였λ₯Έμͺ½μ΄ λ³΄μ΄λŠ” 것이닀.

  • λͺ¨λ“  button에 μ μš©μ‹œν‚¬ 속성듀은 /* universal tags */에 지정해 두도둝 ν•œλ‹€.

3. about

  • 개발자 도ꡬλ₯Ό μ‚¬μš©ν•΄λ„ 그림에 μˆ˜μΉ˜λŠ” μ•ˆ λ‚˜μ˜€λ©΄μ„œ μš”μ†Œ 검색 μ‹œμ—λ§Œ μ£Όν™©μƒ‰μœΌλ‘œ λœ¨λŠ” margin의 경우, ν•΄λ‹Ή μš”μ†Œκ°€ block 레벨 μš”μ†Œμ΄κΈ° λ•Œλ¬Έμ— μžλ™μœΌλ‘œ margin 값이 μ„€μ •λ˜μ–΄ μžˆλŠ” 것이닀. 이 κ²½μš°μ—λŠ” 쒌우 margin에 auto 값을 쀌으둜써 μˆ˜ν‰ 쀑앙 정렬을 ν•  수 μžˆλ‹€.

  • /* universal tags */에 <section> μš”μ†Œ μ„ νƒμžλ₯Ό μΆ”κ°€ν•΄ κ³΅ν†΅μ μœΌλ‘œ μ μš©ν•  속성듀을 지정해쀬닀. λΈŒλΌμš°μ € 창이 컀지면 μ½˜ν…μΈ κ°€ λ„ˆλ¬΄ νΌμ§€λŠ” 것을 막기 μœ„ν•΄ μ§€μ •ν•˜λŠ” max-width도 κ·Έ 쀑 ν•˜λ‚˜μ΄λ‹€.

  • λ‚˜λŠ” positionκ³Ό transform 속성을 μ΄μš©ν•΄μ„œ μ•„μ΄μ½˜(font awesome)을 μˆ˜μ§Β·μˆ˜ν‰ 쀑앙 μ •λ ¬μ‹œμΌ°λŠ”λ°, κ°•μ˜μ—μ„œλŠ” line-height에 height κ°’κ³Ό λ™μΌν•œ 값을 지정해 쀑앙 μ •λ ¬μ‹œμΌ°λ‹€.

  • 원 μ•ˆμ˜ μ•„μ΄ν…œμ— 마우슀 μ»€μ„œλ₯Ό κ°€μ Έκ°€λ©΄ μ•„μ΄ν…œμ΄ μ»€μ§€λ©΄μ„œ λΆ„ν™μƒ‰μœΌλ‘œ λ°”λ€Œμ–΄ λŒμ•„κ°€λ„λ‘ 효과λ₯Ό μ£Όμ—ˆλ‹€.

  • a:hover β†’ a에 μ»€μ„œλ₯Ό λŒ”μ„ λ•Œ a
    a b:hover β†’ a μ•ˆμ˜ b에 μ»€μ„œλ₯Ό λŒ”μ„ λ•Œ b
    a:hover b β†’ a에 μ»€μ„œλ₯Ό λŒ”μ„ λ•Œ b

  • --animation-duration: 300msλ₯Ό μΆ”μ²œν•œλ‹€.


✨ 내일 ν•  것

  1. CSS 직접 μž‘μ„±ν•΄λ³΄κΈ° (μ΄μ–΄μ„œ)

  2. λ‚΄κ°€ μ§  μ½”λ“œμ™€ κ°•μ˜ λ‚΄μš© 비ꡐ·뢄석 (μ΄μ–΄μ„œ)

profile
λŠ₯λ™μ μœΌλ‘œ μ‚΄μž, ν–‰λ³΅ν•˜κ²ŒπŸ˜

0개의 λŒ“κΈ€