์ค์ ! ์น์ฌ์ดํธ์ ์! Step by Step! ('๋๋ค' ์ฌ์ดํธ์ ์_Basic Course)
[์น์ฌ์ดํธ์ ์ Step By Step] Basic-course๋ก, ๋๋ค(http://dopda.co.kr/) ๋ฉ์ธํ์ด์ง๋ฅผ ๊ทธ๋๋ก ์ ์ํด ๋ณด๋ ๊ณผ์ ์ ๋๋ค. ๋ณธ Basic Course๋ CSS ๋ ์ด์์ ์ ์๊ณผ ์ ๋๋ฉ์ด์ ์ ๋ํด ๋ค๋ฃจ๋ฉฐ, ์ด์ด์ Application-course์์๋ ์ด๋ฏธ์ง์ฌ๋ผ์ด๋ ํจ๊ณผ, ๋ฐ์ํ์ ์, ์คํฌ๋กค ์ ๋๋ฉ์ด์ , Fix Header ๋ฑ์ ์ธํฐ๋ ํฐ๋ธ ์์๋ฅผ ์ถ๊ฐํ์ฌ ๊ฐ์ค๋ ์์ ์ ๋๋ค.
์๊ฐ์ 1,077๋ช
๋์ด๋ ์ด๊ธ
์๊ฐ๊ธฐํ ๋ฌด์ ํ
- ๋ฏธํด๊ฒฐ
'VIEW' ๋ผ๋ ํ ์คํธ๋ฅผ ๋ฐ์ค ๊ฐ์ด๋ฐ๋ก ์ค๊ฒ ๋ง๋ค ๋
์๋ ํ์ธ์ ๊ฐ์๋ด์ฉ ์ค 14:57~ ์ฆ์์ VIEW๋ฅผ ๋ฐ์ค ์ค์(๊ฐ๋ก๋ก๋ ๊ฐ์ด๋ฐ, ์ธ๋ก๋ก๋ ๊ฐ์ด๋ฐ)์ ๋ฐฐ์นํ๊ธฐ ์ํด padding-top: 200px์ ์ฃผ์ด์ผํ๋ค๊ณ ํ์ จ๋๋ฐ, ๊ทธ ์ด์ ์ ๋ํด ๊ถ๊ธํฉ๋๋ค! ์์ด๋ ๋ชจ๋ํฐ์ ๊ฒฝ์ฐ์๋ padding-top์
์น ๋์์ธHTML/CSSrsy9010
ใป
0
212
1
- ๋ฏธํด๊ฒฐ
width100%๊ถ๊ธํฉ๋๋ค~
์๋ ํ์ธ์~ ์ ์๋ <p class="type-plac
HTML/CSS์น ๋์์ธ5dorothy
ใป
0
202
1
- ๋ฏธํด๊ฒฐ
๋ฆฌ์ ์ ๋ํ ์ง๋ฌธ
์ ์๋ ์๋ ํ์ธ์ ๋ฆฌ์ ์ ๋ํ ์ง๋ฌธ์ธ๋ฐ์ ํ์ ์์๋ ์ด๋ ๊ธฐ์ ์ ๊ฐ๋ * {margin:0; padding:0;} * {margin: 0
HTML/CSS์น ๋์์ธ์์ํ๊ฒ
ใป
0
212
1
- ํด๊ฒฐ
<span> ํ๊ทธ์ <div>, <p> ํ๊ทธ ๊ด๋ จ ์ง๋ฌธ์ ๋๋ค!
์๋ ํ์ธ์ ๊ฐ์ฌ๋! ์ง๋ฌธ ๋๋ฆด ๊ฒ ๋ช ๊ฐ์ง ์๊ฒจ์ ๋ ์ฐพ์์ค๊ฒ ๋์๋ค์ใ ใ ใ ใ 1. ๊ณผ ์์ ๊ด๋ จ ์ ์ฒด์ ์ธ ์ฝ๋๋ฅผ ๋ณด๋ฉด ๊ฐ์ฌ๋๊ป์ ์ด๋ฏธ์ง ํ๊ทธ๋ฅผ inline ์์์ธ
์น ๋์์ธHTML/CSSskyj6978
ใป
0
709
2
- ํด๊ฒฐ
float:left ์ง๋ฌธ์ ๋๋ค!
์๋ ํ์ธ์ ๊ฐ์ฌ๋์ ์ข์ ๊ฐ์ ์ ๋ฃ๊ณ ์์ต๋๋ค^-^! ๋ค๋ฆ์ด ์๋๋ผ ๊ฐ์ฌ๋๊ป์ ๋ฅผ ๊ฐ๋ก(ํ ์ค)๋ก ๋์ดํ ๋ float:left๋ฅผ ์ฌ์ฉํ์ จ๋๋ฐ, ํน์ float:left ๋์ ์ display:inine-block์ผ๋ก ๋ฐ๊ฟ์ ์ฌ์ฉํด๋ ๊ด์ฐฎ์๊ฐ์?!
์น ๋์์ธHTML/CSSskyj6978
ใป
0
201
1
- ๋ฏธํด๊ฒฐ
์๋ชป ๊ตฌ์ ํ๊ฑฐ ๊ฐ๋ค์..
์ ๊ธฐ์ต์ ๋๊ฐ์ ๋ด์ฉ์ด ์ ํ๋ธ์ ์ฌ๋ผ์์๊ณ ์ด๊ฑด ๋๋จธ์ง ์ธ๋ถ๊น์ง ๋ค ๋ง๋๋ ์์์ธ์ค์์๋๋ฐ.. ๋ญ๊ฐ ๋ง๋ค๋ค ๋ง ๋๋์ด๋ค์ ใ ใ
HTML/CSS์น ๋์์ธํ๋ฃฐ๋ผ
ใป
0
182
1
- ๋ฏธํด๊ฒฐ
๊ฐ์์๋ฃ ๋ค์ด๋ก๋ ๋ฌธ์
<span style="font-size: 15px;
์น ๋์์ธHTML/CSSlemon300g
ใป
0
227
1
- ๋ฏธํด๊ฒฐ
section.global์์ ์ ๋๋ฉ์ด์ ์ง๋ฌธ
์๋ ํ์ธ์ section.global์์ ์ ๋๋ฉ์ด์ ์ด ์คํฌ๋กค์ด ๋ด๋ ค๊ฐ๊ธฐ๋ ์ ์ ๋๋์๋๋ฐ.. ์ ๊ฐ ๋ญ ์๋ชปํ๊ฑธ๊น์..?
์น ๋์์ธHTML/CSS๋ณ์ธ์ฐ
ใป
0
147
0
- ๋ฏธํด๊ฒฐ
cover๋ background ์์ฑ์ ์ฌ๋ฐ๋ฅธ ๊ฐ์ด ์๋๋๋ค.
<img src="https://cdn.inflearn.com/public/files/posts/86c18ca0-d7b7-4e42-bac1-9ffa42a4ef03/์ ํจ์ฑ ๊ฒ์ฌ.PNG" title="์ ํจ์ฑ ๊ฒ์ฌ.PNG" width="1034" height="87"
์น ๋์์ธHTML/CSS๊นํ์ฐ
ใป
0
1,590
2
- ๋ฏธํด๊ฒฐ
float
section.visual .menu li a p{ float:left; /* ํ์ดํ๊ฐ ์ฌ๋ผ์ฌ์์๋๋ก; */ font-weight
์น ๋์์ธHTML/CSSmanU
ใป
0
160
1
- ๋ฏธํด๊ฒฐ
text-align
๊ฐ์ฌ๋ ์ ๋ text-align์ block ์์์์ ์๋ inline์์๋ฅผ ์ ๋ ฌํ๋ ๊ฒ์ผ๋ก ์๊ณ ์๋๋ฐ, section.global์ text-align : center์ ์คฌ์ ๋ h2ํ๊ทธ์ธ title ํด๋์ค ์์์๋ G
HTML/CSS์น ๋์์ธmanU
ใป
0
285
4
- ํด๊ฒฐ
animation widthAni ์ค๋ .txtImg์ overflow:hidden
animation widthAni ์ค๋ .txtImg์ overflow:hidden์ ์ค์ผ ์ ๋๋ฉ์ด์ ์ด ๋ณด์ด๋๋ฐ ์ด์ ๊ฐ ๋ญ๊ฐ์??
HTML/CSS์น ๋์์ธmanU
ใป
1
289
1
- ํด๊ฒฐ
after์ before์ ์ฐจ์ด
์ ํค๋์์ญ์์ header nav .gnb li a:after ์ด๋ถ๋ถ์์ before๋ก ์ ์ฉํ๋ฉด ์๋์ค๊ณ , section.visual:before ์ด๋ถ๋ถ์์๋ after๋ฅผ ํด๋ ๊ฐ์๊ฒฐ๊ณผ๊ฐ ๋์ค๊ณ ์ด๋ค ์ฐจ์ด๊ฐ ์๋์ง ๋ชจ๋ฅด๊ฒ ์ต๋๋ค
์น ๋์์ธHTML/CSSmanU
ใป
0
280
1
- ๋ฏธํด๊ฒฐ
์๋ ํ์ธ์ ๊ฐ์ ํด๋
๊ฐ์ ํด๋๊ฐ ์ฒจ๋ถ๋์ด์๋์? ์ ๊ฐ ๋ชป์ฐพ๋๊ฑด์ง..ใ
์น ๋์์ธHTML/CSSSooJung Jo
ใป
1
356
1
- ๋ฏธํด๊ฒฐ
์์ 1, 2 ์์ฐ์ค๋ฝ๊ฒ ์ฐ๊ฒฐ๋๊ฒ ๋ง๋์?
1๋ณด๊ณ 2๋ก ๊ฐ๋๋ฐ.. ์์๋ถํฐ ์ดํด๊ฐ ์๋๋ค์
HTML/CSS์น ๋์์ธBroccoli
ใป
0
282
1






