HTML의 각종 태그에 대한 정리

김재균·2021년 12월 28일
CSShtmljs웹
0

웹개발

목록 보기
1/1

시작하기 앞서

Visual Code를 사용하여 웹 개발을 진행하고, 크롬에서 동작 시킬것이다.이번 목표는 웹 공부를 끝나고 홈페이지를 하나 개발해보는 것이다.

웹 이란

웹은 클라이언트와 서버로 나뉠 수 가 있다.

  • 클라이언트
    • 웹 브라우저
    • 사용자가 웹 싸이트로 접근할 수 있도록 해주는 기기
  • 서버
    • 인터넷에 연결된 컴퓨터
    • 웹 요소와 여러 정보가 저장되어있다.

웹 개발도 두 가지로 나뉜다. 웹 브라우저의 화면 부분을 다루는 프론트엔드와 사용자가 보는 화면의 뒤, 즉 보이지 않는 영역을 다루는 백에드가 있다.프론트 엔드는 HTML,CSS,JS를 이용하여 개발을 한다. 백엔드는 데이터베이스를 설계하거나 데이터를 처리하고 자바, PHP, 파이썬등의 프로그래밍 언어를 사용한다.

웹 개발에서 필요한 기술

HTML,CSS,JS를 사용하여 개발을 한다.

  • HTML : 웹의 뼈대를 만들어준다.
  • CSS : 웹을 꾸미는 역할을 한다.
  • JavaScript : 웹을 사용하는 사용자 동작에 반응하게 해준다.

HTML

HTML은

Hypertext Markup Language

의 약자이고 프로그래밍 언어는 아니고 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 언어이다

아래 그림은 HTML의 기본적인 구조이다.

  • <!DOCTYPE html> : 현재 문서가 HTML언어로 작성한 웹문서라는 것을 나타낸다.
  • <html> ~ </html> : 웹 문서의 시작과 끝을 나타낸다.

    • lang이라는 속성을 사용해 문서에서 사용할 언어 지정 가능

      <!doctype html>
<html lang="ko">
	<head>
	...
	</head>
	<body>
	...
	</body>
</html>
  • <head> ~ </head> : 웹 브라우저가 웹 문서를 해석하는데 필요한 정보를 입력하는 부분
  • <body> ~ </body> : 웹 브라우저 화면에 나타나는 부분이다.

<head> 태그

브라우저에게 정보를 주는 역할을 한다.

  • 문서 관련 정보를 입력하며, 웹 브라우저 화면에는 보이지 않는다.
  • 문서에서 사용할 외부 파일 링크가 들어간다.

<head> 태그 내에는 <meta>,<title> 태그가 들어간다.

  • <meta> 태그
    • 문자 세트등 문서 정보가 들어간다.
    • ex)
      <meta charset ="UTF-8">

      한글로 된 내용을 표시하기위해 사용한 문자 세트

    • 이 외에도 다양한 문서 정보를 지정할수있다.
  • <title> 태그
    • 말 그대로 문서의 제목을 나타낸다.

<body> 태그

실제 브라우저에 표시되는 내용이다. html의 대부분의 태그가 이 안에 들어간다.

특수 기호 입력

화면에 표시되는 모습 특수 기호
& &amp;
공백 한칸 &nbsp;
< &lt;
> &gt;
| &#124;
( &#40;
) &#41;
, &#44;
- &#45;
´ &acute;

