본문 바로가기
컴퓨터/HTML

HTML

sayyesdoit 2021. 11. 3. 13:45
기본편

[HTML이란?]

  HTML(HyperText Markup Language)은 웹페이지를 만들기 위한 언어로 웹브라우저 위에서 동작하는 언어다.

[태그란?]

  「<a>」 같이 생긴 것을 태그라고 한다. 즉 「<」와 「>」로 묶인 일련의 명령어이다.

[태그 종류]

- 시작태그 : <a>
- 종료태그 : </a>
- 빈태그 : <br />, <hr />, <img />, <input /> 등

[태그의 구성]

  시작태그는 "속성(attribute)"과 "값(value)"을 가질 수 있다.

  <a href="www.google.com">

  위에서 <a>시작태그는 속성과 값을 가지고 있는데 "href"는 속성이고 "www.google.com"이 값이다.

 

[엘리먼트란?]

  <a href="www.google.com">구글</a>

  위와 같이 내용을 포함해 시작태그와 종료태그까지를 엘리먼트라고 한다.

※ 빈 태그도 엘리먼트라고 할 수 있다.

[확장자]

  html 파일의 확장자는 「html」이다.

app/public$ vi index.html

[HTML 문서의 선언]

  HTML 문서는 아래와 같이 선언한다.

<!DOCTYPE html>

[HTML 문서의 구조]

  HTML 문서는 크게 「head」 부분과 「body」 부분으로 구성된다.

<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>

  head 엘리먼트 안에 들어갈 엘리먼트가 따로 있고, body 엘리먼트 안에 들어갈 엘리먼트가 따로 있다.

[주석]

  HTML에서 주석처리할 부분은 「<!--」와 「-->」 사이에 넣는다.

<!-- 이 부분이 주석처리 된다 -->

[head 부분]

* 문자 인코딩 형식 지정

<meta charset="UTF-8">

* 문서 제목 설정

<title>제목</title>

* 파비콘, 바로가기 아이콘 설정

<link rel="shortcut icon" href="이미지경로" />

  아이콘은 ico 파일로 설정한다. 이 파일에 따라 파비콘과 안드로이드 기기의 바로가기 아이콘이 설정된다. 애플 기기의 바로가기 아이콘은 아래와 같이 설정한다.

<link rel="apple-touch-icon" href="이미지경로" />

  설정을 생략할 때는 아래와 같이 설정한다.

<link rel="shortcut icon" href='#' />

* 화면 크기 자동 설정

  아래와 같이 설정하면 사용하는 기기에 맞게 화면 크기가 자동 설정된다.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

  모바일 기기에서 화면이 확대/축소되지 않도록 설정하려면 아래와 같이 한다.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

[body 부분]

* <input />

속성 값 의미
type "button" 버튼
"checkbox" 다중 선택
"color" 색 선택
"date" 날짜
"datetime-local" 일시
"email" 이메일
"file" 파일
"hidden" 숨김
"image" 기본적으로는 버튼이지만 이미지를 넣을 수 있다.
"month" 달
"number" 숫자
"password" 비밀번호
"radio" 단일 선택
"range" 범위
"reset" 입력값 초기화
"search" 찾기
"submit" 확인
"tel" 전화번호
"text"(기본값) 텍스트
"time" 시간
"url" 인터넷 주소
"week" 주
accept ".확장자, .확장자" 확장자 지정
"audio/*" 오디오 파일 지정
"video/*" 영상 파일 지정
"image/*" 이미지 파일 지정
pattern "\d*"
"^[0-9]+$"		 숫자만
"^[a-zA-Z]+$" 영문 대소문자만
"^[a-zA-Z\s]+$" 영문 대소문자만(공백 가능)
"^[a-zA-Z0-9]+$" 숫자, 영문 대소문자만


※ 줄바꿈 저장하기 

str.replace(/\n/g, "<br />")

※ 줄바꿈 불러오기 

str.replaceAll("<br>", "\r\n");

* 체크박스

<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label><br>

* 음원재생

<audio>
  <source></source>
  브라우저가 음원 재생을 지원하지 않을 때 출력할 메시지
