λ³Έλ¬Έ λ°”λ‘œκ°€κΈ°

πŸ’¬/γ…γ……γ…Œγ…‹γ…γ…… μ±Œλ¦°μ§€

패슀트캠퍼슀 μ±Œλ¦°μ§€ 4일차

[4일차 κ°•μ˜λͺ…]

 

Part 1. HTML/CSS/JS둜 λ§Œλ“œλŠ” μŠ€νƒ€λ²…μŠ€ μ›Ήμ‚¬μ΄νŠΈ

Ch 7. CSS κ°œμš”

 

Ch 7. CSS κ°œμš”

 

주제

 

  • CSS κΈ°λ³Έ 문법
  • CSS μ„ νƒμž
  • μ„ νƒμž μš°μ„ μˆœμœ„: 아이디(#) > 클래슀(.) > νƒœκ·Έ > 전체(*)

 

λ‚΄μš©

 

CSS μ„ μ–Έ 방식

λ‚΄μž₯ 방식 <style></style>의 λ‚΄μš©μœΌλ‘œ μŠ€νƒ€μΌμ„ μž‘μ„±ν•˜λŠ” 방식  CSS λ‚΄μš©μ΄ λ§Žμ•„μ§€λŠ” κ²½μš°μ— HTML 파일 ν•˜λ‚˜μ— λͺ¨λ“  것을 μ²˜λ¦¬ν•˜κΈ° νž˜λ“€λ‹€.
 HTML/CSS/JS νŒŒμΌλ“€μ„ 각자 λ‹€λ₯Έ νŒŒμΌμ—μ„œ μž‘μ—…ν•˜λŠ” 것이 κ°€μž₯ μ’‹λ‹€.
인라인 방식 μš”μ†Œμ˜ style 속성에 직접 μŠ€νƒ€μΌμ„ μž‘μ„±ν•˜λŠ” 방식  (CSS μ„ μ–Έ 방식 쀑에) μš°μ„ μˆœμœ„κ°€ λ„ˆλ¬΄(?) λ†’κΈ° λ•Œλ¬Έμ— μˆ˜μ • 및 μœ μ§€λ³΄μˆ˜μ— μ•…μ˜ν–₯을 끼칠 κ°€λŠ₯성이 크닀.
링크 방식
<link/>둜 μ™ΈλΆ€ CSS λ¬Έμ„œλ₯Ό κ°€μ Έμ™€μ„œ μ—°κ²°ν•˜λŠ” 방식
=> λ³‘λ ¬λ‘œ μ—°κ²°
 
@import 방식 CSS의 @import κ·œμΉ™μœΌλ‘œ CSS λ¬Έμ„œ μ•ˆμ—μ„œ 또 λ‹€λ₯Έ CSS λ¬Έμ„œλ₯Ό 가져와 μ—°κ²°ν•˜λŠ” 방식
=> CSS νŒŒμΌλ“€μ„ 직렬둜 μ—°κ²°
 CSS 파일 연결이 지연될 수 μžˆλ‹€.

@import 방식

 

가상 μš”μ†Œ μ„ νƒμž: before, after

  • 인라인 μš”μ†Œ
  • contentλΌλŠ” CSS 속성을 λ°˜λ“œμ‹œ λͺ…μ‹œν•΄μ•Ό ν•œλ‹€.

가상 μš”μ†Œ μ„ νƒμž(before, after)

 

μŠ€νƒ€μΌ 상속(μƒμ†λ˜λŠ” CSS 속성듀..)

  • 거의 λͺ¨λ“  κΈ€μž/문자 κ΄€λ ¨ 속성듀!
  • κ°•μ œ 상속

κ°•μ œ 상속 inherit

 

μ„ νƒμž μš°μ„ μˆœμœ„

μ„ νƒμž μš°μ„ μˆœμœ„

 

μƒˆλ‘­κ²Œ μ•Œκ²Œλœ 점

 

 tabindex 속성을 톡해 focusκ°€ 될 수 μžˆλŠ” μš”μ†Œλ₯Ό λ§Œλ“€ 수 μžˆλ‹€.

tabindex

 

λŠλ‚€μ 

 

 'μ„ νƒμž μš°μ„ μˆœμœ„'λΌλŠ” 것에 λŒ€ν•΄ λ‹Ήμ—°νžˆ 그런게 μžˆμœΌλ €λ‹ˆ 생각은 ν–ˆμ§€λ§Œ 직접 코딩을 μ³λ³΄κ±°λ‚˜ ν…ŒμŠ€νŠΈ 해보진 μ•Šμ•˜λ‹€. 이번 κ°•μ˜μ—μ„œ 이에 λŒ€ν•΄ μžμ„Ένžˆ μ„€λͺ…ν•΄μ£Όκ³ , 무엇보닀 μ„ νƒμž λ³„λ‘œ 점수λ₯Ό λ§€κ²¨μ„œ μš°μ„  μˆœμœ„λ₯Ό κ³„μ‚°ν•˜λŠ” 방법은 처음 λ³Έ 것이라 μ°Έμ‹ ν–ˆλ‹€.

 


λ³Έ ν¬μŠ€νŒ…μ€ 패슀트캠퍼슀 ν™˜κΈ‰ μ±Œλ¦°μ§€ μ°Έμ—¬λ₯Ό μœ„ν•΄ μž‘μ„±λ˜μ—ˆμŠ΅λ‹ˆλ‹€.

 

#패슀트캠퍼슀

#νŒ¨μΊ μ±Œλ¦°μ§€

#직μž₯인인강

#직μž₯μΈμžκΈ°κ³„λ°œ

#νŒ¨μŠ€νŠΈμΊ νΌμŠ€ν›„κΈ°

#ν•œ_λ²ˆμ—_λλ‚΄λŠ”_ν”„λ‘ νŠΈμ—”λ“œ_개발_초격차_νŒ¨ν‚€μ§€_Online

 

https://bit.ly/37BpXiC

 

패슀트캠퍼슀 [직μž₯인 μ‹€λ¬΄κ΅μœ‘]

ν”„λ‘œκ·Έλž˜λ°, μ˜μƒνŽΈμ§‘, UX/UI, λ§ˆμΌ€νŒ…, 데이터 뢄석, μ—‘μ…€κ°•μ˜, The RED, ꡭ비지원, κΈ°μ—…κ΅μœ‘, μ„œλΉ„μŠ€ 제곡.

fastcampus.co.kr