기본적인 태그

  • <h*n>* 태그 - 제목 표시

    • 기본형 : <h*n>* 제목 </h*n>*
    • 각 웹 콘텐트 영역에서 제목을 표시할 때 사용하는 태그
    • n : h1 > h2 >h3 >h5 >h6 순으로 제목의 크기가 달라진다.

  • <p> 태그 - 텍스트 단락

    • 기본형 : <p> 텍스트 </p>
    • 입력한 내용 앞뒤로 빈 줄이 생기면서 텍스트 단락이 만들어진다.

  • <br> 태그 - 줄 바꾸기

    • 기본형 : <br>
    • 줄을 바꿀 위치에 <br> 태그를 사용, 닫는 태그가 없다

  • <blockquote> 태그 - 인용문 넣기

    • 기본형 : <blockquote> 인용 내용 </blockquote>
    • 다른 텍스트 보다 안으로 들여 써짐

  • <hr> 태그 - 분위기 전환

    • 기본형 : <hr>
    • 주제가 바뀔 때 분위기 전환 , 수평 줄 생김

  • <pre> 태그 - 입력한 그대로 표시

    • 기본형 : <pre> 텍스트 </pre>
    • 소스에 표시한 공백이 그대로 표시됨.
    • 프로그램 소스를 표시할 때 유용함

  • <strong>,<b>- 굵게 표시

    • <strong> : 중요한 내용이라서 강조해야 할 때
    • <b> : 단순히 굶게 표시할 때

  • <em>,<i> - 이탤릭체로 표시하기

    • <em> : 흐름상 특정 부분을 강조하고 싶을 때
    • <i> : 단순히 이탤릭체로 표시할 때

  • <q> 인용 내용 표시

    • 줄바꿈 없이 다른 내용과 한 줄에 인용 내용 표시
    • 인용 내용 앞뒤에 따옴표 “” 추가됨

  • <mark> 형광펜 효과

    • 태그로 묶은 부분의 배경색이 노란색으로 표시됨

  • <span>,<div> 영역 묶기

    • <span> : 줄 안에서(인라인) 묶기
    • <div> : 줄 바꿔(블록) 단락으로 묶기

  • <ruby> : 동아시아 글자에 주석 표시

    • <ruby> 태그 안에 <rt> 태그를 사용해 주석 표시

  • 목록만드는 태그

    • <ul>,<li> -순서 없는 목록
      • 각 항목 앞에 불릿이 붙여짐
      • CSS의 list-style-type 속성으로 불릿 수정
    • <ol>,<li> - 순서 목록
      • 각 항목 앞에 숫자가 붙여짐
      • <ol> 태그의 속성
        • type : 불릿 앞의 숫자 조정
        • start : 중간 번호부터 수정
        • reserved : 역순으로 표시

  • <dl>,<dt>,<dd> 설명 목록

    • 제목과 그에 대한 설명으로 이루어진 목록
    • <dl>과 <dt>,<dd> 태그 사용
    • 하나의 <dt>에 여러개의 <dd> 값을 가질 수 있다.

표

  • 자료를 보기 좋게 정리한 것
  • 표를 만드는 태그
    • <table> ~</table> : 표 전체, border 속성을 이용하여 표의 라인 두께 설정
    • <tr> ~ </tr> : 행
    • <td> ~<td> : 셀
    • <th> ~<th> : 제목 셀
  • colspan, rowspan 속성을 이용하여 행 또는 열을 합칠수있다.
    <td colspan="합칠 행의 개수"> 내용 </td>
<th colspan="합칠 행의 개수"> 내용 </th>

<td rowspan="합칠 열의 개수"> 내용 </td>
<th rowspan="합칠 열의 개수"> 내용 </th>
  • <caption> - 표 제목
    • 제목이 위쪽 중앙에 표시됨
  • <figure>, <figcaption> - 표 제목
    • <figcaption> 위치에 따라 표의 위나 아래에 제목표시
    • <figure>~</figure> 태그안에 <table>태그와 <figcaption> 태그가 위치함
  • <thead>, <tbody><tfoot> - 표 구조 정의하기
    • 표의 구조를 제목 부분과 실제 본문 그리고 요약부분이 있는 부분으로 나눈다.
    • 표의 본문이 길 경우 자바스크립트를 이용하면 제목과 바닥 부분을 고정하고 본문만 스크롤 되도록 할 수 있다.
  • <col>,<colgroup> - 열끼리 묶어 스타일 지정
    • <col>
      • 한 열에 잇는 모든 셀에 같은 스타일을 적용하려고 할때 사용
      • span 속성을 사용해 여러 열을 묶을수 있음
    • <colgroup> 태그로 여러 열을 묶을 수도 있는데, <colgroup>안에 묶는 열의 개수 만큼 <col>태그를 사용
    • <col>,<colgroup>태그는 <caption>뒤, <tr>,<td>태그 전에 사용해야함

