TIL(16)

codedotΒ·2021λ…„ 6μ›” 30일

πŸ’» Today

1. μ½”λ“œμŠ€ν…Œμ΄μΈ 

  • css(쀑급)
  • css pair

2. ν•™μŠ΅

  • css

3. 생각

항상 도움을 λ°›κΈ°λ§Œ ν–ˆλ˜ 것 같은데 μ˜€λŠ˜μ€ λˆ„κ΅°κ°€μ—κ²Œ 도움을 λ“œλ € λ‚˜λ¦„ 기뢄이 μ’‹μ•˜λ‹€.
htmlμ΄λ‚˜ cssμ—λŠ” μ–΄λŠμ •λ„ 지식이 μžˆμ–΄ 였늘의 κ³Όμ œλŠ” 크게 μ–΄λ ΅μ§€ μ•Šμ•˜λ‹€.
λͺ‡κ°€μ§€ λ§‰νžˆλŠ” 뢀뢄은 μžˆμ—ˆμœΌλ‚˜ κ·Έ 뢀뢄듀을 μ œμ™Έν•˜λ©΄ μ˜€λ‘œμ§€ λ‚΄ 힘으둜 λ§Œλ“€μ–΄λ‚Έ 결과물이 μžˆμ–΄ λΏŒλ“―ν–ˆλ‹€.
였늘 ν•¨κ»˜ν•œ νŽ˜μ–΄λŠ” html,css에 λŒ€ν•œ κΈ°λ³Έκ°œλ…μ΄ μ’€ λΆ€μ‘±ν–ˆλ‹€.
μ°¨κ·Όμ°¨κ·Ό λ‚΄κ°€ μ•„λŠ” λ²”μœ„λ‚΄μ—μ„œ μ•Œλ €λ“œλ¦¬κ³  더 λ‚˜μ•„κ°€ 그뢄이 과제λ₯Ό ν•  수 μžˆλ„λ‘ λ„μ™€λ“œλ Έλ‹€.
λΆ€μ‘±ν•œ μ„€λͺ…μ΄μ§€λ§Œ λ‹€ν–‰νžˆ νŽ˜μ–΄λ„ 과제λ₯Ό 마무리 ν•  수 μžˆμ—ˆλ‹€.
μ„€λͺ…을 톡해 λ‹€μ‹œ ν•œλ²ˆ ν•™μŠ΅μ„ ν–ˆλ‹€λŠ” λŠλ‚Œμ΄ λ“€μ—ˆλ‹€.
μ΄λž˜μ„œ λˆ„κ΅°κ°€λ₯Ό κ°€λ₯΄μΉ˜ 것도, λ°°μš°λŠ” 것도 μ€‘μš”ν•˜λ‹€λŠ” κ±Έ 였늘 μ œλŒ€λ‘œ μ•Œμ•˜λ‹€.
그리고 μ„€λͺ…μ΄λΌλŠ”κ²Œ μ°Έ μ–΄λ ΅λ‹€λŠ” 것도 λŠκΌˆλ‹€.
λ‚΄κ°€ μ•„λŠ” 것을 λˆ„κ΅°κ°€μ—κ²Œ μ„€λͺ…을 ν•˜λŠ”κ²Œ 생각보닀 μž…μœΌλ‘œ λ‚˜μ˜€μ§€ μ•Šμ•˜λ‹€.
λ¨Έλ¦¬λ‘œλŠ” 돌고 μžˆλŠ”λ° 말둜 ν•˜λ €λ‹ˆ 이게 μ°Έ 쉽지 μ•Šμ•˜λ‹€.
이 λ˜ν•œ λ‚΄κ°€ μ•žμœΌλ‘œ κ°œμ„ ν•΄μ•Ό ν•  μ μ΄λΌλŠ” 것을 μ•Œμ•˜κΈ°μ— 또 ν•˜λ‚˜μ˜ κ³Όμ œκ°€ 생긴것 κ°™λ‹€.
μ˜€λŠ˜λ„ ν•œλ‹€!!!

4. CSS

id, classλͺ… μƒμ„±μ‹œ λ‹€λ₯Έ μ‚¬λžŒλ“€μ΄ 보기에도 이해가 되기 μ‰½κ²Œ ν‘œκΈ°ν•˜λŠ”κ²Œ μ μ ˆν•¨!

display : flex (λΆ€λͺ¨μ— 적용)
flex - direction : columm (λΆ€λͺ¨μ— 적용)
flex: 1 0 auto (μžμ‹μ— 적용)

css 크기에 λŒ€ν•˜μ—¬

  • px, % 의 차이

    px : 화면에 크기λ₯Ό κ³ μ •ν•˜λŠ” λ‹¨μœ„

    % : λΆ€λͺ¨ μš”μ†Œμ˜ 영ν–₯을 받기에 μ μ ˆν•˜κ²Œ μ‚¬μš© 해야함

  • em

    μžμ‹ μ˜ (넓이) font-size 영ν–₯ 및 상속에 영ν–₯을 λ°›μŒ

    이둜 인해 μœ μ§€λ³΄μˆ˜κ°€ μ–΄λ ΅λ‹€

  • rem

    μ΅œμƒλ‹¨μ˜ λΆ€λͺ¨ font-size 영ν–₯을 λ°›μŒ

  • vw , vhλž€

    화면에 λ³΄μ΄λŠ” 전체 μ‚¬μ΄μ¦ˆ
    100이 μ΅œλŒ€ μ‚¬μ΄μ¦ˆ(ν™”λ©΄ 전체 μ‚¬μš©)
    화면을 μΆ•μ†Œν•˜λ©΄ μΆ•μ†Œν•˜λŠ” 만큼 μœ λ™μ μœΌλ‘œ 변함

  • vmin, vmax

    μ‚¬μ΄μ¦ˆκ°€ μœ λ™μ μœΌλ‘œ λ³€ν• λ•Œ μ΅œμ†Œ or μ΅œλŒ€κ°’μ„ 백문율둜 λ‚˜λˆ μ„œ 화면에 λ‚˜νƒ€λ‚¨

profile
Loding...

0개의 λŒ“κΈ€