기본 사용법
<h1> 같은 제목 태그는 문서의 구조를 보여주고, <p>는 문단, <a>는 링크, <img>는 이미지를 표시한다.
대부분의 태그는 여는 태그와 닫는 태그로 이루어지며, 속성은 태그 안에 작성한다.
기본 태그를 직접 바꾸며 익히는 학습형 홈페이지
기존의 단순 설명식 태그 페이지를 참고해, 한 곳에서 설명·예제·실습·미리보기를 이어서 확인할 수 있도록 구성했다. 처음 배우는 사람도 구조를 따라가며 HTML 태그의 쓰임을 바로 체감할 수 있게 설계했다.
권장 사용 순서: 제목 태그 → 문단 태그 → 링크/이미지 → 목록 → 표 → 폼 → 레이아웃 태그
- 코드 예제는 즉시 수정 가능하게 준비했다.
- 미리보기는 iframe으로 출력되어 실제 웹페이지처럼 확인할 수 있다.
- 반응형으로 제작해 모바일에서도 학습 가능하다.
학습 포인트
1. 태그의 시작과 종료 구조를 익힌다.
2. 속성값이 결과에 어떤 차이를 만드는지 본다.
3. 여러 태그를 묶어 하나의 화면을 만드는 법을 연습한다.
4. 실제 홈페이지의 최소 골격을 직접 구성해 본다.
코드 편집기 / 미리보기
HTML 코드
실행 결과준비됨
초보자 주의사항
- 닫는 태그를 빼먹지 않는다.
- 따옴표는 속성값마다 정확히 닫는다.
- 표 태그는 table → tr → th/td 순서를 지킨다.
- 폼 태그는 입력창과 버튼을 함께 구성한다.
제목·문단
<h1>안녕하세요</h1> <p>첫 문단입니다.</p>
링크·이미지
<a href="#">링크</a> <img src="image.jpg" alt="설명">
목록·표
<ul> <li>항목 1</li> </ul> <table>...</table>