[HTML] HTML 기초 - HTML의 다양한 요소(Element)와 공간 분할 요소

개요

오늘은 지난 포스팅에 이어서 HTML의 다양한 요소(Element)와 공간 분할 요소에 대해서 알아보도록 하겠습니다.

목록형 Tag(ul, li 등)

목록 태그는 반드시 하나 이상의 하위 tag를 포함합니다.

tag명	설명
<ul>	번호 없는 목록
<ol>	번호 있는 목록, 숫자(1), 영문소문자(a), 영문대문자(A), 로마숫자(i), 로마숫자 대문자(I)로 표시, start로 오름차순, reversed로 내림차순
<li>	목록 항목 <ul>이나, <ol> tag 하위에서 사용함.
<dl>	용어 정의와 설명에 대한 내용을 목록화 해서 표시
<dt>	용어 목록의 정의 부분을 나타냄
<dd>	용어 목록의 설명 부분을 나타냄.

테이블 태그(Table Tag)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <table border="1" width="300"> <!-- 테이블 태그 -->
    <caption> 강좌리스트</caption> <!-- 테이블의 제목부분 추가 가능 -->
    <thead> <!-- 테이블의 첫 행 부분, 열의 이름 등을 표기-->
      <tr>
        <th>이름</th><th>가격</th>
      <tr>
    <thead>
    <tbody>
      <tr>
        <td>안녕 자두야</td><td>15000</td>
      </tr>
    <tr>
      <td>아프니까 청포도다</td><td>23000</td>
    </tr>
    <tbody>
    <tfoot>
      <tr>
        <td>합계</td><td>38000</td>
      </tr>
    </tfoot>
  </table>

</body>
</html>

셀의 병합(for Table Tag)

열(Colum) 병합

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <table border="1" width="300"> <!-- 테이블 태그 -->
    <caption> 강좌리스트</caption> <!-- 테이블의 제목부분 추가 가능 -->
    <thead> <!-- 테이블의 첫 행 부분, 열의 이름 등을 표기-->
      <tr>
        <th>이름</th><th>가격</th>
      <tr>
    <thead>
    <tbody>
      <tr>
        <td colspan="2">안녕 자두야</td>
      </tr>
    <tr>
      <td>아프니까 청포도다</td><td>23000</td>
    </tr>
    <tbody>
    <tfoot>
      <tr>
        <td>합계</td><td>38000</td>
      </tr>
    </tfoot>
  </table>

</body>
</html>

행(Row) 병합

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <table border="1" width="300">
    <caption> 강좌리스트</caption> <!-- 테이블의 제목부분 추가 가능 -->
    <thead> <!-- 테이블의 첫 행 부분, 열의 이름 등을 표기-->
      <tr>
        <th>이름</th><th>가격</th>
      <tr>
    <thead>
    <tbody>
      <tr>
        <td rowspan="2">안녕 자두야</td><td>15000</td>
      </tr>
    <tr>
        <td>23000</td>
    </tr>
    <tbody>
    <tfoot>
      <tr>
        <td>합계</td><td>38000</td>
      </tr>
    </tfoot>
  </table>

</body>
</html>

테이블 태그의 스타일 속성

<table
        cellpadding="3"
        cellspacing="2"
        bordercolorlight="red"
        bordercolordark="steelblue"
        bgcolor="cyan"
        border="1"
        width="300"
        height="150"
></table>

속성	설명
cellpadding	cell’s padding
cellspacing	cell’s margin
bordercolorlight	light모드 일 때
bordercolordark	dark모드 일 때
bgcolor	테이블에 이 속성을 주면 테이블 전체의 배경 색상 셀에 주면 셀의 배경 색상
~~border~~	~~보더속성~~
width	너비
height	높이

border : html5 부터는 테두리 스타일 관련 속성을 지원하지 않고 css를 사용

테이블 태그의 캡션(설명, caption) 속성

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Insert title here</title>

    <style type="text/css">
      caption {
        text-align: left;
      }
    </style>
  </head>
  <body>
    <div align="center">
      <table border="1">
        <caption>
          강좌 리스트
        </caption>
        <thead>
          <tr>
            <th>No</th>
            <th>강좌명</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>HTML5 &CSS3</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Spring Framework</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>

이미지 태그(img, figure)

<img src="./img/test.png">
<img src="https://src.hidoc.co.kr/image/lib/2022/7/13/1657700243750_0.jpg">

<!-- figure와 함께 쓰면 이미지에 설명 추가 가능 -->

