์ค์๊ธ ํผ๋ธ๋ฆฌ์ฑ์ ์ํ CSS3์ ๋ชจ๋ ๊ฒ
[์ค์๊ธ ํผ๋ธ๋ฆฌ์ฑ์ ์ํ CSS3์ ๋ชจ๋ ๊ฒ] ๊ฐ์์์ ๋ถ์กฑํ ํผ๋ธ๋ฆฌ์ฑ ์ด๋ก ์ ํ์คํ๊ฒ ๊ฐ์ถ์ค ์ ์์ต๋๋ค. ์ด๋ก ์ ์ด๋ ์ ๋ ์์ง๋ง ๋ญ๊ฐ ๋ง๋ค๋ ค๊ณ ํ ๋ ์์ ์๊ฒ ํผ๋ธ๋ฆฌ์ฑ์ด ์๋ ๋๊ฐ ์์ฃผ ์์ต๋๋ค. ์ค์๊ธ ํผ๋ธ๋ฆฌ์ฑ ๋ ๋ฒจ์ ์ค๋ ฅ์ ์ํด ๊น์ด ์๊ฒ ์ด๋ก ์ ํ์ตํ๊ณ ํ์คํ ํผ๋ธ๋ฆฌ์ฑ ์ค๋ ฅ์ ๊ฐ์ถ๊ธฐ ์ํ ํ์์ ์ธ ์ฝ์ค์ ๋๋ค. [์ค์๊ธ ํผ๋ธ๋ฆฌ์ฑ์ ์ํ CSS3์ ๋ชจ๋ ๊ฒ] ๊ฐ์๋ ์ด๊ธ๋ถํฐ ์ค์๊ธ ์ค๋ ฅ์ ๋ชฉํํ๋ ๋ถ๋ค์ ๋์์ผ๋ก CSS3 ๋ชจ๋ ์ด๋ก ๊ณผ ์ด๋ก ์ ์์ฉํ๋ ์คํฌ๊ณผ ๋ ธํ์ฐ๋ฅผ ๋ฐฐ์ธ ์ ์์ต๋๋ค.
์๊ฐ์ 390๋ช
๋์ด๋ ์ด๊ธ
์๊ฐ๊ธฐํ ๋ฌด์ ํ

