Skip to content

πŸ€μž¬λ―ΈμžˆλŠ” CSS κ°€μ§€κ³  놀기

Notifications You must be signed in to change notification settings

cksal0805/perfect-css

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

8 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

μ‹¬μ‹¬ν• λ•Œλ§ˆλ‹€ ν•˜λ‚˜μ”© ν•΄λ³΄λŠ” css

🀩 μ‹¬μ‹¬ν• λ•Œλ§ˆλ‹€ cssλ₯Ό κ°€μ§€κ³  λ†€μ•„λ³ΌκΉŒ ν•©λ‹ˆλ‹€!

🐷 ν•΄λ‹Ήμ½”λ“œμ˜ html file을 λ‘œμ»¬μ—μ„œ 보면 μ• λ‹ˆλ©”μ΄μ…˜λ„ λ³Ό 수 μžˆμŠ΅λ‹ˆλ‹€. codepen에 올렀 λ³Ό 수 μžˆλ„λ‘ μ—…λ°μ΄νŠΈ ν•˜κ² μŠ΅λ‹ˆλ‹€.

πŸ₯ κ΅΄λŸ¬κ°€λŠ” λ°•μŠ€

μ½”λ“œ online tutorials 유튜브 μ„ μƒλ‹˜μ˜ 아이디어λ₯Ό 보고 λ§Œλ“€μ–΄λ³΄μ•˜μŠ΅λ‹ˆλ‹€!

run

πŸ₯ λ‚˜λ§Œμ˜ 사진첩

μ½”λ“œ hover animation μž…λ‹ˆλ‹€!

frame

πŸ₯ λŒμ•„κ°€λŠ”μ§€κ΅¬

μ½”λ“œ

star

css μ΅œμ‹  기술

@support

ν•΄λ‹Ή cssλ₯Ό μ§€μ›ν•˜λŠ”μ§€ μ²΄ν¬ν•΄μ„œ μ μš©μ‹œμΌœμ€Œ

@support (display: grid) {
  div {
    display: grid;
  }
}

μ§€μ›ν•˜μ§€ μ•ŠλŠ”κ±΄ μ•„λž˜ 처럼 체크

@support not (display: grid) {
  div {
    display: flex;
  }
}

Css scroll snap

슀크둀이 μ–΄λ– ν• μ§€ κ²°μ •ν•΄μ€Œ

μ μš©λ°©λ²•: scroll-snap-type을 λΆ€λͺ¨μ—κ²Œ μ§€μ •

#container {
  scroll-snap-type: y mandatory;
}
.children {
  scroll-snap-align: center;
}

:is()

적은 μ½”λ“œλ‘œ 수 λ§Žμ€ μš”μ†Œλ₯Ό 선택할 수 있음

/* before */
header button,
nav button,
form button {
  background-color: tomato;
}

/*after*/
:is(header, nav, form) button {
  background-color: tomato;
}

About

πŸ€μž¬λ―ΈμžˆλŠ” CSS κ°€μ§€κ³  놀기

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published