HTML 예제
HTML 기본 태그 예제
- 간단한 HTML 파일
- 이 예제는 최소한의 HTML 태그를 사용한 매우 간단한 HTML 파일입니다. 이는 body 요소 내의 내용이 브라우저에서 어떻게 표시되는지 보여줍니다.
- 간단한 구절
- 이 예제는 구절 요소 내의 텍스트가 브라우저에서 어떻게 표시되는지 보여줍니다.
- 더 많은 구절
- 이 예제는 구절 요소의 일부 기본 동작을 보여줍니다.
- 시诗歌 문제
- 이 예제는 HTML 포맷의 일부 문제를 보여줍니다.
- 줄바꿈
- 이 예제는 HTML 문서에서 줄바꿈의 사용을 보여줍니다.
- 제목
- HTML 문서에서 제목을 표시하는 태그를 보여줍니다.
- 정렬된 제목
- 정렬된 제목을 보여줍니다.
- 수평선
- 수평선을 삽입하는 방법을 보여줍니다.
- 숨겨진 주석
- HTML 소스 코드에 숨겨진 주석을 삽입하는 방법을 보여줍니다.
- 배경색
- HTML 페이지에 배경색을 추가하는 방법을 보여줍니다.
HTML 텍스트 포맷 예제
- 텍스트 포맷
- HTML 파일에서 텍스트를 포맷하는 방법을 보여줍니다.
- 예제 텍스트
- pre 태그를 사용하여 빈 행과 공간을 제어하는 방법을 보여줍니다.
- "컴퓨터 출력" 태그
- 다른 "컴퓨터 출력" 태그의 표시 효과를 보여줍니다.
- 주소
- HTML 파일에서 주소를 쓰는 방법을 보여줍니다.
- 약자와 약자
- 약자나 약자를 구현하는 방법을 보여줍니다.
- 텍스트 방향
- 텍스트 방향을 변경하는 방법을 보여줍니다.
- 블록 인용
- 길이가 다른 인용문을 구현하는 방법을 보여줍니다.
- 지우기 효과와 삽입 효과
- 이 예제는 텍스트를 지우거나 삽입하는 방법을 보여줍니다.
HTML 링크 예제
- 슈퍼링크 생성
- HTML 문서에서 링크를 생성하는 방법을 보여줍니다.
- 이미지를 링크로 사용
- 이 예제는 이미지를 링크로 사용하는 방법을 보여줍니다.
- 새 브라우저 창에서 링크 열기
- 이 예제는 새 창에서 페이지를 엽니다. 이렇게 하면 방문자가 웹사이트를 떠나지 않아도 됩니다.
- 같은 페이지의 다른 위치로 링크
- 이 예제는 링크를 사용하여 문서의 다른 부분으로 이동하는 방법을 보여줍니다.
- 프레임 탈출
- 이 예제는 페이지가 프레임 내에 고정되어 있을 때 프레임에서 탈출하는 방법을 보여줍니다.
- 이메일 링크 생성
- 이 예제는 이메일로 링크하는 방법을 보여줍니다. (이 예제는 이메일 클라이언트 프로그램이 설치되면 작동합니다.)
- 이메일 링크 생성 2
- 더 복잡한 이메일 링크를 보여줍니다.
HTML 프레임 예제
- 수직 프레임
- 이 예제는 세 개의 다른 문서를 사용하여 수직 프레임을 만드는 방법을 보여줍니다.
- 수평 프레임
- 이 예제는 세 개의 다른 문서를 사용하여 수평 프레임을 만드는 방법을 보여줍니다.
- <noframes> 태그 사용 방법
- 이 예제는 <noframes> 태그를 사용하는 방법을 보여줍니다.
- 혼합 프레임 구조
- 이 예제는 세 개의 문서를 포함한 프레임 구조를 만드는 방법을 보여줍니다. 동시에 그들을 행과 열에 혼합하여 배치합니다.
- noresize="noresize" 속성을 가진 프레임 구조
- 이 예제는 noresize 속성을 보여줍니다. 이 예제에서 프레임은 크기를 조정할 수 없습니다. 프레임 사이의 경계선에 마우스를 드래그하면 경계선이 이동할 수 없음을 발견할 것입니다.
- 네비게이션 프레임워크
- 이 예제는 네비게이션 프레임워크를 만드는 방법을 보여줍니다. 네비게이션 프레임워크는 두 번째 프레임을 대상으로 하는 링크 목록을 포함합니다. "contents.htm" 파일은 세 개의 링크를 포함합니다.
- 인라인 프레임
- 인라인 프레임(HTML 페이지 내의 프레임)을 생성하는 방법을 보여줍니다.
- 프레임 내의 지정된 구절으로 이동
- 이 예제에서는 두 개의 프레임을 보여줍니다. 중 하나의 프레임은 다른 파일 내에 지정된 구절을 가리키는 링크를 설정합니다. "link.htm" 파일에 지정된 구절은 <a name="C10">를 사용하여 표시됩니다.
- 프레임 내의 지정된 구절로 이동하는 프레임 탐색
- 이 예제에서는 두 개의 프레임을 보여줍니다. 왼쪽의 탐색 프레임에는 링크 목록이 포함되어 있으며, 이 링크는 두 번째 프레임을 대상으로 합니다. 두 번째 프레임은 링크된 문서를 표시합니다. 탐색 프레임의 링크는 목표 파일에 지정된 구절을 가리킵니다.
HTML 테이블 예제
- 테이블
- 이 예제에서는 HTML 문서에서 테이블을 생성하는 방법을 보여줍니다.
- 테이블 경계선
- 다양한 유형의 테이블 경계선을 보여줍니다.
- 경계선이 없는 테이블
- 경계선이 없는 테이블을 보여줍니다.
- 테이블의 헤더(Heading)
- 테이블 헤더를 표시하는 방법을 보여줍니다.
- 공백 셀
- 이 예제에서는 내용이 없는 셀을 처리하는 방법을 보여줍니다.
- 제목이 있는 테이블
- 제목(caption)이 있는 테이블을 보여줍니다.
- 행이나 열을 건너는 테이블 셀
- 이 예제에서는 행이나 열을 건너는 테이블 셀을 정의하는 방법을 보여줍니다.
- 테이블 내 태그
- 다양한 요소 내에서 요소를 표시하는 방법을 보여줍니다.
- 셀 패딩(Cell padding)
- 셀 패딩(Cell padding)을 사용하여 셀 내용과 경계선 간의 공간을 만드는 방법을 보여줍니다.
- 셀 간격(Cell spacing)
- 셀 간격(Cell spacing)을 사용하여 셀 간의 거리를 늘리는 방법을 보여줍니다.
- 테이블에 배경색 또는 배경 이미지를 추가
- 테이블에 배경을 추가
- 테이블 셀에 배경색 또는 배경 이미지를 추가
- 테이블 셀에 배경을 추가하는 방법을 보여줍니다.
- 테이블 셀 내용 정렬
- 이 예제에서는 "align" 속성을 사용하여 셀 내용을 정렬하여 아름다운 테이블을 만드는 방법을 보여줍니다.
- 프레임(frame) 속성
- 이 예제에서는 "frame" 속성을 사용하여 테이블 주위의 경계선을 제어하는 방법을 보여줍니다.
HTML 목록 예제
- 무순서 목록
- 이 예제에서는 무순서 목록을 보여줍니다.
- 순서 목록
- 이 예제에서는 순서 목록을 보여줍니다.
- 다양한 유형의 무순서 목록
- 이 예제에서는 무序列表을 보여줍니다.
- 다양한 유형의 순서 목록
- 이 예제에서는 다양한 유형의 순서 목록을 보여줍니다.
- 내장 목록
- 이 예제에서는 내장 목록을 어떻게 사용하는지 보여줍니다.
- 내장 목록 2
- 이 예제에서는 더 복잡한 내장 목록을 보여줍니다.
- 정의 목록
- 이 예제에서는 정의 목록을 보여줍니다.
HTML 표单 및 입력 예제
- 텍스트 필드(Text fields)
- 텍스트 필드(Text fields)
- 이 예제에서는 HTML 페이지에서 텍스트 필드를 만드는 방법을 보여줍니다. 사용자는 텍스트 필드에 텍스트를 입력할 수 있습니다.
- 패스워드 필드
- 이 예제에서는 HTML에서 패스워드 필드를 만드는 방법을 보여줍니다.
- 표지
- 이 예제에서는 HTML 페이지에서 단일 선택 표지를 만드는 방법을 보여줍니다. 사용자는 표지를 선택하거나 선택을 취소할 수 있습니다.
- 단일 선택 표지
- 이 예제에서는 HTML에서 간단한 단일 선택 표지를 만드는 방법을 보여줍니다.
- 간단한 드롭 다운 목록
- 이 예제에서는 HTML 페이지에서 간단한 드롭 다운 목록을 만드는 방법을 보여줍니다. 드롭 다운 목록은 선택 가능한 목록입니다.
- 또 다른 드롭 다운 목록
- 텍스트 필드(Textarea)
- 이 예제에서는 텍스트 필드(다중 행 텍스트 입력 컨트롤)를 만드는 방법을 보여줍니다. 사용자는 텍스트 필드에 텍스트를 입력할 수 있습니다. 텍스트 필드에서 입력할 수 있는 문자 수는 제한이 없습니다.
- 버튼 생성
- 이 예제에서는 버튼을 만드는 방법을 보여줍니다. 버튼에 있는 텍스트를 직접 설정할 수 있습니다.
- 데이터 주위 필드셋
- 이 예제에서는 데이터 주위에 제목이 있는 테이블을 그리는 방법을 보여줍니다.
양식 예제
- 입력 필드와 확인 버튼이 있는 양식
- 이 예제에서는 페이지에 양식을 추가하는 방법을 보여줍니다. 이 양식에는 두 개의 입력 필드와 확인 버튼이 포함되어 있습니다.
- 훈련 선택 표지가 있는 양식
- 이 양식에는 두 개의 훈련 선택 표지와 확인 버튼이 포함되어 있습니다.
- 단일 선택 표지가 있는 양식
- 이 양식에는 두 개의 단일 선택 표지와 확인 버튼이 포함되어 있습니다.
- 양식을 통해 이메일 보내기
- 이 예제에서는 양식을 통해 이메일을 보내는 방법을 보여줍니다.
HTML 이미지 예제
- 이미지 삽입
- 이 예제에서는 웹 페이지에 이미지를 표시하는 방법을 보여줍니다.
- 다른 위치에서 이미지 삽입
- 이 예제에서는 다른 폴더나 서버의 이미지를 웹 페이지에 표시하는 방법을 보여줍니다.
- 배경 이미지
- 이 예제에서는 HTML 페이지에 배경 이미지를 추가하는 방법을 보여줍니다.
- 이미지 배치
- 이 예제에서는 텍스트 안에 이미지를 배치하는 방법을 보여줍니다.
- 浮动 이미지
- 이 예제에서는 이미지를 문단의 왼쪽이나 오른쪽으로 뜬 이미지로 만드는 방법을 보여줍니다.
- 이미지 크기 조정
- 이 예제에서는 이미지를 다른 크기로 조정하는 방법을 보여줍니다.
- 이미지에 대체 텍스트 표시
- 이 예제에서는 이미지가 브라우저에 로드되지 않을 때, 대체 텍스트를 사용하여 독자에게 잃어버린 정보를 알려줍니다. 모든 페이지에 이미지 대체 텍스트 속성을 추가하는 것은 좋은 습관입니다.
- 이미지 링크 만들기
- 이 예제에서는 이미지를 링크로 사용하는 방법을 보여줍니다.
- 이미지 맵 생성
- 이 예제에서는 클릭 가능한 영역을 가진 이미지 맵을 만드는 방법을 보여줍니다. 각 영역은 슈퍼 링크입니다.
- 이미지를 이미지 맵으로 변환
- 이 예제에서는 일반 이미지를 이미지 맵으로 설정하는 방법을 보여줍니다.
HTML 배경 예제
- 좋게 맞춘 배경과 색상
- 배경색과 글자색이 잘 맞는 예제로, 페이지에 있는 글자가 읽기 쉬워집니다.
- 불량적인 배경과 색상의 조합
- 배경 색상과 글자 색상이 잘 어울리지 않아 페이지에서의 텍스트를 읽기 어려운 예제.
- 사용성이 높은 배경 이미지
- 배경 이미지와 글자 색상이 페이지 텍스트를 읽기 쉬운 예제.
- 사용성이 높은 배경 이미지 2
- 배경 이미지와 글자 색상이 페이지 텍스트를 읽기 쉬운 예제.
- 사용성이 떨어지는 배경 이미지
- 배경 이미지와 글자 색상이 페이지 텍스트를 읽기 어려운 예제.
HTML 스타일 (style) 예제
- HTML에서의 스타일
- head 부분에 추가된 스타일 정보를 사용하여 HTML을 포맷하는 방법을 보여줍니다.
- 하이픈 없는 링크
- 스타일 속성을 사용하여 하이픈을 없애는 링크를 만드는 방법을 보여줍니다.
- 외부 스타일 시트에 링크
- link 태그를 사용하여 외부 스타일 시트에 링크하는 방법을 보여줍니다.
HTML 헤더 (head) 예제
- 문서의 제목
- 헤더 요소 내의 제목 정보는 브라우저 창에서 표시되지 않습니다.
- 하나의 target, 모든 링크
- base 태그를 사용하여 페이지에서 모든 태그가 새 창에서 열리는 방법을 보여줍니다.
HTML 메타 정보 (meta) 예제
HTML 스크립트 (Script) 예제
- 스크립트 삽입
- HTML 문서에 스크립트를 삽입하는 방법을 보여줍니다.
- 스크립트를 지원하지 않는 브라우저에서 실행
- 이 예제는 스크립트를 지원하지 않는 브라우저에 대처하는 방법을 보여줍니다.