</audio>
위치 속성   값 의미
<audio> controls     제어 버튼을 표시한다.
autoplay     음원을 불러온 후 자동 재생한다.
muted     음원을 음소거된 상태에서 불러온다.
loop     음원을 반복재생한다.
preload = "none" 아무것도 미리 불러오지 않는다.
"metadata" 기본 내용만 미리 불러온다.
"auto" 음원 전체를 불러온다.
<source> src = "경로/파일명.확장자" 불러올 음원을 지정한다.
type = "audio/mpeg" 불러올 음원의 타입을 MP3로 지정한다.
= "audio/ogg" 불러올 음원의 타입을 OGG로 지정한다.
= "audio/wav" 불러올 음원의 타입을 WAV로 지정한다.

* 영상재생

<video>
  <source></source>
  브라우저가 영상 재생을 지원하지 않을 때 출력할 메시지
</video>
위치 속성   값 의미
<video> controls     제어 버튼을 표시한다.
autoplay     영상을 불러온 후 자동 재생한다.
muted     영상을 음소거된 상태에서 불러온다.
loop     영상을 반복재생한다.
preload = "none" 아무것도 미리 불러오지 않는다.
"metadata" 기본 내용만 미리 불러온다.
"auto" 영상 전체를 불러온다.
width = "크기px" 영상 넓이를 설정한다.
height = "크기px" 영상 높이를 설정한다.
poster = "경로/파일명.확장자" 썸네일 이미지를 지정한다.
<source> src = "경로/파일명.확장자" 불러올 영상을 지정한다.
확장자 뒤에 #t=프레임수 를 붙여주면 그 위치가 썸네일로 지정된다.
type = "video/mp4" 불러올 영상의 타입을 MP4로 지정한다.
= "video/ogg" 불러올 영상의 타입을 OGG로 지정한다.

* 드롭다운

<select id="cars" name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
</select>
위치 속성   값 의미
<select> name = "파라미터이름" 서버에 전달할 파라미터의 이름을 지정
<option> value = "값" 서버에 전달할 파라미터의 값
selected     기본으로 선택
태그 구조 역할
<div>Hello World</div> 엘리먼트를 위에서 아래로 추가한다.
<span>Hello World</span> 엘리먼트를 왼쪽에서 오른쪽으로 추가한다.
<a href="www.google.com">구글</a> URL을 변경하고 페이지를 이동시킨다.
<table>
  <tr><th>열1</th><th>열2</th></tr>
  <tr><td>데이터1</td><td>데이터2</td></tr>
</table>		 표를 작성한다.
※ 줄병합: rowspan, 칸병합: colspan
<form action="/라우팅주소" method="GET|POST">
  <input type="타입" />
  <input type="submit" value="버튼캡션" />
</form>		 서버 프로그램에게 정보를 전달한다.
※ Input types
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">​
태그 기능 속성 값 의미
<a></a> 다른 주소로 링크 href "url" url주소로 이동
download 없음 원본 파일명으로 다운로드
"경로/파일" 지정된 파일명으로 다운로드
심화편

[head 부분]

태그 구조 역할
<meta name="키워드" content="내용"> 검색 엔진에 넘겨줄 키워드를 설정한다.
<meta name="description" content="Free Web tutorials"> 문서의 설명을 설정한다.
<meta name="author" content="John Doe"> 문서의 작성자를 설정한다.
<meta http-equiv="refresh" content="30"> 자동 새로고침 시간을 초단위로 설정한다.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 기기에 맞게 화면 크기를 자동 조정한다.

[svg 사용]

* 방법1 

<img src="test.svg" />

* 방법2

  svg 파일을 문서 편집기로 열어서 코드를 복사하여 붙여넣는 방법이다. 이 방법으로 하면 id나 class를 지정해 css를 통해 fill 속성을 변경해 색상을 변경할 수도 있고, width 등으로 크기도 변경할 수 있다.

<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>

[포커스 이동 순서 결정]

<input type="text" tabindex=0 />
<input type="submit" value="저장" tabindex=1 />

[자동 포커스]

<input type="text" autofocus />

 

'컴퓨터 > HTML' 카테고리의 다른 글

HTML form  (0) 2022.02.12
HTML 기본 양식  (0) 2022.01.27
input 입력창 크기, 길이 설정  (0) 2019.10.14
HTML radio 선택 입력  (0) 2019.10.11
input 전화번호 입력받기 tel pattern  (0) 2019.07.14

'컴퓨터/HTML' Related Articles

티스토리툴바