<figure>
    <img src="https://src.hidoc.co.kr/image/lib/2022/7/13/1657700243750_0.jpg">
    <figcaption>아름다운 우주의 사진이네요</figcaption>
</figure>

A Tag(Anchor Tag)

하나의 문서에서 다른 문서로 이동하고자 할 때(주로 다른 사이트로 이동 등) 사용합니다.

<a href="https://www.naver.com">네이버로 이동</a>
<a href="other.html">other로 이동</a>
<a href="other.html" target="_self">other로 이동</a> <!-- 새창 열기 -->
<a href="other.html" target="_blank">other로 이동</a> <!-- 기본 값으로 화면열기(내 창에서 열기) -->
<a href="other.html" target="_top">other로 이동</a> <!-- 프레임을 사용했을 때 프레임을 벗어나 링크 내용을 전체 화면으로 표시  -->
<a href="other.html" target="_parent">other로 이동</a> <!-- 프레임을 사용했을 때 부모 프레임에 표시  -->

A 태그의 target 속성 - 창 전환 옵션

속성	설명
_blank	새창 열기
_self	창 전환(자신의 창을 바꾼다)
_top	프레임을 사용했을 때 프레임을 벗어나 링크 내용을 전체 화면으로 표시
_parent	프레임을 사용했을 때 부모 프레임

A 태그의 `href` 속성 : URL, # (문서 내 위치 이동)

`<a></a>` 태그의 `href` 속성으로 `URL` 을 주면 해당 주소로 이동합니다.
이때 `URL` 에 들어갈 수 있는 값으로는 `외부 주소 (네이버 등)` 또는 `디렉토리(로컬 경로)` 를 줄 수 있습니다.
`외부 주소` : 주로 `http://` 로 시작하는 웹 주소 들을 입력합니다.
`디렉토리` : 사용자가 작업하는 컴퓨터 내 디렉토리 주소를 참조합니다.
이 때 디렉토리 경로는 `상대경로 (/ , ./ , ../, etc)` 규칙을 따릅니다.

`#` : `HTML` 태그의 `id` 속성과 함께 쓰이며, 해당 `id` 가 있는 곳으로 이동합니다.

Map Tag

하나의 이미지에 여러 link를 추가하고 할때, `img` 태그와 같이 사용함.

<img src="https://src.hidoc.co.kr/image/lib/2022/7/13/1657700243750_0.jpg" usemap="#logo">
<map name ="logo">
    <area shape="rect" coords = "5, 5, 185, 50" href="https://www.naver.com" target="_blank">
    <area shape="rect" coords = "190, 5, 345, 80" href="https://www.google.com" target="_blank">
</map>

`map` 태그는 하나의 이미지에 서로 다른 경로로 이동할 수 있게 하는 데 주로 쓰이므로, `img` 태그와 함께 쓰입니다.
`map` 태그는 `a` 태그처럼 `href` 속성을 가질 수 있고, 역할은 `a` 태그의 것과 같습니다.

map 태그의 속성 값

속성	설명
shape	영역의 타입(사각형, 원형 등등..)
coords	좌표 위치 (x1,y1, x2,y2 이런 느낌)
href	url, 상대경로, # 등
target	a 태그의 target 속성 과 동일

link Tag

`HTML`에 `CSS`를 적용할 때 사용하는 태그
`HTML`의 `HEAD` 영역에서 사용함.

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/main.css">
</head>

iframe

화면 속 또 다른 작은 화면

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>iframe</title>
  </head>
  <body>
    <h3>iframe 요소</h3>
    <a href="java.html" target="content"> java fundamental</a>
    <a href="web.html" target="content"> servlet/jsp</a>
    <a href="mybatis.html" target="content"> mybatis</a>
    <a href="spring.html" target="content"> spring/springboot</a>
    <a href="android.html" target="content"> android</a>
    <br /><br />
    <iframe src="java.html" name="content" width="500" height="300"></iframe>
  </body>
</html>

Form Control 요소

사용자가 데이터를 입력하거나 버튼을 조작하는 등 정보의 입력이나 서버와의 데이터 송수신에 사용하는 태그

Tag 명	설명
<form>	사용자에게 입력 받을 항목을 정의
<input>	텍스트 box, 체크 박스등 대부부분의 입력 값을 받는데 사용
<textarea>	여러줄의 문자
<button>	그냥 버튼, input에도 button이 있지만, 이 button은 별도로 설정하지 않으면 기능이 없음(input button과의 차이점).
<select>	드롭박스, 콤보박스 등
<optgroup>	select box의 각 항목을 그룹화
<option>	select box의 각 항목을 정의함
<label>	마우스를 이용하여 특정 위치로 이동하게 하는데 사용 가능
<fieldset>	입력 항목 전체를 그룹화하는데 사용
<legend>	filedSet의 제목을 정의하며 실선의 박스형태로 둘러쌈

