λ³Έλ¬Έ λ°”λ‘œκ°€κΈ°
[HTML+CSS][λ―Έλ””μ–΄ 쿼리] 01 - λ―Έλ””μ–΄ 쿼리 μ΄ν•΄ν•˜κΈ° [HTML+CSS][λ°˜μ‘ν˜• μ›Ή] 03 - κ°€λ³€ λ ˆμ΄μ•„μ›ƒκ³Ό κ°€λ³€ μš”μ†Œ [HTML+CSS][λ°˜μ‘ν˜• μ›Ή] 02 - κ°€λ³€ κ·Έλ¦¬λ“œ λ ˆμ΄μ•„μ›ƒ [HTML+CSS][λ°˜μ‘ν˜• μ›Ή] 01 - λ°˜μ‘ν˜• μ›Ήκ³Ό 뷰포트(viewport)의 κ°œλ… [HTML+CSS][CSS3와 μ• λ‹ˆλ©”μ΄μ…˜] 03 - νŠΈλžœμ§€μ…˜ [HTML+CSS][CSS3와 μ• λ‹ˆλ©”μ΄μ…˜] 02 - λ³€ν˜•κ³Ό.. onelight-stay.tistory.com λ―Έλ””μ–΄ 쿼리가 무엇인지에 λŒ€ν•΄ μ•Œμ•„λ³΄κ³  λ―Έλ””μ–΄ 쿼리λ₯Ό μ‚¬μš©ν•  λ•Œ κ³ λ €ν•΄μ•Ό ν•  μ—¬λŸ¬ 쑰건듀에 λŒ€ν•΄μ„œ μ•Œμ•„λ³΄λ„λ‘ ν•˜μž. λ―Έλ””μ–΄ 쿼리 CSS3 λͺ¨λ“ˆ 쀑에 ν•˜λ‚˜λ‘œ μ‚¬μš©μžκ°€ μ–΄λ–€ λ―Έλ””μ–΄λ₯Ό μ‚¬μš©ν•˜λŠ”κ°€μ— 따라 μ‚¬μ΄νŠΈμ˜ ν˜•νƒœκ°€ λ°”λ€Œλ„λ‘ CSSλ₯Ό μž‘μ„±ν•˜λŠ” 방법이닀. λ―Έλ””μ–΄ 쿼리 ꡬ문 @media 속성을 μ‚¬μš©ν•΄ νŠΉμ • λ―Έλ””μ–΄μ—μ„œ μ–΄λ–€ CSSλ₯Ό .. 2020. 8. 5.
[HTML+CSS][λ°˜μ‘ν˜• μ›Ή] 03 - κ°€λ³€ λ ˆμ΄μ•„μ›ƒκ³Ό κ°€λ³€ μš”μ†Œ [HTML+CSS][λ°˜μ‘ν˜• μ›Ή] 02 - κ°€λ³€ κ·Έλ¦¬λ“œ λ ˆμ΄μ•„μ›ƒ [HTML+CSS][λ°˜μ‘ν˜• μ›Ή] 01 - λ°˜μ‘ν˜• μ›Ήκ³Ό 뷰포트(viewport)의 κ°œλ… [HTML+CSS][CSS3와 μ• λ‹ˆλ©”μ΄μ…˜] 03 - νŠΈλžœμ§€μ…˜ [HTML+CSS][CSS3와 μ• λ‹ˆλ©”μ΄μ…˜] 02 - λ³€ν˜•κ³Ό κ΄€λ ¨λœ 속성듀 [HTML+CSS][CSS3와 μ• λ‹ˆλ©”μ΄μ…˜] 01 -.. onelight-stay.tistory.com κ°€λ³€ κ·Έλ¦¬λ“œ λ ˆμ΄μ•„μ›ƒμ— λŒ€ν•΄ λ°°μ› μœΌλ‹ˆ λ ˆμ΄μ•„μ›ƒμ΄ 변경될 λ•Œμ—λ„ λ‹€λ₯Έ μš”μ†Œλ“€λ„ μžμ—°μŠ€λŸ½κ²Œ ν‘œν˜„ 될 수 있게 ν•˜λŠ” κ°€λ³€ μš”μ†Œλ“€μ— λŒ€ν•΄μ„œ μ•Œμ•„λ³΄λ„λ‘ ν•˜μž. κ°€λ³€ κΈ€κΌ΄ λ°˜μ‘ν˜• μ›Ή λ””μžμΈμ„ μœ„ν•΄ κ°€λ³€ κ·Έλ¦¬λ“œ λ ˆμ΄μ•„μ›ƒ μ‚¬μš© μ‹œ κΈ€μž 크기도 μœ λ™μ μœΌλ‘œ λ°”λ€ŒλŠ” 것이닀. em λ‹¨μœ„ λΆ€λͺ¨ μš”μ†Œμ—μ„œ μ§€μ •ν•œ 폰트의 λŒ€λ¬Έμž M의 λ„ˆλΉ„λ₯Ό 1em으둜 지.. 2020. 8. 4.
[HTML+CSS][λ°˜μ‘ν˜• μ›Ή] 02 - κ°€λ³€ κ·Έλ¦¬λ“œ λ ˆμ΄μ•„μ›ƒ [HTML+CSS][λ°˜μ‘ν˜• μ›Ή] 01 - λ°˜μ‘ν˜• μ›Ήκ³Ό 뷰포트(viewport)의 κ°œλ… [HTML+CSS][CSS3와 μ• λ‹ˆλ©”μ΄μ…˜] 03 - νŠΈλžœμ§€μ…˜ [HTML+CSS][CSS3와 μ• λ‹ˆλ©”μ΄μ…˜] 02 - λ³€ν˜•κ³Ό κ΄€λ ¨λœ 속성듀 [HTML+CSS][CSS3와 μ• λ‹ˆλ©”μ΄μ…˜] 01 - λ³€ν˜• [HTML+CSS][λ‹€μž¬λ‹€λŠ₯ν•œ CSS3 μ„ νƒμž] 03 - 가상 ν΄λž˜μŠ€μ™€ 가상.. onelight-stay.tistory.com μ‚¬μ΄νŠΈμ˜ λͺ¨λ“  μš”μ†Œλ“€μ„ μƒλŒ€μ μΈ 크기둜 지정해 λΈŒλΌμš°μ €μ˜ 크기에 따라 탄λ ₯적으둜 λ³΄μ—¬μ€€λ‹€λŠ” κ°€λ³€ κ·Έλ¦¬λ“œ λ ˆμ΄μ•„μ›ƒμ— λŒ€ν•΄μ„œ μ•Œμ•„λ³΄λ„λ‘ ν•˜μž. κ·Έλ¦¬λ“œ μ‹œμŠ€ν…œ (grid system) κ·Έλ¦¬λ“œ μ‹œμŠ€ν…œμ€ μ›Ή μ‚¬μ΄νŠΈμ˜ λ ˆμ΄μ•„μ›ƒμ„ μ •ν•  λ•Œ 자주 μ‚¬μš©ν•˜λŠ” κΈ°μ€€μœΌλ‘œ 화면을 λͺ‡ 개의 칼럼으둜 λ‚˜λˆ„μ–΄ μš”μ†Œλ“€μ„ λ°°μΉ˜ν•΄ ν•„μš”ν•  λ•Œ.. 2020. 8. 3.
[HTML+CSS][λ°˜μ‘ν˜• μ›Ή] 01 - λ°˜μ‘ν˜• μ›Ήκ³Ό 뷰포트(viewport)의 κ°œλ… [HTML+CSS][CSS3와 μ• λ‹ˆλ©”μ΄μ…˜] 03 - νŠΈλžœμ§€μ…˜ [HTML+CSS][CSS3와 μ• λ‹ˆλ©”μ΄μ…˜] 02 - λ³€ν˜•κ³Ό κ΄€λ ¨λœ 속성듀 [HTML+CSS][CSS3와 μ• λ‹ˆλ©”μ΄μ…˜] 01 - λ³€ν˜• [HTML+CSS][λ‹€μž¬λ‹€λŠ₯ν•œ CSS3 μ„ νƒμž] 03 - 가상 ν΄λž˜μŠ€μ™€ 가상 μš”μ†Œ [HTML+CSS][λ‹€μž¬λ‹€λŠ₯ν•œ CSS3 μ„ νƒμž] 02.. onelight-stay.tistory.com ν•˜λ‚˜μ˜ μ‚¬μ΄νŠΈλ₯Ό μ œμž‘ν•΄ μ—¬λŸ¬ κΈ°κΈ°μ—μ„œ 각 ν˜•μ‹μ— 맞게 λ³Ό 수 μžˆλŠ” λ°˜μ‘ν˜• 웹에 λŒ€ν•΄μ„œ μ•Œμ•„λ³΄λ„λ‘ ν•˜μž. μš°λ¦¬κ°€ μ—¬νƒœκΉŒμ§€ 배운 것듀을 ν† λŒ€λ‘œ μ›Ήμ‚¬μ΄νŠΈλ₯Ό λ§Œλ“ λ‹€λ©΄ μ›Ή μ‚¬μ΄νŠΈ ν™”λ©΄ λ„ˆλΉ„λ₯Ό λ…ΈνŠΈλΆ ν™”λ©΄ λ„ˆλΉ„μ— λ§žμΆ”μ–΄ κ³ μ •μ‹œν‚€κ±°λ‚˜ 큰 화면을 κ³ λ €ν•΄ λ‚΄μš©μ„ 쀑앙에 μ˜€λ„λ‘ ν•œ ν›„ μ–‘μͺ½μ— 여백을 ν‘œμ‹œν•˜λŠ” λ°©ν–₯으둜 웹을 λ””μžμΈν•  것이닀. ν•˜μ§€λ§Œ 졜근.. 2020. 8. 2.
[HTML+CSS][CSS3와 μ• λ‹ˆλ©”μ΄μ…˜] 05 - μ—°μŠ΅λ¬Έμ œ 01 02 03 Do it! HTML5+CSS3 μ›Ή ν‘œμ€€μ˜ 정석 β€» ν•΄λ‹Ή 글은 μŠ΅λ“ λͺ©μ μœΌλ‘œ μž‘μ„±λœ κΈ€μž…λ‹ˆλ‹€ β€» 2020. 8. 1.
[HTML+CSS][CSS3와 μ• λ‹ˆλ©”μ΄μ…˜] 03 - νŠΈλžœμ§€μ…˜ [HTML+CSS][CSS3와 μ• λ‹ˆλ©”μ΄μ…˜] 02 - λ³€ν˜•κ³Ό κ΄€λ ¨λœ 속성듀 [HTML+CSS][CSS3와 μ• λ‹ˆλ©”μ΄μ…˜] 01 - λ³€ν˜• [HTML+CSS][λ‹€μž¬λ‹€λŠ₯ν•œ CSS3 μ„ νƒμž] 03 - 가상 ν΄λž˜μŠ€μ™€ 가상 μš”μ†Œ [HTML+CSS][λ‹€μž¬λ‹€λŠ₯ν•œ CSS3 μ„ νƒμž] 02 - 속성 μ„ νƒμž [HTML+CSS][λ‹€μž¬λ‹€λŠ₯ν•œ CSS3 μ„ νƒμž] 01 - μ—°.. onelight-stay.tistory.com μ—¬νƒœκΉŒμ§€ λ‹¨μˆœν•œ λ³€ν˜•μ— λŒ€ν•΄μ„œλ§Œ μ•Œμ•„λ³΄μ•˜λ‹€λ©΄ μ΄λ²ˆμ—λŠ” μ™„μ „νžˆ λ‹€λ₯Έ μŠ€νƒ€μΌλ‘œ λ°”κΏ€ 수 μžˆλŠ” νŠΈλžœμ§€μ…˜μ— λŒ€ν•΄μ„œ μ•Œμ•„λ³΄μž. νŠΈλžœμ§€μ…˜ (transition) μ‹œκ°„μ— λ”°λΌμ„œ μ›Ή μš”μ†Œμ˜ μŠ€νƒ€μΌ 속성이 μ‘°κΈˆμ”© λ°”λ€ŒλŠ” 것이닀. transition-property 속성 : νŠΈλžœμ§€μ…˜ μ μš©ν•  속성 지정 νŠΈλžœμ§€μ…˜μ„ μ–΄λŠ 속성에 μ μš©ν•  것인.. 2020. 7. 30.

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