이미지 와 하이퍼링크

  • <img> 태그
    • 웹 문서에 이미지를 삽입할 때 사용
    • <img src="경로" [속성="값"]>
    • 속성
      • src : 이미지 파일 경로
      • alt : 이미지를 설명하는 대체 텍스트, 이미지를 표시할 수 없는 상황 일때 대체 텍스트 표시
      • width, height : 이미지 크기 조정, 사용하지 않으면 이미지 크기대로 표시
      • figure : 설명글을 붙일 대상 지정 <figure> 요소 <figure>
      • figcaption : 이미지를 설명하는 대체 텍스트
  • 하이퍼 링크

    • 다른 문서 혹은 다른 사이트로 바로 연결해주는 기능

    • 외부 사이트나 외부 페이지로도 연결

    • <a> 태그, href 속성

      • <a href="링크할 주소" [속성="속성 값"]>텍스트 </a>
      • 반드시 href 속성을 함께 사용해서 어떤 대상으로 연결하는지 알려 주어야한다.

    • <a> 태그에서 사용할 수 있는 속성

      속성설명
      href링크한 문서나 사이트의 주소를 입력
      target링크한 내용이 표시될 위치를지정
      download링크한 내용을 보여 주는 것이 아니라 다운로드함
      rel현재 문서와 링크한 문서의 관계를 알려줌
      hreflang링크한 문서의 언어를 지정
      type링크한 문서의 파일 유형을 알려줌

    • target 속성 -새 탭에서 링크 열기

      • 다른 사이트로 링크하거나 현재 페이지를 유지한 상태에서 링크페이지를 표시할 때

      • 현재 페이지는 그대로 유지하면서 새 창이나 새 탭에 표시

      • 사용할 수 있는 값

        속성 값설명
        _blank링크 내용이 새 창이나 새 탭에서 열림
        _selftarget 속성의 기본값으로 일크가 있는 화명에서 열림
        _parent프레임을 사용했을 때 링크 내용을 부모 프레임에 표시
        _top프레임을 사용했을 때 프레임을 벗어나 링크 내용을 전체 화면에 표시

링크 만들기

  • 앵커 : 한 페이지 안에서 점프 하기

    • 앵커를 사용하려면 우선 이동하고 싶은 위치마다 id 속성을 이용해 앵커를 만듦

    • <a> 태그의 href 속성을 사용해서 링크함, 단 앵커 이름 앞에 #을 붙여 앵커 표시

      <태그 id="앵커이름"> Text or image</태그>
<a href="#앵커이름"> Text or Image</a>
  • <area> 태그, usemap 속성 - 이미지맵

    • 이미지맵 : 한 이미지 상에 여러 다른 링크를 만드는 것

      <map name="맵이름">
	<area>
	<area>
