HTML 배우기 - 코딩 강좌
HTML 배우기 - 코딩 강좌 — 주머니 속에서 실시간 미리보기 편집기를 사용할 수 있는 HTML course
HTML 배우기 - 코딩 강좌는 iPhone과 Android에서 사용할 수 있는 HTML course로, 모든 레슨에서 한 번만 탭하면 실시간 미리보기가 지원되는 HTML 편집기를 열 수 있어요. 태그를 입력하고 페이지가 렌더링되는 모습을 확인한 다음, 첫 번째 제목부터 폼, 표, 시맨틱 HTML5, 접근성, 웹 컴포넌트까지 40개의 짧은 course를 통해 단계별로 배워 보세요.
- 가격
- 무료, Pro 업그레이드
- 플랫폼
- iOS 및 Android
- 언어
- 22
- 연령 등급
- 4+
- 필요 사항
- iOS 15.1 이상
- App Store
- 3.0 ★ (1)
태그가 무언가를 그려 내는 모습을 직접 보면 태그의 의미가 더 또렷해져요.
HTML은 마크업 언어이므로, 새로운 요소를 이해하는 가장 빠른 방법은 직접 입력하고 결과를 확인하는 거예요. 이 앱의 각 레슨은 편집기가 이미 열린 상태로 끝나며, 마크업 옆에 미리보기가 표시돼요. CSS나 JavaScript 파일은 필요할 때 준비가 되면 추가하면 돼요.
어떤 앱인가요
HTML 배우기 - 코딩 강좌는 iOS와 Android에서 무료로 시작할 수 있는 HTML course로, 40개의 course와 159개의 짧은 레슨을 통해 웹 페이지 마크업을 가르쳐요. 초급(A1)부터 고급(C1)까지 순서대로 구성되어 있으며, 모든 주제를 내장 HTML 코드 편집기와 즉시 미리보기, 연락처 폼과 접근성을 고려한 가격표 등을 만드는 20개의 가이드 프로젝트, 20개의 디버깅 미션, AI 멘토와 함께 익힐 수 있어요. 완전한 초보자도 빈 문서에서 시작해 시맨틱하고 접근성이 뛰어난 잘 구조화된 페이지를 만들 수 있게 돼요.
앱 내부 살펴보기
화면은 어떻게 보이나요
강좌
HTML 코스에서 다루는 내용
앱 자체 코스 목록에 있는 40개 코스와 159개 레슨을 학습 경로 순서대로 제공해요.
문서 구조, 텍스트, 링크, 이미지 및 목록
모든 페이지의 뼈대인 문서 구조, 제목과 단락, 링크와 탐색, 이미지와 그림, 순서 있는 목록과 순서 없는 목록을 다뤄요.
테이블, 속성 및 전역 속성
먼저 테이블로 데이터를 배치하고, 그다음 요소를 조정하는 속성과 모든 태그에서 작동하는 전역 속성을 살펴봐요.
폼: 기초, 고급 컨트롤 및 유효성 검사
기본 입력 요소부터 시작해 더 다양한 컨트롤을 살펴보고, 전송 전에 브라우저가 필드를 확인하도록 하는 유효성 검사 속성까지 배워요.
시맨틱 HTML5, head 및 메타데이터, 오디오와 비디오
시맨틱 요소, 문서의 head와 메타데이터, 오디오 및 비디오 요소를 다뤄요.
접근성, ARIA 역할 및 고급 ARIA 패턴
접근성 기초, ARIA 역할과 속성, 맞춤형 위젯에 사용되는 고급 패턴을 배워요.
데이터 속성, 템플릿, Canvas, SVG 및 iframe
사용자 지정 데이터 속성, HTML 템플릿, canvas 요소, HTML 안의 SVG, iframe에 삽입하는 콘텐츠를 다뤄요.
Web Storage, Drag and Drop, SEO 및 이메일 템플릿
Web Storage와 Drag and Drop API, SEO와 소셜 메타 태그, HTML 이메일 템플릿의 특수한 규칙을 배워요.
Web Components, 성능 및 대규모 HTML
사용자 지정 요소, shadow DOM, import maps와 점진적 향상, 성능, 보안, PWA 및 테스트를 다룬 뒤 대규모 HTML로 마무리해요.
어떻게 작동하나요
읽기에서 렌더링까지, 태그를 배우는 과정
레슨은 짧고 편집기가 바로 옆에 있어 개념을 읽고 직접 시도하는 일을 한 번의 학습 시간에 모두 할 수 있어요.
짧은 레슨 하나 읽기
중단한 지점에서 학습 경로를 이어 가세요. 각 레슨은 순서 없는 목록이나 alt 텍스트가 있는 이미지처럼 하나의 아이디어만 다루며, 몇 분이면 끝나요.
편집기에 입력하고 미리보기 확인하기
편집기를 열고 마크업을 작성하세요. 미리보기가 페이지를 다시 그려 주며, 페이지의 스타일을 지정하거나 반응하도록 만들고 싶을 때 CSS와 JavaScript 탭을 사용할 수 있어요.
확인하고, 수정하고, 직접 만들기
각 주제는 퀴즈와 코딩 챌린지로 마무리돼요. 태그나 오류가 이해되지 않을 때는 AI 멘토가 설명해 주고, 디버깅 미션에서는 고쳐야 할 문제가 있는 페이지를 제공하며, 가이드 프로젝트에서는 다른 사람에게 보여 줄 수 있는 결과물을 만들어요.
무엇이 들어 있나요
Learn HTML에 포함된 내용
40
A1부터 C1까지의 course
159개의 레슨이 문서 구조, 텍스트, 링크, 이미지, 목록부터 표, 폼, 시맨틱 HTML5, 접근성, 웹 컴포넌트, 보안, History and Navigation API까지 이어져요.
실시간
미리보기가 포함된 HTML 편집기
마크업을 작성하고 렌더링된 페이지가 업데이트되는 모습을 확인하세요. 같은 프로젝트에 CSS와 JavaScript 파일을 추가할 수 있어 단순한 문서가 작동하는 작은 웹사이트로 바뀌어요.
20
가이드 프로젝트
레시피 상자 페이지, 연락처 폼, 사진 갤러리, 내비게이션 바, 접근성을 고려한 가격표 등을 단계별로 만들어 볼 수 있어요.
20
디버깅 미션
직접 찾아 해결해야 하는 실제 문제를 다뤄요. 아무것도 전송하지 않는 가입 폼, 아무도 탭할 수 없는 레이블, 휴대폰에서 축소된 상태로 로드되는 페이지 등이 있어요.
80
태그 치트 시트
무엇을 원하는지는 알지만 그 이름이 무엇인지 모를 때 찾아볼 수 있는 HTML 태그, 요소, 속성 80개의 목록이에요.
50
면접 질문
명확한 답변이 포함된 웹 개발자 면접 질문 50개와 함께, 열어서 수정할 수 있는 짧은 예제 코드 라이브러리, 직접 작성한 코드와 메모를 저장할 수 있는 공간을 제공해요.
배경
HTML이란 무엇이며, 휴대폰으로 입력하면서 배울 수 있을까요?
HTML(HyperText Markup Language)은 웹 페이지의 구조를 설명하는 언어예요. 어떤 텍스트가 제목인지, 어떤 부분이 문단인지, 링크가 어디로 연결되는지, 폼에서 무엇을 묻는지를 지정해요. 프로그래밍 언어는 아니므로 맞서 싸워야 하는 반복문이나 변수가 없고, 그래서 웹 개발에 입문할 때 보통 첫 단계로 선택해요. 작성하는 순간 결과가 보이기 때문에 HTML은 짧게 휴대폰으로 학습하기에도 잘 맞아요. 태그는 엄지손가락으로 입력할 만큼 작고, 미리보기를 통해 제대로 작동했는지 바로 확인할 수 있어요.
요소, 태그 및 속성모든 레슨에서 사용하는 세 가지 단어
요소는 의미를 담은 콘텐츠 조각으로, 여는 태그와 닫는 태그 사이에 작성해요. 예를 들면 문단이나 목록 항목이 있어요. 속성은 여는 태그 안에 넣어 요소를 조정해요. 링크가 연결되는 주소나 이미지를 설명하는 텍스트 등이 이에 해당해요. 초보자가 하는 실수 대부분은 닫는 태그를 빠뜨리거나 속성을 잘못 배치해서 생겨요.
시맨틱 HTML제목, 내비게이션, main 및 footer
시맨틱 요소는 페이지의 블록이 어떻게 보이는지가 아니라 무엇인지 알려 줘요. 내비게이션 바, article, footer에는 각각 고유한 요소가 있어 스크린 리더, 검색 엔진, 그리고 나중에 페이지를 편집해야 하는 사람에게 도움이 돼요. 깔끔한 페이지와 일반 컨테이너만 잔뜩 쌓인 페이지를 가르는 습관이 바로 이것이에요.
HTML, CSS 및 JavaScript각각의 역할
HTML은 구조와 콘텐츠를 담고, CSS는 콘텐츠가 어떻게 보일지 제어하며, JavaScript는 클릭에 반응하는 동작 같은 기능을 추가해요. HTML을 먼저 배우면 나머지 두 가지가 연결될 기반이 생겨요. 앱의 편집기에는 HTML, CSS, JavaScript 탭이 따로 있어 처음부터 세 가지 역할을 분리해서 작업할 수 있어요.
폼과 접근성간단한 페이지가 진지해지는 지점
폼은 페이지가 방문자에게 무언가를 요청하는 방식이며, 접근성 문제가 시작되는 곳이기도 해요. 아무도 탭할 수 없는 레이블이나 스크린 리더가 이름을 인식하지 못하는 필드가 대표적이에요. 레이블, 유효성 검사 속성, ARIA 역할은 페이지가 모든 사람에게 제대로 작동할지를 결정하는 작은 마크업 조각이에요.
나에게 잘 맞는지
누구에게 적합하고, 누구에게는 적합하지 않은지
다음과 같은 분께 잘 맞아요
- 첫 웹 페이지를 작성하면서 사용하기 전에 모든 태그의 설명을 듣고 싶어요
- 각 줄의 결과를 바로 확인할 수 있을 때 가장 잘 배워요
- 블로그, 상점 페이지 또는 포트폴리오를 운영하면서 그 뒤의 마크업을 편집하고 싶어요
- CSS, JavaScript 또는 프런트엔드 작업으로 나아갈 계획이라 먼저 탄탄한 기초를 다지고 싶어요
- 웹 개발자 면접을 준비하면서 연습할 질문이 필요해요
다음과 같은 경우에는 적합하지 않아요
- 파일, 폴더 및 로컬 서버를 포함한 완전한 데스크톱 작업 환경이 필요해요
- 모든 코스가 무료이기를 기대해요. 첫 번째 코스, 첫 번째 가이드 프로젝트와 두 개의 미션은 무료이며, 나머지는 Pro에서 잠금 해제돼요
- 이미 매일 프로덕션 HTML을 작성하고 있어 코스보다 참고 자료가 필요해요
- 디자인 도구를 배우고 싶어요. 이 앱은 마크업과 페이지를 구성하는 코드에 관한 내용이에요
질문
자주 묻는 질문
HTML 배우기 - 코딩 강좌란 무엇인가요?
HTML 배우기 - 코딩 강좌는 첫 번째 태그부터 고급 주제까지 HTML을 가르치는 iPhone 및 Android용 앱이에요. 내장 HTML 편집기와 실시간 미리보기를 40개의 짧은 코스, 20개의 가이드 프로젝트, 20개의 디버깅 미션 및 AI 멘토와 결합했어요. 무료로 시작할 수 있으며 22개 언어로 제공돼요.
정말 휴대폰에서 HTML을 작성하고 미리 볼 수 있나요?
네. HTML 배우기 - 코딩 강좌의 편집기에는 HTML, CSS 및 JavaScript 탭이 있고, 미리보기에서는 마크업으로 생성한 페이지를 보여 줘요. 태그는 짧기 때문에 휴대폰에서도 HTML에 필요한 집중적인 연습을 편하게 할 수 있어요. 한 번에 많은 파일을 다뤄야 할 때만 더 큰 화면이 유용해져요.
시작하기 전에 코딩 경험이 필요한가요?
아니요. 학습 경로는 HTML 문서가 어떻게 구성되는지부터 시작하며, 각 용어를 사용하기 전에 쉬운 말로 설명해요. HTML에는 먼저 배워야 할 반복문이나 변수가 없기 때문에 HTML 배우기 - 코딩 강좌에서는 완전 초보자를 예외가 아닌 일반적인 학습자로 다뤄요.
HTML과 CSS의 차이는 무엇인가요?
HTML은 제목, 링크 또는 폼 필드처럼 페이지에 무엇이 있고 각 부분이 무엇을 의미하는지 정의해요. CSS는 색상, 간격 및 레이아웃을 비롯해 표시 방식을 정의해요. 이 앱은 HTML을 먼저 가르치고 편집기에서 CSS 파일을 추가할 수 있게 하므로, 두 기술의 역할을 섞지 않고 함께 작동하는 모습을 확인할 수 있어요.
HTML 기초를 배우는 데 얼마나 걸리나요?
대부분의 사람은 짧은 세션을 몇 번만 거치면 간단하고 올바른 페이지를 작성할 수 있어요. 핵심 요소가 제목, 단락, 링크, 이미지, 목록 및 기본 폼으로 많지 않기 때문이에요. 접근성, 시맨틱 구조 및 Web Components 같은 심화 내용은 더 오래 걸려요. 여기의 레슨은 몇 분 안에 끝낼 수 있도록 작성되어 매일 학습하는 습관을 현실적으로 만들 수 있어요.
앱에서 어떤 종류의 프로젝트를 만들 수 있나요?
20개의 가이드 프로젝트에는 레시피 상자 페이지, 연락처 폼, 사진 갤러리, 탐색 바 및 접근성을 고려한 가격표가 포함돼요. 각 프로젝트는 한 단계씩 완성해요. 프로젝트를 작게 구성한 데는 이유가 있어요. 끝까지 완성하고 저장된 스니펫에 코드를 보관할 수 있기 때문이에요.
Learn HTML에서 접근성과 폼도 다루나요?
네, 상당히 깊이 있게 다뤄요. 폼에는 기초, 고급 컨트롤 및 유효성 검사 속성을 다루는 세 개의 코스가 있어요. 접근성에는 기초, ARIA 역할 및 고급 ARIA 패턴을 다루는 별도의 코스가 있어요. 디버깅 미션에는 아무도 탭할 수 없는 레이블 같은 오류도 포함되어 있어, 이러한 주제를 추상적인 개념이 아닌 실용적인 내용으로 배울 수 있어요.
앱은 무료인가요? Pro에서는 무엇을 추가로 제공하나요?
무료로 다운로드해 바로 시작할 수 있어요. 첫 번째 코스, 첫 번째 가이드 프로젝트, 두 개의 미션과 실시간 편집기가 포함되며, 매일 사용할 수 있는 AI 멘토 제공량도 함께 제공돼요. Pro에서는 모든 코스, 프로젝트와 미션 전체, 인증서 시험 및 무제한 AI 멘토 질문이 잠금 해제되고 광고가 제거돼요.
시작하기
첫 번째 태그를 입력하고 렌더링되는 모습을 확인해 보세요
iOS와 Android에서 22개 언어로 무료로 시작할 수 있어요.
CoddyKit의 다른 앱
iOS 및 Android에서 이용할 수 있어요.