📌 AI 시대, 다시 주목받는 웹개발의 기본! HTML로 시작하세요

ChatGPT, claude, Gemini 등 AI와 no-code, row-code 도구가 점점 널리 활용되는 지금,

웹의 기초를 정확히 이해한 개발자가 더 강력한 경쟁력을 갖게 됩니다.

웹페이지는 크롬, 사파리, 파이어 폭스와 같은 브라우저에서 표현되며, 브라우저가 인식하는 언어는 HTML, CSS, JavaScript입니다.

그 중에서도 모든 웹페이지의 뼈대를 담당하는 HTML은 가장 먼저 익혀야 할 핵심이 되겠습니다.

본 과정은 "코딩은 처음이라 with 웹 퍼블리싱" 저자가 직접 진행하는 입문 강의로,

완전 초보자도 쉽게 이해할 수 있도록 체계적으로 구성되었습니다.

AI 시대에도 흔들리지 않는 기초 실력을 지금부터 함께 다져보세요.

_{[ 코딩은 처음이라 with 웹 퍼블리싱 ]}

🎯 학습 목표

• HTML의 기본 구조와 주요 태그를 이해하고 활용할 수 있다.

• 웹표준과 웹접근성을 고려한 HTML 마크업을 작성할 수 있다.

• 디자인 시안을 바탕으로 HTML 구조를 구현하여 나만의 포트폴리오 웹사이트 초안을 제작할 수 있다.

👩‍💻 학습 대상

• 웹 개발에 입문하려는 성인 학습자

• 포트폴리오 웹사이트를 직접 제작해보고 싶은 취업 준비생 또는 프리랜서

• HTML의 기초 문법과 구조를 제대로 학습하고자 하는 웹디자인 전공자

  
  

본 과정에서는 아래와 같은 피그마 디자인을 참조하여 HTML을 작성합니다.

이후 공개될 CSS 강의에서 디자인과 동일하게 화면에 표시되도록 웹페이지를 완성합니다.

_{[ 포트폴리오 디자인 - 피그마 ]}

✅ 예제시작 파일 :

https://github.com/ezwebpublishing/class101_web-basic-01

예제 완성본은 마지막 차시(클래스를 마치며) 학습파일을 확인해주세요.

✨ 과정 특징

• 실제 포트폴리오 구현을 목표로 한 실습 중심의 커리큘럼

• HTML의 기초 개념부터 폼, 미디어 태그, 시멘틱 태그까지 체계적인 구성

• 웹표준 및 웹접근성을 반영하여 실무에서 활용 가능한 올바른 마크업 습득

  
  

✅ 추천 학습 로드맵

1. 코딩은 처음이지 - HTML부터 시작해보자 (본 강의)

   → 웹의 구조 이해, 시멘틱 마크업 등 기초 마스터

   → [프로젝트] 포트폴리오 웹사이트 구현하기 - HTML

   
   

2. 코딩은 처음이지 - CSS로 스타일을 작성하자 (오픈 예정)

   → 색상, 폰트, 박스 모델, 레이아웃 구성 기본

   → [프로젝트] 포트폴리오 웹사이트 구현하기 - CSS

   
   

3. 코딩은 처음이지 - CSS 중급: 반응형 웹 디자인 (오픈 예정)

   → 미디어쿼리, Flexbox, Grid 등을 통한 다양한 화면 대응

   
   

4. 코딩은 처음이지 - JavaScript 기초 및 응용 (오픈 예정)

   → 동적 웹페이지 구현, 이벤트, DOM 조작 등

   
   

5. ChatGPT, Claude 등의 AI 도구 활용 (오픈 예정)

   → row-code 방식으로 웹페이지 자동화 및 빠른 프로토타입 제작 실습

   
   

6. React + fireBase 연동 웹앱 구현 (오픈 예정)

   → 실시간 문의 커뮤니티 웹앱 구현을 통해 프론트엔드와 백엔드 연동

   
   

기초가 탄탄할수록, 변화의 시대에 더 유연하게 대처할 수 있습니다.

웹 개발의 진짜 출발선, HTML에서 함께 시작하세요!