</map>
<img src="이미지 파일" usemap="#맵이름">
속성설명
alt대체 텍스트를 지정
coords링크로 사용할 영역을 시작 좌표와 끝 좌표를 이용해 지정
download링크를 클릭했을 때 링크 문서를 다운로드
href링크 문서경로를 지정
media링크 문서를 어떤 미디어에 최적화 시킬지 지정
rel현재 문서와 링크 문서 사이의 관계를 지정
shape링크로 사용할 영역의 형태를 지정(lternate, bookmark, help, license, next, nofollow, noreferer, prefetch, prev,search, tag
target링크를 표시할 대상을 지정(default, rect, cricle,poly)
type링크 문서의 미디어 유형을 지정(_blank, _parent, _self, _top, 프레임 이름)

폼 만들기

  • 사용자가 웹 사이트로 정보를 보낼 수 있는 요소들은 모두 폼
  • 폼과 관련된 대부분의 작업들은 정보를 저장하거나 검색하거나 수정하는 일들
  • 이런 작업은 모두 데이터베이스를 기반으로 한다
  • 아이디를 입력하는 텍스트 필드나 버튼 같은 폼의 형태를 만드는 것은 HTML 태그

<form> 태그

  • 폼을 만드는 기본 태그, 과 사이에 여러 폼 요소 삽입
  • <form [속성 = "속성 값"]> 여러 폼 요소 </form>
  • <form> 태그에 사용 하는 속성들
    • method
      • 사용자가 입력한 내용들을 서버 쪽 프로그램으로 어떻게 넘겨줄지 지정
      • 속성 값
        • get : 주소 표시줄에 사용자가 입력한 내용이 그대로 드러남, 256byte ~ 4,096byte까지의 데이터만 서버로 넘길 수 있다.
        • post : 대부분 이 방식을 사용, 사용자의 입력을 표준 입력으로 넘겨주기 때문에 입력 내용의 길이에 제한을 받지 않고 사용자가 입력한 내용이 드러나지 않음
      • name : 폼의 이름을 지정, 한 문서 안에 여러개의 <form> 태그가 있을 경우, 폼들을 구분하기위해 사용
      • action : <form> 태그안의 내용을 처리해 줄 서버 상의 프로그램을 지정
      • target : <action> 태그에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정

<label> 태그

  • 폼 요소에 레이블을 붙이는 태그
  • 라디오 버튼이나 체크 박스에서 텍스트 부분을 클릭해도 라디오 버튼과 체크박스 버튼이 선택된다.
<label [속성="속성 값"]> 레이블<input ...></label>
<label for="id이름">
	<input id="id이름" [속성="속성값"]>
</label>

<fieldset> 태그

  • 폼 요소를 그룹으로 묶는 태그
  • <fieldset [속성="속성값"]> ... </fieldtset>
  • 태그 - 그룹으로 묶는 구역에 제목을 붙이는 태그

<input> 태그

  • 사용자가 입력하는 부분은 거의 <input>태그를 이용해 처리
  • 입력하는 내용의 종류는 <input> 태그의 type 속성을 통해 지정
  • type 속성 값에 따라 함께 사용할 수있는 속성들도 달라짐
  • <intput type="유형" [속성="속성 값"]>

<input> 태그의 id 속성

  • 여러 번 사용된 폼 요소를 구분하기 위해 사용
  • <label> 태그를 이용해 캡션을 붙일 수 있다
  • CSS를 이용해 각 요소마다 다른 형태로 꾸밀 수 있다.

type 종류

  • hidden
    • 화면 상의 폼에는 보이지 않는다.
    • 폼을 서버로 전송할 때 서버로 함께 전송되는 요소
    • <input type="hidden" name="이름" value="서버로 넘길 값">
  • text
    • 한 줄 짜리 텍스트 필드 입력 필드
    • 주로 아이디나 이름, 주소 등 텍스트로 입력
    • <input type="text" [속성="속성 값"]>
  • email
    • 메일 주소 입력 필드
    • 메일 주소 형식 자동 체크
    • <input type="email" [속성="속성 값"]>
  • tel
    • 전화번호 입력 필드
    • 사용자 입력을 체크하지는 않음
    • <input type="te" [속성="속성 값"]>
  • range

    • 숫자 입력 필드, 슬라이드 막대를 이용해 숫자 입력

    • <input type="range" [속성="속성 값"]>

      <b>주문 개수: <\b> <input type="range" min="1" max="5" value="1">개
  • password
    • 비밀번호 입련란
    • 사용자가 입력한 내용이 ‘*’ 나 ‘●’ 로 표시됨
    • <input type="password" [속성="속성 값"]>
  • search
    • 검색 필드
    • 검색 창에 x 표시가 되어 검색어 삭제 쉬움
    • <input type="search" [속성="속성 값"]>
  • url
    • 웹 주소 필드
    • http://로 시작하는 사이트 주소 입력
    • <input type="url" [속성="속성 값"]>
  • number

    • 숫자 입력 필드 브라우저에 따라 스핀 박스로 표시됨

    • <input type="number" [속성="속성 값"]>

      <b>주문 개수: <\b> <input type="number" min="1" max="5" value="1">개
  • checkbox, radio

    • radio : 여러 항목 중 하나만 선택<input type="radio" [속성="속성 값"]>

    • checkbox : 여러 항목 중 둘 이상 선택 <input type="checkbox" [속성="속성 값"]>

      속성설명
      name라디오 버튼이나 체크박스가 여러개 있는 경우, 서버의 폼 프로그램에서 라디오 버튼이나 체크박스를 구분하기 위해 이름을 지정. 라디오 버튼은 여러개 중에서 한 가지만 선택하는 것이기 때문에 관련 있는 그룹끼리는 name 속성 값을 똑같이 만듬
      value선택한 라디오 버튼이나 체크박스를 서버로 알려 줄 때 넘길 값을 지정합니다. 이 값은 영문이거나 숫자여야 하며 필수 속성입니다.
      checked라디오 버튼의 항목들은 처음에 아무 것도 선택되지 않은 상태로 화면에 표시되는게 기본으로 선택해 놓을 항목이 있다면 checked 속성을 사용
  • color
    • 색상 표에서 색상 선택
    • <input type="color" [ value="기본 색" [속성="속성 값"]]>
  • date, month, week
    • 달력 이용해 날짜 입력
    • <input type="date | month | week" [value="기본값" 속성="속성 값"]>
      유형설명
      date날짜를 선택 “yyyy-mm-dd”형식
      month월과 연도를 선택 “yyyy-mm” 형식
      week주와 연도를 선택
  • time, datetime-local

    • 시간 입력

    • <input type="time | datetime | datetime-local" [value="기본 값" 속성="속성 값"]>

      속성설명
      min날짜나 시간의 최솟값 지정
      max날짜나 시간의 최댓값 지정
      step스핀 박스의 화살표를 누를 때마다 날짜나 시간을 얼마나 조정할지 지정
      value화면에 표시할 초기값을 지정

      type=”time”일 경우, 시간은 00:00 부터 23:59까지 입력
      type=”datatime” 이나 type=”datatime-local” 유형일 경우, 날짜 다음에 키워드 T를 쓰고 24시간제로 시간을 지정, 예들들어 오후 6시를 나타내려면 T18:00 |

  • submit, reset
    • 폼 전송/리셋 버튼
    • 전송 버튼 : 사용자 입력 내용을 서버로 전송
    • 리셋버튼 : 사용자 입력 내용 전부 삭제
    • value 속성을 이용해 버튼 표시 내용 지정
    • <input type="submit | reset " [value="버튼 내용" 속성="속성 값"]>
  • image
    • submit 버튼 대신 이미지 삽입
    • <input type="image" src="경로" alt="대체 텍스트" [속성="속성 값"]>

<input> 태그의 속성

  • autofocus
    • 페이지를 불러오자마자 원하는 폼 요소에 마우스 커서 표시
  • placeholder
    • 입력란에 표시하는 힌트로, 필드를 클릭하면 사라짐
  • readonly
    • 내용을 보기만하고 입력하지 못하게함
    • 속성 값 없이 readonly 라고만 쓰면 됨
    • readonly=”readonly”, readonly=”true” 라고 표시하기도 함
  • required
    • 필수 필드 체크
    • 속성 값 없이 required라고만 입력
    • 필수 필드는 브라우저에서 직접 체크하는 것이므로 오류 메시지 내용은 브라우저들마다 다름
  • min,max,step
    • min,max: 해당 필들의 최솟값, 최댓값
    • step : 허용된 범위 내의 숫자 간격
    • type이 date, datetime, datetime-local, month, week, time, range, number일 경우에만 사용
  • size, mimlength, maxlength
    • size : 텍스트 관련 필드에서 화면에 몇글자까지 보이게 할지 결정
    • maxlength : 입력 가능한 최대 글자
    • minlength : 입력해야 할 최소 글자

그 외에 다양한 태그들

  • <select>, <option>, <optgroup>

    • 여러 옵션 중에서 선택 - 드롭 다운 목록

    • 공간을 최소한으로 사용하면서 여러 옵션 표시 가능

      <select 속성="속성 값">
	<option value="값" [속성="속성 값"]> 내용 1</option>
	<option value="값" [속성="속성 값"]> 내용 2</option>
	<option value="값" [속성="속성 값"]> 내용 3</option>
...
</select>

    • <select> 태그 속성

      • size : 화면에 표시될 드롭다운 메뉴의 항목 개수를 지정
      • mutiple : 브라우저 화면에 여러 개의 옵션이 함께 표시되면서 crtl 키를 누른 상태로 드롭다운 메뉴에 있는 여러 항목 선택 가능

    • <option> 태그의 속성

      • value : 옵션을 선택했을 때 서버로 넘겨질 값 지정
      • selected : 화면에 표시될 때 기본으로 선택되어 있는 옵션을 지정

    • <optgroup>

      • 여러 항목을 그룹을 묶을 때 사용
      • label 속성을 사용해 그룹 제목을 붙임
  • <datalist>,<option>

    • 데이터 목록에서 제시한 값 중에서 선택하면 그 값이 자동으로 텍스트 필드에 입력됨

    • 데이터 목록에 id를 이용해 이름을 붙이고 <input> 태그의 list 속성에 데이터 목록 id를 지정함

      <input type="text" list="데이터 목록 id">
	<datalist id="데이터 목록 id">
		<option> ... </option>
		<option> ... </option>
		...
	</datalist>

    • <option> 태그의 속성

      • value : 사용자가 레이블을 선택했을때 넘겨질 값을 지정
      • label : 사용자를 위해 브라우저에 표시할 레이블, 따로 지정하지 않을경우 value값을 레이블로 사용
  • <textarea>
    • 텍스트 영역 - 여러 줄의 텍스트 입력
    • 게시판의 게시물 입력 창, 회원 가입 양식의 약관 등
    • <textarea [속성="속성값"]> 내용 </textarea>
    • 속성
      • name : 다른 폼 요소와 구분하기 위해 텍스트 영역의 이름을 지정
      • cols : 텍스트 영역의 가로 너비를 문자 단위로 지정
      • rows : 텍스트 영역의 세로 길이를 줄 단위로 지정, 지정한 숫자보다 줄 개수가 많아지면 스크롤 막대가 생김
  • <button>
    • 다양한 형태의 버튼 삽입
    • 화면 낭독기에서 버튼임을 정확히 전달할 수 있음
    • CSS를 이용해 원하는 형태로 꾸밀 수 있음
    • <button [type="submit | reset | button"> 내용 </button>
    • 속성
      • submit : 폼을 서버로 전송 제출
      • reset : 폼에 입력한 모든 내용을 초기화 리셋
      • button : 버튼 형태만 만들 뿐 자체 기능은 없다 버튼
  • <output>

    • 계산 결과를 브라우저에 표시

    • 브라우저 화면에 다르게 표시되는 것은 아니지만 태그로 묶인 부분이 일반 텍스트가 아니라 계산의 결과값이라는 점을 웹 브라우저가 정확히 인식할 수 있다.

      <form oninpit="result.value=paresInt(num1.value)+parseInt(num2.value)">
	<input type="number" name="num1" value="0"> +
	<input type="number" name="num2" value="0"> =
	<output name="result" for="num"></output>
</form>
  • <progress>
    • 작업 진행 상태를 브라우저에 표시
    • 값에는 특별한 단위가 없고 단위를 표시하지도 않음
    • 속성
      • value : 작업 진행 상태를 나타내며 부동 소수점으로 표현, 이값은 0보다 크거나 같고 max값보다 작거나 같아야 한다. 만약 max값이 지정되지 않았다면 값은 1.0보다 작아야한다.
      • max : 작업이 완료되러면 얼마나 많은 작업을 해야 하는지 부동 소수점으로 표현, 이값은 0보다 커야한다.
  • <meter>
    • 전체 크기 중에서 얼마나 차지하는지를 표현할 때 사용
    • 속성
      • min,max : 범위의 최솟값과 최댓값을 나타낸다, 값을 정하지 않으면 0과 1로 간주
      • value : 범위 내에서 차지하는 값
      • low : 이정도면 낮다라고 할 정도의 값을 지정
      • high : 이 정도면 높다라고 할 정도의 값을 지정
      • optimum : 이 정도면 적당하다 라고 할 정도의 범위를 지정, optimum값이 high 보다 크다면 value 값이 클수록 좋고 optimum값이 low값 보다 작다면 value값이 작을 수록 좋다
profile
김재균
코딩은 내가 생각하는 모든것을 가능하게 해준다

0개의 댓글