제대로 배우는 HTML + CSS: 입문부터 실전까지 완벽 정복 Part1 - [기초편]

웹 개발, 막연하게 느껴지셨나요?

이 강의는 단순히 HTML/CSS 문법만 훑고 지나가는 입문 강의가 아닙니다.

• 인터넷과 웹사이트가 어떻게 동작하는지,

• HTTP나 DNS와 같은 기술이 왜 중요한지,

• 브라우저와 서버가 어떻게 소통하는지,

이런 근본적인 원리를 먼저 탄탄히 잡아 드립니다. 기초를 제대로 이해하는 것이야말로, 더 효율적으로 배우고 빠르게 성장하는 지름길이니까요.

이 강의는 다른 ‘입문 강의’와 무엇이 다를까요?

1. 체계적인 커리큘럼

   • HTML/CSS 문법은 물론, 웹의 작동 원리, 네트워크 기초(HTTP, DNS)까지 꼼꼼하게 짚어드립니다.

   • 이렇게 쌓은 기초 지식은 훗날 JavaScript, React, Vue 등 프론트엔드 기술을 배울 때도 크게 도움이 됩니다.

2. 실습 위주의 진행

   • 각 섹션마다 연습문제를 통해 직접 코드를 작성하고 결과를 확인해 볼 수 있습니다.

   • 초보자도 능동적으로 학습하며, 실무형 감각을 빠르게 익히도록 설계했습니다.

3. 전문가 팀의 노하우

   • 해외 명문대 컴퓨터 공학 전공 & 글로벌 IT 기업 출신 개발자들이 합심해 만든 [우리 동네 코딩 스튜디오]의 콘텐츠입니다.

   • 쉽고 친근한 설명 속에 실무에서 바로 쓸 수 있는 노하우가 녹아 있습니다.

   
   

섹션 1: [우리 동네 코딩 스튜디오] 웹 개발 필수지식

• 인터넷 & 웹사이트가 동작하는 근본 원리

• HTTP, DNS가 웹 개발에서 중요한 이유

• 실무 노하우: 도메인·서버 연결 시 왜 알아야 하는지

섹션 2: HTML Level 1

• HTML 문서 구조 & 시맨틱 태그

• 폼(form), 멀티미디어, 주석 등 다양한 HTML 태그

• 레이아웃 연습: 시맨틱 태그로 구조적 웹페이지 만들기

섹션 3: CSS Level 1 (Part1)

• CSS 선택자와 명시도

• 텍스트, 배경, 색상, 폰트 사이즈 등 기본 스타일링

• 실습 & 연습문제: 코드를 작성하며 스타일을 직접 적용해 보기

섹션 4: CSS Level 1 (Part2)

• 디스플레이(display), 박스 모델(box model)

• 오버플로우(overflow)와 박스 사이징(box-sizing) 개념

• Normalize.css로 브라우저 간 호환성 맞추기

• 요약 PDF로 핵심 개념 복습