💡 여기서 잠깐! (Form 태그에서 꼭 기억할 부분)

데이터를 어떤 방식으로 서버와 송수신하는지는 크게 두 가지 방법이 있습니다.

GET 방식 : 주소창에 그대로 송수신하고자 하는 데이터가 나타나며, 보안에 취약하나 보안상 문제가 되지 않는 정보나 짧고 간결한 정보를 주고받는 데는 쉬움.
POST 방식 : 데이터를 body 태그에 담아(like 덩어리) 송수신하는 방법으로, 주소창에 주고받는 데이터가 드러나지 않아 get 방식보다 보안상 더 좋음.

데이터 송수신 방법에 대해 별도로 명시하지 않으면 GET 방식으로 데이터를 주고받는 것을 의미합니다.

Form Control의 속성

method	GET / POST
name	form 의 이름 ; 서버에서 주고 받는 데이터를 추출하는 keyword가 됨.
action	form태그 안의 내용을 처리해줄 서버 상의 프로그램(like 서블릿(servlet))을 지정해줌, URL 형식.
target	action 태그에서 지정한 스크립트 파일을 현재 창이 아닌 다른 창으로 할 때 활용 가능
autocomplete	자동완성 기능, 기본값은 on

Input Tag

입력으로 받는 거의 모든 것에 대한 태그, 다양한 속성을 바탕으로 종류가 세분화 됩니다.
태그 명은 input으로 같으나 타입(Type) 속성에 따라 화면에 보이는 부분, `속성` 등이 달라집니다.

<input type="text"/>

Input Tag의 타입(Type) 속성들

옵션명	설명	html5	속성
text	한줄의 텍스트	x
password	비밀번호	x
search	검색	o
tel	전화번호	o
url	주소창	o
email	이메일주소	o
datetime	국제 표준시
datetime-local	지역 표준시
date	연 월 일
month	연, 월	o
week	연 주	o
time	시 분 초 분할초
number	숫자조절(화살표로)		min, max, step(짝수나 홀수 등으로 제한하려 할 때), value(기본값)
range	범위조절(막대기)		min, max, step(짝수나 홀수 등으로 제한하려 할 때), value(기본값)
color	색상
checkbox	체크박스(2개이상 선택가능)	x
radio	하나만 선택하는 체크박스	x
file	파일첨부 버튼
submit	button, 서버 전송용
image	submit + image
reset	리셋 버튼
button	기능 없는 버튼
hidden	서버에만 보이는 값을 설정

Input 태그의 사용자 입력을 위한 속성

속성	설명
autofocus	페이지 로딩후 자동 초점
placeholder	input 태그 등에서 입력 전 가이드 텍스트
readonly	값을 수정하지 못하고 드래그만 가능하게
required	form에 데이터 입력 후 submit 시 전송 전 필수 입력 항목을 체크함.
min, max, step	해당 필드의 최대 최소 지정, step은 간격
size, minlength, maxlength	텍스트의 사이즈, 텍스트의 최소길이, 최대길이
height, width	이미지의 너비와 높이를 지정 (type =”image” 일 때 )
list	<datalist>에 미리 정의해둔 옵션 값을 <input>에 나열해 보여줌.
multiple	type=”email” , type=”file” 일 때 두 개 이상의 값을 입력.

드롭다운(drop down) Tag ( select - option)

<select id="chanel" name="chanel">
    <option value="mbc">MBC
    <option value="kbs" selected="selected">KBS
    <option value="sbs">SBS
    <option value="jtbc">JTBC
    <option value="tvn">TVN
    <option value="ytn">YTN
</select>

<label for="chanel">선호채널</label>
<select id="chanel" name="chanel" size="5" multiple="multiple">
    <option value="mbc">MBC
    <option value="kbs" selected="selected">KBS
    <option value="sbs">SBS
    <option value="jtbc">JTBC
    <option value="tvn">TVN
    <option value="ytn">YTN
</select>

드롭 다운 태그의 속성

