HTML 예제
HTML 기본 태그 예제
- 간단한 HTML 파일
- 이 예제는 매우 간단한 HTML 파일로, 가능한 한 적은 HTML 태그를 사용합니다. 이는 body 요소 내의 내용이 브라우저에서 어떻게 표시되는지 보여줍니다.
- 간단한 섹션
- 이 예제는: 섹션 요소 내의 텍스트가 브라우저에서 어떻게 표시되는지 보여줍니다.
- 더 많은 섹션
- 이 예제는 섹션 요소의 일부 기본 행동을 보여줍니다.
- 시 poem 문제
- 이 예제는 HTML 포맷화의 일부 문제를 보여줍니다.
- 줄 바꿈
- 이 예제는 HTML 문서에서 줄 바꿈의 사용을 보여줍니다.
- 제목
- HTML 문서에서 제목을 표시하는 태그를 보여줍니다.
- 중앙 정렬된 제목
- 중앙 정렬된 제목을 보여줍니다.
- 수평선
- 수평선을 삽입하는 방법을 보여줍니다.
- 숨겨진 주석
- HTML 원본 코드에 숨겨진 주석을 삽입하는 방법을 보여줍니다.
- 배경색
- HTML 페이지에 배경색을 추가하는 방법을 보여줍니다.
예제 설명
HTML 텍스트 포맷 예제
- 텍스트 포맷
- HTML 파일에서 텍스트를 포맷하는 방법을 보여줍니다.
- 프리미엄 텍스트
- pre 태그를 사용하여 빈 행과 공백을 제어하는 방법을 보여줍니다.
- "컴퓨터 출력" 태그
- 다른 "컴퓨터 출력" 태그의 표시 효과를 보여줍니다.
- 주소
- HTML 파일에서 주소를 쓰는 방법을 보여줍니다.
- 약자와 첫 글자 약자
- 약자와 첫 글자 약자를 구현하는 방법을 보여줍니다.
- 글자 방향
- 글자 방향을 변경하는 방법을 보여줍니다.
- 블록 인용
- 길이가 다른 인용 문구를 구현하는 방법을 보여줍니다.
- 지우기 효과와 삽입 효과
- 이 예제는 지우기 효과와 삽입 효과를 표시하는 방법을 보여줍니다.
예제 설명
HTML 프레임 예제
- 수직 프레임
- 이 예제는 세 개의 다른 문서를 사용하여 수직 프레임을 만드는 방법을 보여줍니다.
- 수평 프레임
- 이 예제는 세 개의 다른 문서를 사용하여 수평 프레임을 만드는 방법을 보여줍니다.
- <noframes> 태그 사용 방법
- 이 예제는 <noframes> 태그를 사용하는 방법을 보여줍니다.
- 혼합 프레임 구조
- 이 예제는 세 개의 문서를 포함한 프레임 구조를 만드는 방법을 보여줍니다. 동시에 그들을 행과 열에 혼합하여 배치합니다.
- noresize="noresize" 속성을 가진 프레임 구조
- 이 예제는 noresize 속성을 보여줍니다. 이 예제에서 프레임은 크기를 조정할 수 없습니다. 프레임 사이의 경계선에 마우스를 드래그하면 경계선이 이동할 수 없음을 발견할 것입니다.
- 탐색 프레임워크
- 이 예제는 탐색 프레임워크를 만드는 방법을 보여줍니다. 탐색 프레임워크는 두 번째 프레임을 대상으로 하는 링크 목록을 포함합니다. "contents.htm" 파일은 세 개의 링크를 포함합니다.
- 인라인 프레임
- 인라인 프레임(HTML 페이지 내의 프레임)을 생성하는 방법을 표시합니다.
- 프레임 내의 지정된 섹션으로 이동
- 이 예제에서는 두 개의 프레임을 표시합니다. 하나의 프레임은 다른 파일 내의 지정된 섹션으로 링크를 설정합니다. "link.htm" 파일 내의 지정된 섹션은 <a name="C10">로 식별됩니다.
- 프레임 내의 지정된 섹션으로 탐색하여 이동
-
이 예제에서는 두 개의 프레임을 표시합니다. 왼쪽의 탐색 프레임에는 링크 목록이 있으며, 이 링크는 두 번째 프레임을 대상으로 합니다. 두 번째 프레임은 링크된 문서를 표시합니다. 탐색 프레임의 링크는 목표 파일에서 지정된 섹션으로 이동합니다.
예제 설명
HTML 표单 및 입력 예제
- 텍스트 필드(Text fields)
- HTML 페이지에서 텍스트 필드를 생성하는 방법을 보여줍니다. 사용자는 텍스트 필드에 텍스트를 입력할 수 있습니다.
- 비밀번호 필드
- HTML의 비밀번호 필드를 생성하는 방법을 보여줍니다.
- 단일 선택 버튼
- HTML 페이지에서 단일 선택 버튼을 생성하는 방법을 보여줍니다. 사용자는 단일 선택 버튼을 선택하거나 선택에서 해제할 수 있습니다.
- 단일 선택 버튼
- HTML에서 단일 선택 버튼을 생성하는 방법을 보여줍니다.
- 기본적인下拉列表
- HTML 페이지에서 기본적인下拉列表 필드를 생성하는 방법을 보여줍니다.下拉列表 필드는 선택 사항 목록입니다.
- 다른下拉列表
- 기본적으로 선택된 값을 가진 다른下拉列表를 보여줍니다. (번역자 주의: 기본적으로 선택된 값을 가진 것은 사전에 지정된 기본 선택 사항을 의미합니다.)
- 텍스트 필드(Textarea)
- 텍스트 필드(다중 행 텍스트 입력 컨트롤)를 생성하는 방법을 보여줍니다. 사용자는 텍스트 필드에 텍스트를 입력할 수 있습니다. 텍스트 필드에서 입력할 수 있는 문자 수는 제한이 없습니다.
- 버튼 생성
- 버튼을 생성하는 방법을 보여줍니다. 버튼에 텍스트를 사용자 정의할 수 있습니다.
- 데이터 주위 필드셋
- 데이터 주위에 제목이 있는 창을 그리는 방법을 보여줍니다.
양식 예제
- 입력 필드와 확인 버튼이 있는 양식
- 이 예제에서는 페이지에 양식을 추가하는 방법을 보여줍니다. 이 양식에는 두 개의 입력 필드와 확인 버튼이 포함되어 있습니다.
- 체크 박스가 있는 양식
- 이 양식에는 두 개의 체크 박스와 확인 버튼이 포함되어 있습니다.
- 원형 버튼이 있는 양식
- 이 양식에는 두 개의 원형 버튼과 확인 버튼이 포함되어 있습니다.
- 양식을 통해 이메일 보내기
- 이 예제에서는 양식을 통해 이메일을 보내는 방법을 보여줍니다.
예제 설명
HTML 이미지 예제
- 이미지 삽입
- 이 예제에서는 웹 페이지에 이미지를 표시하는 방법을 보여줍니다.
- 다른 위치에서 이미지 삽입
- 이 예제에서는 다른 폴더나 서버의 이미지를 웹 페이지에 표시하는 방법을 보여줍니다.
- 배경 이미지
- 이 예제에서는 HTML 페이지에 배경 이미지를 추가하는 방법을 보여줍니다.
- 이미지 배치
- 이 예제에서는 텍스트에서 이미지를 배치하는 방법을 보여줍니다.
- 浮动 이미지
- 이 예제에서는 이미지를 문단의 왼쪽이나 오른쪽으로浮动시키는 방법을 보여줍니다.
- 이미지 크기 조정
- 이 예제에서는 이미지를 다른 크기로 조정하는 방법을 보여줍니다.
- 이미지에 대체 텍스트 표시
- 이 예제에서는 이미지가 로드되지 않을 때 이미지를 대체하는 텍스트를 보여주는 방법을 보여줍니다. 브라우저가 이미지를 로드하지 못할 때, 대체 텍스트 속성은 독자에게 손실된 정보를 알립니다. 페이지에 이미지 대체 텍스트 속성을 추가하는 것은 좋은 습관입니다.
- 이미지 링크 제작
- 이 예제에서는 이미지를 링크로 사용하는 방법을 보여줍니다.
- 이미지 맵 생성
- 이 예제에서는 클릭 가능한 영역을 가진 이미지 맵을 만드는 방법을 보여줍니다. 각 영역은 슈퍼 링크입니다.
- 이미지를 이미지 맵으로 변환
- 이 예제에서는 일반 이미지를 이미지 맵으로 설정하는 방법을 보여줍니다.
예제 설명
HTML 스타일 (style) 예제
- HTML에서의 스타일
- 이 예제는 <head> 부분에 추가된 스타일 정보를 사용하여 HTML을 포맷하는 방법을 보여줍니다.
- 아래줄이 없는 링크
- 스타일 속성을 사용하여 아래줄이 없는 링크를 만드는 방법을 보여줍니다.
- 외부 스타일 시트에 링크
- 이 예제는 <link> 태그를 사용하여 외부 스타일 시트에 링크하는 방법을 보여줍니다.
예제 설명
HTML 메타 정보 (meta) 예제
- 문서 설명
- Meta 요소에 포함된 정보는 HTML 문서를 설명할 수 있습니다.
- 문서 키워드
- Meta 요소에 포함된 정보는 문서의 키워드를 설명할 수 있습니다.
- 리디렉션
- 이 예제는 주소가 변경된 경우 사용자를 다른 주소로 리디렉션하는 방법을 보여줍니다.
예제 설명