๋ค๋ฅธ ์๊ฐ์๋ค์ด ์์ฃผ ๋ฌผ์ด๋ณด๋ ์ง๋ฌธ์ด ๊ถ๊ธํ์ ๊ฐ์?
- ํด๊ฒฐ
๊ฐ์ ๋ด์ฉ ๊ด๋ จ ๋ฌธ์๋๋ฆฝ๋๋ค (animation)
์๋ ํ์ธ์.ํ์ฌ ๊ฐ์๋ฅผ ์๊ฐ ์ค์ธ๋ฐ, CSS animation ๊ด๋ จ ๋ด์ฉ์ ๋ณ๋๋ก ๋ค๋ค์ง์ง ์๋ ๊ฒ ๊ฐ์ ๋ฌธ์๋๋ฆฝ๋๋ค.<p style="text-align
HTML/CSS์ฑํ
ใป
5์ผ ์
1
28
2
- ๋ฏธํด๊ฒฐ
Grid ์์ง์ ๋ ฌ ์ ๋๋ก ์๋ฉ๋๋ค.
CSS ์ค์ ์ ๋ ฌ์ ๋ชจ๋
HTML/CSSSOO
ใป
ํ ๋ฌ ์
1
45
1
- ๋ฏธํด๊ฒฐ
๊ฐ์ ํ๋ฉด์ด ์๋์ด
์ ํ์ ๊ฐ์๋ถํฐ ํ๋ฉด์ด ๊ฒ์์์ผ๋ก๋ง ๋์ต๋๋ค.
HTML/CSSusl_designer
ใป
1
189
1
- ๋ฏธํด๊ฒฐ
๋ก๊ทธ์ธ ํผ CSS ๋์์ธ ์ฝ๋ ์ง๋ฌธ ์์ต๋๋ค.
์ ์๋, ์ ๊ฐ ๊ดํธ ์ฌ์ฉ ์ฝ๋์ ๋ํด ์์ง ์ง
HTML/CSStnrud2668
ใป
1
215
1
- ํด๊ฒฐ
inherit์ 100%์ ์ฐจ์ด๊ฐ ๊ถ๊ธํฉ๋๋ค.
์๋ ํ์ธ์ ์ ์๋, ( hover๋ก ๋ง๋๋ ๋ฒํผ ๋์์ธ, ๋๋กญ๋ค์ด ๋ค๋น๊ฒ์ด์ & ์ปจํ ์ธ ) ๋ฅผ ๋ฃ๋ค๊ฐ ๊ถ๊ธํ ์ ์ด ์๊ฒจ ์ง๋ฌธ ๋๋ฆฝ๋๋ค. 10:32 ๋ถ์ ๋ณด์ฌ์ง๋ .dropdown {width: 150px'
HTML/CSStnrud2668
ใป
1
290
2
- ํด๊ฒฐ
<br>ํ๊ทธ ์ฌ์ฉ ๋น๋๋ฅผ ์ค์ด๊ฒ ๋ ๊ฒฝ์ฐ์ ์ง๋ฌธ์ ๋๋ค.
์๋ ํ์ธ์ ์ค~ ์ ๊ฐ ์ง๊ธ๊น์ง ๋์คํ๋ ์ด ์ดํด๋๊ฐ ๋ฎ์์br ํ๊ทธ๋ฅผ ์์ฒญ ์ผ์๋๋ฐ์,(display ์์ฑ ์ดํด๋๊ฐ ์์ ๊ฒฝ์ฐ ์๊ธฐ๋ ๋น ์น ํ์ค ์ฝ๋ฉ)๊ฐ์๋ฅผ ๋ณด๊ณ ๋ฌด๋ฆ์ ํ ์ณค์ต๋๋ค..!!ใ ใ ๊ทธ๋ฌ๋ค ๋ฌธ๋ ๋๋ ์
HTML/CSStnrud2668
ใป
1
191
1
- ๋ฏธํด๊ฒฐ
์์ ์๋ฃ๋ ์๋์?~
- ํ์ต ๊ด๋ จ ์ง๋ฌธ์ ๋จ๊ฒจ์ฃผ์ธ์. ์์ธํ ์์ฑํ๋ฉด ๋ ์ข์์! - ๋จผ์ ์ ์ฌํ ์ง๋ฌธ์ด ์์๋์ง ๊ฒ์ํด๋ณด์ธ์. - ์๋ก ์์๋ฅผ ์งํค๋ฉฐ ์กด์คํ๋ ๋ฌธํ๋ฅผ ๋ง๋ค์ด๊ฐ์. - ์ ๊น! ์ธํ๋ฐ ์๋น์ค ์ด์ ๊ด๋ จ ๋ฌธ์๋ 1:1 ๋ฌธ์ํ๊ธฐ๋ฅผ ์ด์ฉํด์ฃผ์ธ์.,</p
HTML/CSS์ดํ๊ถ
ใป
1
312
1
- ๋ฏธํด๊ฒฐ
[๊ณต์ ] ๋ถ๋ชจ ์์๊ฐ position: absolute ์ธ ๊ฒฝ์ฐ์ ๋ํ ์ค๋ช
์์ ๋ง์ง๋ง ๋ถ๋ถ์ ๋ณด๋ฉด ๋ถ๋ชจ ์์์ position: absolute์ธ ๊ฒฝ์ฐ์๋ ๋ถ๋ชจ-์์ ์์๊ฐ ๋งค์นญ์ด ๋๊ฒ ๋๋ ๊ฑธ ๋ณด์ จ์ ๊ฒ๋๋ค. ์ ํํ๊ฒ๋ relative๊ฐ ๋ถ๋ชจ, absolute๊ฐ ์์์ผ๋ก ๋งค์นญ๋๋ ๊ฒ์ด ์๋ (ํธ์์
HTML/CSSalvinlog
ใป
1
652
1
- ๋ฏธํด๊ฒฐ
float: right ์์๊ฐ ์๋์ ๋ฐฐ์น๋๋ ์ด์ ์ฝ๊ฒ ์ค๋ช
๊ฐ์์์ ๋์จ ๊ฒ์ฒ๋ผ ํ๋๋ float:left ํ๋๋ margin:auto ํ๋๋ float: right์ ๋ง์ง๋ง ์์๊ฐ ์๋์ ๋ฐฐ์น๋ฉ๋๋ค. ์๊ฐํด๋ณด๋ฉด ์ด๊ฒ์ ๋๋ฌด๋๋ ๋น์ฐํ ๊ฒ์ ๋๋ค.๋ง์ง๋ง ์์์ float:rig
HTML/CSSalvinlog
ใป
1
838
1
- ๋ฏธํด๊ฒฐ
์๋ ํ์ธ์ ๊ฐ์ํด๋์ค ํฌ์ง์ ํ์ฉ ์ง๋ฌธ๋๋ฆฝ๋๋ค
์๋ ํ์ธ์ ๊ฐ์๋ฅผ ๋ฃ๋ค ์๋ฌธ์ด ์๊ฒจ ์ง๋ฌธ์ ๋๋ฆฝ๋๋ค. before after ๊ฐ์ํด๋์ค(๋ํ๊ณผ ๋ฒํผ ๋ง๋ค๊ธฐ , ํฌ์ง์ ํ์ฉ)01 ๊ฐ์์ค13๋ถ ๊ฒฝ ๊ฐ์ํด๋์ค ํฌ์ง์ ํ์ฉ์ ์ค๋ช ํด ์ฃผ์๋ฉด์ absolute๊ฐ relative๊ฐ ์ฐ์ ํ
HTML/CSS๊ถ๊ฒฝ์
ใป
1
378
2
- ๋ฏธํด๊ฒฐ
hover ๊ฐ์ํด๋์ค ( hover๋ก ๋ง๋๋ ๋ฒํผ ๋์์ธ, ๋๋กญ๋ค์ด ๋ค๋น๊ฒ์ด์ & ์ปจํ ์ธ ) ๊ฐ์์ค
์๋ ํ์ธ์ ๊ฐ์ฌ๋ ๊ฐ์๋ฅผ ๋ฃ๋ค ์ง๋ฌธ์ด ์๊ฒจ ์ง๋ฌธ๋๋ฆฝ๋๋ค.๋๋กญ๋ค์ด ์ปจํ ์ธ ๊ฐ์ ์ค 23๋ถ๊ฒฝ์ ๋ง์ฐ์ค ํธ๋ฒ ์ด๋ฒคํธ๊ฐ pํ๊ทธ๋ image๊ฐ ์์นํ๋ ๊ณณ์ ๋ง์ฐ์ค๊ฐ ์ฌ๋ผ๊ฐ๋ ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ๋ ๋ฌธ์ ๊ฐ ์๋ค๊ณ ๋ง์ํ์ จ๋๋ฐ์ ๊ทธ๋ฌ๋ฉด์ to
HTML/CSS๊ถ๊ฒฝ์
ใป
3
444
2
- ๋ฏธํด๊ฒฐ
nav ํ๊ทธ
์๋ ํ์ธ์ ๊ฐ์ฌ๋ ์ง๋ฌธ์ด ์์ด ์ง๋ฌธ๋๋ฆฝ๋๋ค.๊ฐ์ 1๋ถ 30์ด๊ฒฝ์ nav ํ๊ทธ๋ฅผ ์ค๋ช ํ์๋ฉด์ ํ๋์ html ๋ฌธ์์ ์ฌ๋ฌ๊ฐ์ nav ํ๊ทธ๊ฐ ์ค๋๊ฒ์ ์๋ฉํฑ ํ๊ทธ ์ทจ์ง์ ๋ง์ง ์๋ค๊ณ ์ค๋ช ํด์ฃผ์ จ๋๋ฐ์mdn ์ฌ์ดํธ์ nav ํ๊ทธ๋ฅผ ๊ฒ์ํด๋ณด๋ฉด</p
HTML/CSS๊ถ๊ฒฝ์
ใป
1
1,106
1
- ๋ฏธํด๊ฒฐ
css ์ ํ์์ ๋ชจ๋ -์ ํ์ ์ฐ์ ์์๊ฐ ์ค์ํ ์ด์ ๊ฐ์ ๋ด์ฉ์ค์์
์๋ ํ์ธ์ ์๊ฐ์ ์์ํ์ง ์ผ๋ง ๋์ง ์์ ํ์์ ๋๋ค. ๊ฐ์๋ฅผ ๋ฃ๋์ค ์ง๋ฌธ์ด ์๊ฒจ ์ง๋ฌธ๋๋ฆฝ๋๋ค. ๊ฐ์ 12๋ถ ๊ฒฝ ์ ํ์ ์ฐ์ ์์๋ฅผ ์ค๋ช ํ์๋ฉด์ ์ธ๋ถ ์คํ์ผ์ํธ ๋ณด๋ค ๋ด๋ถ css๊ฐ ๋ ์ฐ์ ํ๋ค๊ณ ๋ง์ํด์ฃผ์ จ๋๋ฐ<li
HTML/CSS๊ถ๊ฒฝ์
ใป
1
532
1
- ๋ฏธํด๊ฒฐ
๊ฐ์์๋ฃ๋ ์ด๋์ ๋ฐ์ ์ ์๋์?
๋น์ฃผ์ผ ์คํ๋์ค ์ฝ๋(Visual Studio Code) ์ฌ์ฉ๋ฒ ๊ฐ์๋ฅผ ๋ณด๊ณ ์๋๋ฐ ์์ฃผ์ฌ์ฉํ๋ ์๋ฐ ๋จ์ถํค๋ผ๋์ง vscode ์ค์ ๋ฒ ๊ด๋ จ ๊ฐ์์๋ฃ pdf ๋ฅผ ์ฌ๋ ค์ฃผ์ ๋ค๊ณ ํ์๋๋ฐ.. ๊ทธ ์๋ฃ๋ ์ด๋์ ๋ฐ์ ์ ์๋์?
html/cssHTML/CSSํฉํ๋น
ใป
1
331
1
- ๋ฏธํด๊ฒฐ
before after ๊ฐ์ํด๋์ค(๋ํ๊ณผ ๋ฒํผ ๋ง๋ค๊ธฐ, ํฌ์ง์ ํ์ฉ) 01 ๊ฐ์ ์ค ์ด๋ฏธ์ง ์ ๋จ๋ ๋ฌธ์ ์ใ .ใ
23:33๋ถ์ background:url(images/...) no-repeat;๋ถ๋ถ์ด ์๋๋ฐ ๋ค๋ฅธ ์ฌ์ง ๋ฃ์ผ๋ฉด ๋จ๋๋ฐ ์นด์นด์คํก ์ด๋ฏธ์ง๋ง ๋ฃ์ผ๋ฉด ๋จ์ง ์์์ ๋ฌธ์ ๊ธ ๋จ๊น๋๋คใ ใ กใ <img src="https://cdn.inflearn.co
html/cssHTML/CSS์ต์ง์
ใป
1
646
2
- ๋ฏธํด๊ฒฐ
์ ํ๋ธ ์์ ํ์ผ
์ ์๋ ์ ๋ฃ๊ฐ์ ๋ค ๋ฃ๊ณ ์ ํ๋ธ์ ์ฌ๋ผ์จ ํ์ ์์ ๊ณต๋ถ์ค์ ๋๋ค!์์์์ ์ ๊ณตํด์ฃผ์ ํ์ผ์ด ์ด๋จ๋์ง ๋ชจ๋ฅด๊ฒ ์ด์ใ ใ ์๋ ค์ฃผ์ธ์~~!!!
HTML/CSS์ถฉ์คํ ๊ณ ๋ฑ์ด
ใป
1
295
1
- ๋ฏธํด๊ฒฐ
๋ชจ๋ฐ์ผ css ์์ (๋จ์)
์ ์๋, ์ค๋๋ง์ ์ธ์ฌ๋ฅผ ๋๋ฆฌ๊ฒ ๋์๋ค์.๋ฒ์จ ์ ์ฌ๋ฅผ ํ์ง 1๋ ์ด ๋ค๋๊ฐ๊ณ ์๋ค์.์ฒ์์๋ ๋๋ฌด ํ๋ค์ด์ ์ ํ๋ฅผ ํ๋ฉด์ ์ ์๋๊ป ๊ณ ๋ฏผ์๋ด๋ ํ๋๋ฐ ์ง๊ธ์ ๋ค๋ค 2~3๋ ์ฐจ๋ก ๋ณผ๋งํผ ์ฑ์ฅ(ํน์ ์ฐ๋ ..)ํ์์ต๋๋ค.ํ์ฌ ์์ฌ ์ ๊ท์
HTML/CSSair_guri
ใป
1
288
1
- ๋ฏธํด๊ฒฐ
์ ํ๋ธ์ ์ด๊ธ,์ค๊ธ ์ด๋ก ๊ณผ๋ ์ด๋ค์ฐจ์ด๊ฐ ์๋์?
ํ์ฌ ์ ๋ฌด์ ๋งํฌ์ ์ ํ ์ผ์ด ์์ด ์์ ๋๊ณ ์ง๋ด๋ค๊ฐ์ด์ง์ ์๊ฐํ๋ฉฐ ๋ค์ ๋งํฌ์ ๊ณต๋ถ๋ฅผ ํ๋ ค๊ณ ํ๋๋ฐ์.html/css๋ฅผ ์์ ๋ชจ๋ฅธ๋ค๊ณ ๋ ํ๊ธฐ ํ๋ ๋ฐ (๊ธฐ๋ณธ์ ์ธ ์์ ์ ๋๋ ๊ตฌ๊ธ๋ง ํด๊ฐ๋ฉด์ ๊ฐ๋ฅํฉ๋๋ค)์์ ์ด๊ธ๋ถํฐ ๋ค์ ํด์ผ
HTML/CSS์ธ๊ณ์
ใป
1
252
1
- ๋ฏธํด๊ฒฐ
์ ์๋ ์ง๋ฌธ์ด ์์ต๋๋ค. (float ์์ฑ)
<img src="https://cdn.inflearn.com/public/fil
HTML/CSSJAEWON LEE
ใป
1
251
1
- ๋ฏธํด๊ฒฐ
ํ์ผ๋ค์ด๋ก๋์ ๊ด๋ จํ์ฌ
์๋ ํ์ธ์ ์ ์๋. [๋ค์ด๋ก๋] ํผ๋ธ๋ฆฌ์ฑ ์์ฑ๋ณธ(ํ๋กํ์นด๋, ์์ํ๊ธฐ, ๋ก๊ทธ์ธํผ, ๋ก๊ทธ์ธํผ :is ๊ฐ์ํด๋์ค) ๋ค์์ ์์ ์๋ฃ๋ฅผ ์ ์ฅํ๋ ค๊ณ ํ๋, ์ ์ฅ๋ฒํผ์ด ์๋ ์์. ํ์ธ ๋ถํ๋๋ฆฌ๊ฒ ์ต๋๋ค.
HTML/CSSJAEWON LEE
ใป
1
245
1






