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