โ์ ๋๋ก ๋ฐฐ์ฐ๋ HTML + CSS: ์ ๋ฌธ๋ถํฐ ์ค์ ๊น์ง ์๋ฒฝ ์ ๋ณต Part1โ ๊ฐ์๋ ์ธํฐ๋ท๊ณผ ์น์ ์๋ ์๋ฆฌ๋ฅผ ๊น์ด ์ดํดํ๊ณ , ์ค์ต ์์ฃผ์ ์ปค๋ฆฌํ๋ผ์ ํตํด HTML/CSS ๊ธฐ์ด๋ฅผ ํํํ๊ฒ ์ตํ๋ ๊ณผ์ ์ ๋๋ค. ์ด ๊ฐ์๋ง ๋ค์ผ๋ฉด ์น ๊ฐ๋ฐ์ ํ์ ๊ฐ๋ ์ ํ์คํ ์ก๊ณ , ๋ฐ๋ก ํ๋ก์ ํธ์ ์ ์ฉํ ์ ์๊ฒ ๋ฉ๋๋ค.
HTML & CSS์ ๊ธฐ๋ณธ ๊ฐ๋ ์ ์ตํ๊ณ , ์น ํ์ด์ง ๊ตฌ์กฐ์ ์คํ์ผ๋ง ์๋ฆฌ๋ฅผ ์ดํดํฉ๋๋ค.
์๋งจํฑ ํ๊ทธ๋ฅผ ์ฌ์ฉํด ์ ๊ทผ์ฑ์ด ๋์ ์น ๋ฌธ์๋ฅผ ์์ฑํ๋ ๋ฐฉ๋ฒ์ ๋ฐฐ์๋๋ค.
์ธํฐ๋ทยท์น์ฌ์ดํธ ๋์ ์๋ฆฌ ๋ฐ HTTP, DNS ๋ฑ ํต์ฌ ๊ธฐ์ ์ ์ญํ ์ ์ดํดํ์ฌ, ๋ ๊น์ด ์๋ ์น ์ง์์ ์์ต๋๋ค.
๊ฐ๋ฐ ํ๊ฒฝ ์ค์ ๋ถํฐ ๋๊ตฌ ํ์ฉ(Visual Studio Code, Live Server ๋ฑ)์ ์์ฐ์ค๋ฝ๊ฒ ์ต๋ํฉ๋๋ค.
CSS๋ก ํ ์คํธ, ์์, ๋ฐฐ๊ฒฝ, ๋ ์ด์์ ๋ฑ์ ํจ๊ณผ์ ์ผ๋ก ์คํ์ผ๋งํ๋ ๋ฒ์ ํฐ๋ํฉ๋๋ค.
Normalize.css ๊ฐ์ ์ ์ฉํ ๋๊ตฌ ์ฌ์ฉ๋ฒ์ ์ตํ, ๋ธ๋ผ์ฐ์ ๊ฐ ํธํ์ฑ ๋ฌธ์ ๋ฅผ ์ค์ ๋๋ค.
๋ฐ์ค ๋ชจ๋ธ, ๋์คํ๋ ์ด ์์ฑ ๋ฑ์ ํ์ฉํด ์น ํ์ด์ง ๊ตฌ์กฐ๋ฅผ ์์ ์์ฌ๋ก ์ค๊ณํ๋ ๋ฅ๋ ฅ์ ๊ธฐ๋ฆ ๋๋ค.
์ด๊ธ๋ถํฐ ์ฌํ๊น์ง ๋จ๊ณ์ ํ์ต์ผ๋ก, ์ค๋ฌด ํ๋ก์ ํธ์ ์ ์ฉ ๊ฐ๋ฅํ ์ง์์ ์ต๋ํฉ๋๋ค.
๋ค์ํ ์ค์ต ๋ฌธ์ ๋ฅผ ์ง์ ํด๊ฒฐํ๋ฉฐ, ์ฝ๋ ์์ฑ๊ณผ ๋๋ฒ๊น ์ค๋ ฅ์ ํค์๋๋ค.
์น ๊ฐ๋ฐ์ ๋ํ ๊ธฐ์ด ์ง์์ ์ ๋ฐ์ ์ผ๋ก ํ๋ฆฝํ์ฌ, ์ดํ JavaScript๋ ๋ค๋ฅธ ํ๋ ์์ํฌ๋ก ํ์ฅํ๊ธฐ ์ฉ์ดํฉ๋๋ค.
ํ์ต ๋์์
๋๊ตฌ์ผ๊น์?
์น ๊ฐ๋ฐ ์ ๋ฌธ์ ๊ณ ๋ฏผ ์ค์ธ ์์ ์ด๋ณด์
HTML/CSS ๊ธฐ๋ณธ ๊ฐ๋ ์ ํ์คํ ๋ค์ง๊ณ ์ถ์ ๋ถ
์ธํฐ๋ท๊ณผ ์น์ฌ์ดํธ์ ์๋ ์๋ฆฌ๋ฅผ ๊ธฐ์ด๋ถํฐ ๋ฐฐ์ฐ๊ณ ์ถ์ ๋ถ
HTML ํ๊ทธ(์๋งจํฑ ํ๊ทธ ํฌํจ)์ ์ฉ๋์ ์ฌ์ฉ๋ฒ์ ์ง์ ์ค์ตํด ๋ณด๊ณ ์ถ์ ๋ถ
CSS ์์ฑ๊ณผ ๋ ์ด์์ ์ค๊ณ๋ฅผ ๋ง์คํฐํ์ฌ ์๋ฆ๋ค์ด ์น ํ์ด์ง๋ฅผ ๋ง๋ค๊ณ ์ถ์ ๋ถ
์๋ ํ์ธ์, ์ฐ๋ฆฌ๋๋ค์ฝ๋ฉ ์คํ๋์ค์ ์ค์ ๊ฒ์ ํ์ํฉ๋๋ค!
์ฐ๋ฆฌ๋๋ค์ฝ๋ฉ ์คํ๋์ค๋ ์นด๋ค๊ธฐ ๋ฉ๋ก , ์์ฑํด, ํ ๋ก ํ , ์ํฐ๋ฃจ ๋ฑ ๋ถ๋ฏธ์ ์ฃผ์ ๋ํ์์ ์ปดํจํฐ๊ณตํ์ ์ ๊ณตํ๊ณ , Google, Microsoft, Meta ๋ฑ ๊ธ๋ก๋ฒ IT ๊ธฐ์ ์์ ์ค๋ฌด ๊ฒฝํ์ ์์ ๊ฐ๋ฐ์๋ค์ด ํจ๊ป ๋ง๋ ๊ต์ก ๊ทธ๋ฃน์ ๋๋ค.
์ฒ์์๋ ๋ฏธ๊ตญ๊ณผ ์บ๋๋ค์ ์ปดํจํฐ๊ณตํ ์ ๊ณต์๋ค๋ผ๋ฆฌ ํจ๊ป ๊ณต๋ถํ๋ฉฐ ์ฑ์ฅํ๊ณ ์ ๋ง๋ ์คํฐ๋ ๋ชจ์์์ ์์๋์์ต๋๋ค. ๊ฐ๊ธฐ ๋ค๋ฅธ ๋ํ, ๋ค๋ฅธ ์๊ฐ๋์ ์์์ง๋ง ํจ๊ป ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ณ ์๋ก์๊ฒ ๋ฐฐ์ด ๊ทธ ์๊ฐ์ ๋งค์ฐ ํน๋ณํ๊ณ , ์์ฐ์ค๋ฝ๊ฒ ์ด๋ฐ ์๊ฐ์ด ๋ค์์ต๋๋ค.
โ์ฐ๋ฆฌ๊ฐ ๊ณต๋ถํ๋ ์ด ๋ฐฉ์, ๊ทธ๋๋ก ๋ค๋ฅธ ์ฌ๋์๊ฒ๋ ์ ํ๋ฉด ์ด๋จ๊น?โ
๊ทธ ๋ฌผ์์ด ๋ฐ๋ก ์ฐ๋ฆฌ๋๋ค์ฝ๋ฉ ์คํ๋์ค์ ์ถ๋ฐ์ ์ด์์ต๋๋ค.
ํ์ฌ๋ ์ฝ 30๋ช ์ ํ์ง ๊ฐ๋ฐ์์ ์ปดํจํฐ๊ณตํ ์ ๊ณต ๋ํ์๋ค์ด ๊ฐ์์ ์ ๋ฌธ ๋ถ์ผ๋ฅผ ๋งก์, ์ ๋ฌธ๋ถํฐ ์ค์ ๊น์ง ์์ฐ๋ฅด๋ ์ปค๋ฆฌํ๋ผ์ ์ง์ ์ค๊ณํ๊ณ ๊ฐ์ํฉ๋๋ค. ๋จ์ํ ์ง์ ์ ๋ฌ์ ๋์ด, ์ง์ง ๊ฐ๋ฐ์์ ์์ ์ผ๋ก ๋ฐฐ์ฐ๊ณ ํจ๊ป ์ฑ์ฅํ ์ ์๋ ํ๊ฒฝ์ ์ ๊ณตํฉ๋๋ค.
โ์ง์ง ๊ฐ๋ฐ์๋, ์ง์ง ๊ฐ๋ฐ์์๊ฒ ๋ฐฐ์์ผ ํฉ๋๋ค.โ
์ ํฌ๋ ์น ๊ฐ๋ฐ์ ์ ๊ณผ์ ์ ์ฒ์๋ถํฐ ๋๊น์ง ์ฒด๊ณ์ ์ผ๋ก ๋ค๋ฃจ๋, ์ด๋ก ์ ๋จธ๋ฌด๋ฅด์ง ์๊ณ ์ค์ต๊ณผ ์ค์ ์ค์ฌ์ ํผ๋๋ฐฑ์ ํตํด ์ค๋ ฅ์ ํค์๋๋ฆฝ๋๋ค.
์๊ฐ์ ํ ์ฌ๋, ํ ์ฌ๋์ ์ฑ์ฅ์ ํจ๊ป ๊ณ ๋ฏผํ๊ณ ์ด๋์ด๊ฐ๋ ๊ฒ์ด ์ฐ๋ฆฌ์ ์ฒ ํ์
๋๋ค.
๐ฏ ์ฐ๋ฆฌ์ ์ฒ ํ์ ๋ถ๋ช
ํฉ๋๋ค.
"์ง์ ํ ๋ฐฐ์์ ์ค์ฒ์์ ์ค๊ณ , ์ฑ์ฅ์ ํจ๊ปํ ๋ ์์ฑ๋๋ค."
๊ฐ๋ฐ์ ์ฒ์ ์์ํ๋ ์
๋ฌธ์๋ถํฐ, ์ค๋ฌด ๋ฅ๋ ฅ์ ํค์ฐ๊ณ ์ถ์ ์ทจ์
์ค๋น์, ์ง๋ก๋ฅผ ํ์ ์ค์ธ ์ฒญ์๋
๊น์ง.
์ฐ๋ฆฌ๋๋ค์ฝ๋ฉ ์คํ๋์ค๋ ๋ชจ๋์ ์ถ๋ฐ์ ์ด์, ํจ๊ป ๊ฑท๋ ๋ ๋ ํ ๋๋ฐ์๊ฐ ๋๊ณ ์ ํฉ๋๋ค.
์ด์ , ํผ์ ๊ณ ๋ฏผํ์ง ๋ง์ธ์.
์ฐ๋ฆฌ๋๋ค์ฝ๋ฉ ์คํ๋์ค๊ฐ ์ฌ๋ฌ๋ถ์ ์ฑ์ฅ์ ํจ๊ปํ๊ฒ ์ต๋๋ค.
Welcome to Neighborhood Coding Studio!
Neighborhood Coding Studio was founded by a team of developers who studied computer science at top North American universities such as Carnegie Mellon, the University of Washington, the University of Toronto, and the University of Waterloo, and went on to gain hands-on experience at global tech companies like Google, Microsoft, and Meta.
It all began as a study group formed by computer science students across the U.S. and Canada, created to grow together by sharing knowledge, solving problems, and learning from one another.
Though we were attending different schools in different time zones, the experience was so meaningful that it led us to one simple thought:
โWhat if we shared this way of learning with others?โ
That thought became the foundation of Neighborhood Coding Studio.
Today, we are a team of around 30 active developers and computer science students, each taking responsibility for their area of expertiseโdesigning and delivering a curriculum that spans from foundational knowledge to real-world development.
Weโre not just here to teachโweโre here to help you see through the lens of real developers and grow together.
โTo become a real developer, you must learn from real developers.โ
Our courses take you through the entire web development journeyโfrom start to finishโfocused on hands-on practice, real-world projects, and practical feedback.
We care deeply about each learnerโs growth and are committed to supporting your path every step of the way.
๐ฏ Our philosophy is simple but powerful:
"True learning comes from doing, and true growth happens together."
Whether you're just getting started, preparing for your first job, or exploring your future in tech,
Neighborhood Coding Studio is here to be your launchpadโand your trusted companion on the journey.
You donโt have to do it alone.
Let Neighborhood Coding Studio walk with you toward your future in development.
์ ์ฒด
38๊ฐ โ (1์๊ฐ 43๋ถ)
ํด๋น ๊ฐ์์์ ์ ๊ณต:
HTML ์ฃผ์
01:59
CSS๋ ๋ฌด์์ธ๊ฐ?
01:38
CSS ์ ์ฉ ๋ฐฉ๋ฒ
05:27
CSS ์ ํ์ Part1
03:32
CSS ์ ํ์ Part2
02:07
CSS ์ ํ์ Part3
02:12
CSS ๋ช ์๋
03:38
CSS ์์๊ณผ ๋ฐฐ๊ฒฝ
04:56