속성	설명
size	화면의 표시될 dropdown 메뉴의 항목 개수 지정.
multiple	브라우저 화면에 여러 개의 옵션이 함께 표시되면서 ctrl 키를 누른 상태로 여러 항목을 선택(다중선택).
value	옵션을 선택했을 때 서버로 넘겨질 값을 지정.
selected	화면에 표시될 때 기본으로 선택되어 있는 옵션을 지정.

드롭다운 태그의 그룹핑(Grouping)

label 속성 함께 사용하기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form control</title>
</head>
<body>

	<h2>form control - select</h2>
	<form>
		<fieldset>
			<legend>설문조사</legend>
			<ul>
			<li>
			<label for="name">이름</label>
			<input type="text" id="name" name="name">
			</li>
			<li>
			<label for="chanel">선호채널</label>
			<select id="chanel" name="chanel">
				<optgroup label="지상파">
					<option value="mbc">MBC
					<option value="kbs" selected="selected">KBS
					<option value="sbs">SBS
				</optgroup>
				<optgroup label="종합편성채널">
					<option value="jtbc">JTBC
					<option value="tvn">TVN
					<option value="ytn">YTN
				</optgroup>
			</select>
			</li>
			</ul>
		</fieldset>
	</form>
</body>
</html>

datalist Tag

for 드롭다운 태그

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form control</title>
</head>
<body>

	<h2>form control - select</h2>
	<form>
		<fieldset>
			<legend>설문조사</legend>
			<ul>
			<li>
			<label for="name">이름</label>
			<input type="text" id="name" name="name">
			</li>
			<li>
			<label for="bbteam">응원팀</label>
			<input type="text" id="bbteam" list="teamlist">
			<datalist id="teamlist">
				<option value="bears" label="두산베어스"></option>
				<option value="heroes" label="키움히어로즈"></option>
				<option value="wyverns" label="SK와이번스"></option>
				<option value="giants" label="롯데자이언츠"></option>
				<option value="wiz" label="KT위즈"></option>
				<option value="eagles" label="한화이글스"></option>
				<option value="tigers" label="KIA타이거즈"></option>
				<option value="lions" label="삼성라이온즈"></option>
				<option value="twins" label="LG트윈스"></option>
				<option value="dinos" label="NC다이노스"></option>
			</datalist>
			</li>
			</ul>
		</fieldset>
	</form>
</body>
</html>

datalist의 속성값

속성	설명
value	value 사용자가 레이블 선택시 서버로 넘겨질 값
label	사용자를 위해 브라우저에 표시할 레이블, 따로 지정하지 않을 경우 value 값을 레이블로 사용.

textarea(글 상자) Tag

글상자용 tag

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Textarea Sample</title>
</head>
<body>
    <label for="message">Message:</label><br>
    <textarea id="message" name="message" rows="4" cols="50">
        여기에 메시지를 입력하세요.
    </textarea><br>
    <button type="submit">Submit</button>
</body>
</html>

textarea 의 속성

속성	설명
cols	열 크기
row	행 크기
disabled	화면에 표시는 하되 수정할 수 없도록 비활성화 하는 경우

progress(진행 정보) Tag

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form control</title>
</head>
<body>

	<h2>form control - progress</h2>
	<form>
	<ul type="none">
		<li>
			<label>10초 남음</label>
			<progress value="50" max="60"></progress>
		</li>
		<li>
			<label>진행률 30%</label>
			<progress value="30" max="100"></progress>
		</li>
	</ul>
	</form>
</body>
</html>

meter Tag

값이 차지하는 크기를 표기합니다.
`progress`와 비슷하지만, 전체 중에서 차지하는 비중을 차지하므로 차이점이 있습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form control</title>
<style>
	body {
		background-color:#fff; 
	 }
 	 ul li{
		list-style:none; 
		margin: 15px 0;	
		font-size:14px;	
	 }
</style>
</head>
<body>

	<ul>
      <li>
      	<label>점유율 0.8 </label>
	  	<!-- 전체 크기 1을 기준으로 0.8만큼 차지합니다 -->
		<meter value="0.8"></meter>
      </li>
      <li>
      	<label>사용량 64%</label>
		<!-- 전체 100 중에서 64만큼 차지합니다  -->
		<meter min="0" max="100" value="64"></meter>
      </li>
      <li>
      	<label>트래픽 초과</label>
		<!-- 전체 크기는 1024~10240까지인데 높다고 설정한 8192보다 현재 값 9216이 더 큽니다 -->
      	<meter min="1024" max="10240" low="2048" high="8192" value="9216"></meter>        
      </li>
      <li>
      	<label>적절한 트래픽</label>
		<!-- 전체 1 중에서 현재 0.5를 차지하고 있으며 적정도를 0.8로 설정했습니다 -->
        <meter value="0.5" optimum="0.8"></meter>
      </li>
    </ul>
    
</body>
</html>

meter Tag 의 속성

속성	설명
min	최소값
max	최대값
value	범위 내에서 차지하는 값
low	'낮다' 의 기준점이 되는 값
high	'높다' 의 기준점이 되는 값
optimum	'적당’의 기준점이 되는 값 , 이 값이 high보다 크면 클스룩 좋은것, low보다 작으면 작을 수록 좋은 것

공간 분할 요소

HTML에서 사용하는 다양한 태그는 HTML 문서에서 차지하는 영역의 크기가 구분됩니다.

HTML에서는 문서에서 차지하는 공간의 크기를 기준으로

블록 요소(Block Element)와 인라인 요소(Inline Element)로 구분하는데, 각각의 요소의 특징은 아래와 같습니다.

블록 요소(Block Element)와 인라인 요소(Inline Element)

블록 요소(Block Element)

ex. <div/>

css 속성 `display = block` 을 기본으로 갖는 태그로써, 공간을 갖는 `HTML` 태그의 대표
공간을 가지기 때문에 `margin` , `padding` 등의 옵션이 사방으로 적용됩니다.
공간을 가짐 ( = 별도로 설정 안해주면 html 문서에서 한 줄을 차지하며 요소가 배치 됩니다.

인라인 요소(Inline Element)

ex. <span/>

css 속성 `display = inline` 을 기본으로 갖는 태그로써, 공간이 없는 Inline `HTML` 태그의 대표
공간을 가지기 때문에 `margin` 옵션이 좌우로 적용 `padding` 적용이 안됩니다.
공간을 가지지 않기 때문에 별도로 설정 안하면 같은 인라인 요소(like span) 과 붙어서 배치됩니다.

공간 태그의 구분

블록요소(block Element)	인라인요소(inline Element)
div	span
h1~h6	a
p	input
목록(ol, ul) 태그	글자 형식 태그
table
form
li

HTML5 이후 추가된 요소 : `semantic tag`

- div로부터 파생되었습니다.

- div 태그로 일일히 구역을 분할해서 쓰던 것을 이름을 명확히 해줌으로써 가독성을 높인 태그입니다.

semantic Tag의 종류

태그	설명
<header>	헤더(머리말) 지정
<nav>	문서 간의 네비게이션 지정
<aside>	본문 이외의 내용 표시
<section>	본문의 여러 내용(article)을 포함
<article>	본문의 주 내용이 포함
<footer>	제작 정보와 저작권 표시 등을 포함함.

'프론트엔드(Front-End) > HTML&CSS&JavaScript' 카테고리의 다른 글

[CSS] CSS 기초 - CSS의 속성과 플렉스 박스(Flex box) (0)	2024.04.22
[CSS] CSS 기초 - CSS와 선택자(Selector) (1)	2024.04.19
[HTML] HTML 기초 - HTML, 웹(Web), 요소(Element), 속성(Attribute) (0)	2024.04.17

희희낙락

[HTML] HTML 기초 - HTML의 다양한 요소(Element)와 공간 분할 요소

개요

목록형 Tag(ul, li 등)

테이블 태그(Table Tag)

이미지 태그(img, figure)

A Tag(Anchor Tag)

Map Tag

link Tag

iframe

Form Control 요소

Input Tag

드롭다운(drop down) Tag ( select - option)

datalist Tag

textarea(글 상자) Tag

progress(진행 정보) Tag

meter Tag

공간 분할 요소

HTML5 이후 추가된 요소 : `semantic tag`

'프론트엔드(Front-End) > HTML&CSS&JavaScript' 카테고리의 다른 글

티스토리툴바

[HTML] HTML 기초 - HTML의 다양한 요소(Element)와 공간 분할 요소

개요

목록형 Tag(ul, li 등)

테이블 태그(Table Tag)

이미지 태그(img, figure)

A Tag(Anchor Tag)

Map Tag

link Tag

iframe

Form Control 요소

Input Tag

드롭다운(drop down) Tag ( select - option)

datalist Tag

textarea(글 상자) Tag

progress(진행 정보) Tag

meter Tag

공간 분할 요소

HTML5 이후 추가된 요소 : `semantic tag`

'프론트엔드(Front-End) > HTML&CSS&JavaScript' 카테고리의 다른 글

'프론트엔드(Front-End)/HTML&CSS&JavaScript' Related Articles

티스토리툴바