TITLE 태그
<!DOCYTPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 배고파 </title>
</head>
<body></body>
</html>▶ head에 들어갈 내용이 들어가 있다 body 태그
<!DOCYTPE html>
<html>
<head>
<meta charset = "UTF-8">
<TITLE> 배고파 </TITLE>
</head>
<body>
<h1> 오늘 뭐 먹지? </h1>
<p> 추천 받아요 </p>
</body>
</html>
// 이렇게 작성하면 올바른 틀이 갖추어진 HTML/CSS 문서가 된다▶ 상단에 이름을 크게 쓰려면 <h1> 태그를 써야 하고 다음은 보통 글씨를 쓰려면 <p> 태그를 쓴다 앵커 요소
HTML에서 HT(Hyper Text)는 링크를 의미하는 것
링크는 클릭하기만 하면 다른 페이지로 쉽게 이동할 수 있다
앵커 태그는 이런 링크를 생성한다
앵커 태그를 이용해 다른 페이지로 이동하거나 현재 페이지 내에서 특정 위치로 초점을 이동시킬 수 있다
html의 가장 큰 특징이 되는 태그이며 그만큼 중요하고 자주 사용되는 태그
<a>
: andor 태그는 a 태그, 앵커, 링크 등 여러 이름으로 불립니다
* 다른 문서로 이동할 수 있는 링크를 생성한다
<a href=“http://www.naver.com/“ target=“_black”>네이버</a>
href 속성
링크를 만들기 위해 <a> 반드시 href(hypertext reference) 속성을 가지고 있어야 한다
* 링크를 만들기 위해서 앵커는 반드시 한 개의 속성을 가지고 있어야 한다
href 속성의 값은 링크의 목적지가 되는 url이다
Target 속성
링크된 리소스를 어디에 표시할지를 나타내는 속성이다
속성 값으로는 _self, _black, _parent, _top이 있다
_self => 현재 화면에 표시한다, target 속성이 선언되지 않으면 기본적으로 self와 같이 동작함
_blank => 새로운 창에 표시한다는 의미 -> 외부 페이지가 나타나게 끔 하는 속성이다
* parent와 _top은 프레임이라는 특정 조건에서만 동작하는 속성 내부 링크
<a>를 통해 만들어진 링크가 외부 페이지로만 이동하는 것이 아니다
<a>를 통해 페이지 내부의 특정 요소로 초점을 이동할 수도 있는데 이를 내부 링크라고 한다
<a href=“#some-element-id”>회사 소개로 이동하기 </a>
..중략.
<h1 id=“some-element-id”>회사 소개</h1>
보통 페이지에 내용이 많아 스크롤이 길어질 경우, 빠르게 보면 최상단으로 이동하고자 할 때 내부 링크를 주로 사용한다
웹페이지에서 화면 화단에 있는 “top” 또는 “맨 위로 이동하기” 버튼이 이에 해당한다
의미가 없는 컨테이너 요소
* 별 다른 의미 없이 다른 목적으로 필요할 때 사용한다
핵심 키워드 => div(block-level), span(inline-level)
태그 자체에 아무 의미가 없으며 단순히 요소들을 묶기 위해 사용되는 태그
스타일을 주거나 서버에 보내는 데이터를 담기 위한 용도로 이런 의미 없는 요소들이 사용된다
이런 의미 없는 태그의 사용빈도는 매우 높다
그 이유는 html 태그들은 문서를 웹에 나타내기 위해 제작되어 기본적으로 문서에 최적화되어 있는 의미를 지니는 데 현재 웹의 형태는 문서 형태에서 많이 벗어났기 때문이다
가장 대표적으로 많이 쓰이는 의미 없는 태그는 <div>, <span>이다
<div> 태그와 <span> 태그
div(division) 태그 : block-level
Block-level 요소는 기본적으로 한 줄을 생성해서 내용을 표현 span 태그 : inline-level
Inline-level 요소들은 블랙 레벨 요소의 한 줄 안에서 표현되는 요소들
<p> : block-level 태그
그 안에서 텍스트를 꾸며주는 <b>, <i>, <u>, <s>는 모두 inline-level 태그이다
<div>
<span>Lorem</span> ipsum dolor sit.
</div>
<div>, <span> => 모두 아무 의미가 없으므로 실제 브라우저도 별다른 스타일을 적용하지 x
블랙 레벨 요소 => 모니터 화면
블랙 레벨 요소가 표현이 되면 기본적으로 한 줄, 이 라인 하나를 다 채워서 표현
반대로 인라인 레벨 요소들은 라인 위에 이런 식으로 표현이 된다
div 태그는 <div id = "header">나 <div class = "detail">처럼 id나 class 속성을 사용해서 문서 구조를 만들거나 스타일을 적용할 때 사용한다
즉, 영역을 구별하거나 스타일로 문서를 꾸미는 것이다
리스트 요소 리스트 -> 일련 된 항목들이 나열된 것들
콘텐츠가 많은 포털이나 검색 엔진 같은 사이트에는 분야나 항목으로 구분할 것이 많으므로 리스트가 자주 사용된다
상황에 따라 리스트를 표현하는 여러 가지 태그들에 대하여 알아보도록 하겠다
<UI>
UI (unordered list) -> 순서가 없는 리스트를 표현할 때 사용한다
<ul>
<li> 콩나물 </li>
<li> 파 </li>
<li> 국 간장 </li>
…
</ul>* 나열된 항목들이 순서와 상관이 없을 때 쓰는 리스트
콩나물 국에 들어가는 일부 재료들을 나열한 리스트
각 재료는 나오는 순서가 바뀌어도 상관없으므로 이러한 것은 순서가 없는 리스트로 표현할 수 있습니다
<UI>을 선언한 후 그 안에서 <li>를 사용해 각 항목을 나타내서 사용한다
<OI>
OI(Ordered List) 태그는 순서가 있는 리스트를 표현할 때 사용한다
<ol>
<li> 냄비에 국물용 멸치를 넣고 한소끔 끓여 멸치 육수를 7컵(1,400ml) 만든다. </li>
<li> 콩나물을 넣고 뚜껑을 덮어 콩나물이 익을 때까지 끓인다. </li>
<li> 뚜껑을 열고 대파, 마늘, 고춧가루를 넣고 끓인다 </li>
…
<ol>콩나물을 끓이는 순서를 나열한 리스트
이 순서는 서로 바뀌면 안 되기 때문에 순서가 있는 <OI>을 사용해야 한다.
<OI>를 선언한 후 그 안에서 <li>를 사용해 각 항목을 나타내서 사용한다
<ol> 태그의 속성 값
| 종류 | 설명 |
| type = "1" | 숫자(기본값) |
| type = "a" | 영문 소문자 |
| type = "A" | 영문 대문자 |
| type = "i" | 로마 숫자 소문자 |
| type = "I" | 로마 숫자 대문자 |
순서 목록은 기본적으로 '1'부터 시작하지만 start 속성을 사용해서 시작 번호를 바꿀 수도 있다 여러 개의 순서 있는 목록을 연결하여 번호를 붙여야 할 경우 start 속성을 사용하여 원하는 번호부터 시작하면 됩니다
<dl>
dl (definition / description list) 태그는 용어와 그에 대한 정의를 표현할 때 사용
<dl>은 앞서 배운 <UI>, <OI>과는 구조가 조금 다르다
<UI>, <OI>은 항목을 단순히 나열되는 구조지만
<di>은 용어와 설명이 하나의 세트로 항목을 이루고 하나 이상의 항목으로 리스트가 이루어지는 구조
<dl>
<dt> 이름 </dt>
<dd> 값 <dd>
</dl><di>
<dt> 리플리 증후군 </dt>
<dd>허구의 세계의 진실이라 믿고 거짓된 말과 행동을 상습적으로 반복하는 반사회적 성격장애를 뜻하는 용어 </dd>
<dt>피그말리온 효과</dt>
<dd>타인의 기대나 관심으로 인하여 능률이 오르거나 결과가 좋아지는 현상</dd>
<dt>언더독 효과</dt>
<dd>사람들이 약자라고 믿는 주체를 응원하게 되는 현상</dd>
<di>
*<dt> : 용어를 나타내는 태그
* <dd> : 용어에 대한 정의 또는 설명을 나타내는 태그, 용어 하나에 여러 정의가 들어갈 때, <dd>를 한 개 이상 쓰는 것이 가능하다
* ol-li (항목)
<di> : 용어를 설명하는 리스트
<dt> : 용어 구분
<dd> : 용어 정의
* <OI> 태그 -> 부모 태그
<li> 태그 -> 자식 태그
* <oi> 태그의 자식으로는 <li> 태그만 올 수가 있다
* <div> 태그, <p> 태그 같은 거는 올 수 없다. 반드시 <li> 태그만 올 수 있다 하지만 <li> 태그에는 자식으로 다른 요소들이 들어올 수가 있다
이미지 요소
웹 -> 시각적인 효과와 더불어 효과적인 정보전달을 위해 다양한 이미지를 삽입하고 있다.
문서에 이미지를 삽입할 수 있는 img 태그에 대해 알아보도록 하자
<img>
<img> => 문서에 이미지를 삽입하는 태그, 닫는 태그가 없는 빈 태그
<img src=“./images/pizza.png” alt=“피자”>./images/pizza.png -> 상대 경로, 현재 위치에서 이미지 폴더 안에 있는 피자 이미지 파일을 불러오고 있다는 것을 알 수 있다
src 속성
<img>의 필수 속성으로 이미지의 경로를 나타내는 속성
-> 상대 경로 / 절대 경로
상대 경로 : 현재 웹 문서의 페이지를 기준으로 상대적으로 이미지의 위치를 나타내는 경로 (같은 이미지를 삽입하더라도 불러오는 페이지의 위치에 따라서 이미지의 주소가 달라질 수 있다)
절대 경로 : 실제 그 이미지가 위치해 있는 곳의 상대적으로 이미지의 위치를 나타내는 경로(전체 경로) / 어느 페이지에 불러오더라도 항상 같은 주소를 가지게 된다
* 상대 경로를 쓸 때는 . 을 이용한다
./ -> 현제 페이지가 있는 폴더를 나타낸다
생략”()”도 가능, “.”을 두 개 찍게 되면 상위 폴더로 한번 이동하는 명령
../ 폴더를 두 번 위로 이동하려면 ../../ 이런 식으로 두 번 반복하면 된다
반대로 현재 폴더에서 하위 폴더로 갈 때는 단순히 폴더명만 적어주면 된다
“folder/(여기에 이미지 파일을 적어주면 된다)”
alt 속성
이미지와 대체 텍스트를 나타내는 속성
대체 텍스트는 이미지를 대체하는 글을 뜻하며 웹 접근성 측면에서 중요한 속성
src 속성과 더불어 반드시 들어가야 하는 속성 * 대체 텍스트 : 이미지를 설명하는 글을 애기한다. 일반적인 상황에 노출 시키지 않는다
width/height 속성
이미지의 가로/세로 크기를 지정하는 속성
값의 단위는 필요하지 않으며 값을 입력하면 자동으로 픽셀 단위로 계산됨
width/height는 선택적인 속성이지만 이미지의 크기가 고정적이라면 width/height 속성이 선언하는 것이 성능적인 측면에서 좋다
width/height 속성이 없으면 이미지는 원본 크기대로 노출되며, 둘 중 하나만 선언하면 나머지 한 속성은 선언한 속성의 크기에 맞춰 둘 중 하나만 선언하면 나머지 한 속성은 선언한 속성의 크기에 맞춰 자동으로 비율에 맞게 변경된다
상대 경로와 절대 경로 src 속성에는 이미지의 경로가 들어가며, 이미지의 상대 경로와 절대 경로가 있다
상대 경로 => 현재 웹 페이지를 기준으로 상대적으로 이미지의 위치를 나타내는 경로
절대 경로 => 실제 그 이미지가 위치한 곳의 전체 경로이다
* 절대 경로는 이미지의 전체 경로를 다 적어줘야 한다
// 상대경로
<img src=“./images/pizza.png” alt=“피자”>
// 절대경로
<img src = “C:/users/document/images/pizza.png” alt=“피자”>
<img src = “http://www.naver.com/pizza.png” alt=“피자”>
상대 경로엥서의 “./“ 는 페이지가 있는 현재 폴더를 나타낸다
이미지 파일 형식
gif : 제한적인 색(256색)을 사용하고 용량이 적으며 투명 이미지와 애니메이션 이미지를 지원하는 형식
jpg : 사진이나 일반적인 그림에 쓰이며 높은 압축률과 자연스러운 색상 표현을 지원하는 형식 ( 투명을 지원하지 않는다)
png : 이미지 손실이 적으며 투명과 반투명 모두 지원하는 방식
- % : 이미지 크기의 값을 퍼센트(%)로 지정하면 현재 브라우저 창의 너비와 높이를 기준으로 이미지 크기를 결정한다 (ex. Width = “50%”)
- Px : 이미지 크기의 값을 픽셀 (px)로 지정하면 이미지의 너비나 높이를 해당 픽셀 크기만큼 표시한다 (ex. Width = “150”)
* 이미지 크기는 css를 통해서 제어를 함
-> 왜냐하면 이미지가 항상 고정적인 크기를 유지하는 것이 아니다
화면의 크기에 따라 같이 크기가 커지거나 작아지거나 이렇게 유동적으로 변하는 경우가 많이 있다
만약 이미지의 크기가 고정적이라면 이 width와 height의 속성을 써주는 게 성능적인 측면에서 더 좋다 <body style = “background-color : black”> -> 검정색
테이블 요소
<table> => 이름에서 느껴지는 바와 같이 데이터를 표로 나타낼 때 사용되는 태그
복잡한 데이터들을 기술할 때 표를 많이 사용한다
표의 구성 요소
표 -> 셀 (내용이 들어가는 하나의 칸)로 이루어져있다
행 (가로 방향) -> row
열 (세로 방향) -> column
* 행이나 열을 합치는 rowspan, colspan 속성 알아보기
- 행을 합치려면 rowspan 속성을 사용하고 열을 합치려면 colspan 속성을 사용해서 몇 개의 셀을 합칠지 지정하면 된다
<td rowspan = "합칠 셀의 개수"> 셀의 내용 </td>
// 행을 합칠 때 쓰는 rowspan 속성
<td colspan = "합칠 셀의 개수"> 셀의 내용 </td>
// 열을 합칠 때 쓰는 colspan 속성
<table> : 표를 나타내는 태그
<tr> : 행을 나타내는 태그
<th> : 제목 셀을 나타내는 태그
<td> : 셀을 나타내는 태그
하나의 <table> -> 하나 이상의 <tr>로 이루어짐
<tr> -> 셀을 나타내는 <th>,<td>를 자식으로 가지게 됨
표를 구성할 때는 위에서 밑으로 좌측에서 우측으로 작성하면 된다
1부터 16을 표현한 4행 4열의 표를 나타내는 코드
브라우저 화면을 확인해보면 테두리가 없어 표가 어색해 보일 수 있다
브라우저에서 제공하는 테이블의 기본 스타일에는 테두리가 없기 때문이다
확인을 위해 아래의 css 코드를 <head> 안에 입력하면 테두리가 나타나는 걸 확인할 수 있다
<style>
th, td { border: 1px solid; }
</style>
표의 구조와 관련된 태그
표가 복잡해지면 표를 해석해서 음성으로 전달해야 하는 스크린 리더기와 같은 보조 기기를 통해서는 표의 내용을 이해하는 것이 더욱 어려워질 것이다
따라서 표를 구조적으로 파악하기 위해 도움이 되는 태그를 사용해야 한다
<caption> : 표의 제목을 나타내는 태그
<thead> : 제목 행을 그룹화하는 태그
<tfoot> : 바닥 행을 그룹화하는 태그
<tbody> : 본문 행을 그룹화하는 태그
* <caption>는 <table> 태그의 자식으로 가장 위에 선언이 되어야 한다
<tfoot>은 <thead> 다음에 있지만 실제 화면에서는 표 아래에 위치하게 된다
테이블 요소 2
복잡한 표 만들기
폼을 만드는 <form> 태그
<form [속성="속성값"]>여러 폼 요소</form>
자동 완성 기능 끄기
<form action=“” autocomplete=“off”>
/ * 여러 폼 요소 */
</form>
폼 요소를 그룹으로 묶는 <fieldset>, <legend> 태그
<fieldset>
<legend>그룹 이름</legend>
</fieldset>
* 하나의 폼 안에서 여러 구역을 나누어 표시할 때 <fieidset> 태그를 사용합니다
* <legend> 태그는 다음과 같이 <fieldset> 태그로 묶는 그룹에 제목을 붙일 수 있습니다
폼 요소에 레이블을 붙이는 <label> 태그
<!-- 첫 번째 방법 -->
<label>레이블명<input></label>
<!-- 두 번째 방법 -->
<label for="id명">레이블명<input id="id명"></label>
* <label> 태그는 <input> 태그와 같은 폼 요소에 레이블을 붙일 때 사용합니다.
* <label> 태그는 2가지 방법으로 사용할 수 있습니다
첫 번째 방법은 태그 안에 폼 요소를 넣는 것입니다.
두 번째 방법은 <label> 태그와 폼 요소를 따로 사용하고 <label> 태그의 for 속성과 폼 요소의 id 속성을 이용해 서로 연결하는 것입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>레드향 주문하기</title>
</head>
<body>
<h1>레드향 주문하기</h1>
<form action="">
<fieldset>
<legend>상품 선택</legend>
</fieldset>
<fieldset>
<legend>배송 정보</legend>
</fieldset>
</form>
<form>
<label for = "user-id"> 아이디 (6자 이상) </label>
<input type="text" id="user-id">
</form>
</body
* “user-id”의 값을 똑같이 설정해야 연결됩니다
폼 요소 1
폼 요소 -> 서버에 데이터를 전달하기 위한 요소
method 속성의 방식으로 action 속성 장소에 데이터를 전달
<form action=“전송 위치“, method=“전송 방식”>
</form>
// 전송 위치 : 데이터를 전달할 목적지
// 전송 방식 : GET -> 주소에 데이터를 직접 입력해 전달, post -> 별도의 방법을 사용해 데이터를 해당 주소로 전달
<input> -> 대표적인 폼 요소
<input> -> 내용이 없는 빈 요소
type 속성을 통해 여러 종류의 입력 양식으로 나타나게 된다
* <input type=“..”>
*type 속성의 값 => text, password, radio, checkbox, file, image, submit, reset, button.. * type = “text”
<input type=“text” placeholder”o o o”>
주로 아이디, 이름, 주소, 전화번호 등 단순한 텍스트를 입력할 때 사용
type = “text” -> placeholder 속성이 존재함
placeholder 속성 -> 사용자가 입력하기 전 미리 화면에 노출하는 값, 입력하는 값의 양식을 표현할 수 있다 * type = “password”
<input type=“password”>암호와 같이 공개할 때 사용함
화면에는 type = “text”와 같게 나타나지만 실제로 입력할 때 값을 노출하지 않는다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>로그인</title>
</head>
<body>
<form>
<fieldset>
<label>아이디:
<input type="text" id="user_id" size="10">
</label>
<label>비밀번호:
<input type="password">
<input id="user_pw" size="10">
</label>
<input type="submit" value="로그인">
</fieldset>
</form>
</body>
</html>
태그의 type 속성
다양한 용도에 맞게 입력하는 type="search", type="url", type="email", type="tel"
텍스트 필드에서 세분화된 필드는 PC용 웹 브라우저에서는 큰 변화가 없는 것처럼 보입니다. 하지만 모바일 기기의 웹 브라우저에서 확인하면 이메일 주소를 입력하거나 전화번호를 입력할 때 가상 키보드 배열이 바뀌는 것을 볼 수 있습니다.
<input type="search">
<input type="url">
<input type="email">
<input type="tel">
search 속성은 검색할 때 입력하는 필드를 넣을 때 사용합니다.
url 속성은 웹 주소를 입력하는 필드를 넣을 때 사용합니다.
email 속성은 이메일 주소를 입력하는 필드를 넣을 때 사용합니다.
tel 속성은 전화번호를 입력하는 필드를 넣을 때 사용합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>레드향 주문하기</title>
</head>
<body>
<h1>레드향 주문하기</h1>
<form action="">
<fieldset>
<legend>상품 선택</legend>
</fieldset>
<fieldset>
<legend>배송 정보</legend>
<ul>
<li>
<label for="user-name">이름 </label>
<input type="text" id="user-name">
</li>
<li>
<label for="addr">배송 주소</label>
<input type="text" id="addr">
</li>
<li>
<label for="mail">이메일</label>
<input type="email" id="mail">
</li>
<li>
<label for="phone">연락처</label>
<input type ="tel" id="phone">
</li>
</ul>
</fieldset>
</form>
</body>
</html>
* type = “radio”
<input type=“radio” name=“gender”> 남자
<input type=“radio” name=“gender”> 여자라디오 버튼을 만들 때 사용한다
라디오 버튼을 중복 선택이 불가능하며 하나의 항목만을 선택해야 한다
* type = “checkbox”
<input type=“checkbox” name=“hobby”> 등산
<input type=“checkbox” name=”hobby”> 독서
<input type=“checkbox” name=“hobby”> 운동체크박스를 만들 때 사용함
체크박스 -> 중복선택이 가능
라디오 버튼과 체크 박스 -> checked, name 속성이 존재함
checked 속성 -> 값이 별도로 존재하지 않는 boolean 속성이다
boolean 속성 -> true/false 둘 중 하나의 값을 가지며 속성이 존재하면 true, 속성이 존재하지 않으면 false
name 속성 -> 라디오 버튼과 체크박스를 그룹화 시켜주는 속성이다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>레드향 주문하기</title>
</head>
<body>
<h1>레드향 주문하기</h1>
<form action="">
<fieldset>
<legend>상품 선택</legend>
<p><b>주문할 상품을 선택해 주세요.</b></p>
<label><input type="checkbox" value="s_3">선물용 3kg</label>
<label><input type="checkbox" value="s_5">선물용 5kg</label>
<label><input type="checkbox" value="f_3">가정용 3kg</label>
<label><input type="checkbox" value="f_3">가정용 5kg</label>
<p><b>포장 선택</b></p>
<input type="radio" name="gift" value="yes">
<input type="redio" name="gift" value="no">
<label><input type="radio" value="yes">선물 포장</label>
<label><input type="radio" value="no">선물 포장 안 함</label>
</fieldset>
</form>
</body>
</html>
<input> 태그의 type 속성
숫자 입력 필드를 나타내는 type="number", type="range"
<input type="number">
<input type="range">
number 속성을 사용하면 스핀 박스가 나타나면서 숫자를 선택할 수 있습니다.
range 속성을 사용하면 슬라이드 막대를 움직여 숫자를 입력할 수 있습니다.
숫자 입력 필드에서 사용하는 속성
폼 요소2
type = ‘file’
<input type=“file”>파일을 서버에 올릴 때 사용한다
브라우저에 따라 표현되는 형태는 조금씩 다르지만 모두 같은 역할을 한다
* type = “submit|reset|image|button”
Submit : form의 값을 전송하는 버튼
reset : form의 값을 초기화하는 버튼
<input type="submit | reset" value="버튼에 표시할 내용">
image : 이미지를 삽입할 수 있는 버튼 (submit과 동작이 동일함)
<input type="image" src="이미지 경로" alt="대체 텍스트">
button : 아무 기능이 없는 버튼 이미지 버튼을 이미지 관련 속성인 src, alt 속성이 반드시 필요하며 width/heigt 속성을 적용할 수도 있다
* button type -> 아무런 기본 동작도 주어지지 않는 그런 버튼
submit과 reset, button type ->모두 value라는 속성으로 이 버튼의 이름들도 변경 폼 요소 3 <select>
- 선택 목록 상자 또는 콤보 박스
몇 개의 선택지를 리스트 형태로 노출하고 그 중 하나를 선택할 수 있게 하는 태그이다
(multiple 속성을 사용하면 다중 선택도 가능)
<select>
<option>서울</option>
<option>경기</option>
<option>강원</option>
…
</select><select> 내부의 <option>으로 각 항목을 나타낸다
<option>의 속성으로 selected가 있으며 이는 선택된 항목을 의미
<text area>
한 줄만을 입력할 수 있는 <input type = “text”>와 달리 여러 줄의 텍스트를 입력할 때 사용한다
<textarea rows=“5” cols=“30”>
…
</textarea><textarea> -> 텍스트 상자의 크기를 조절하는 rows, cols 속성이 있다
- cols -> 가로 크기를 조절하는 속성 (한 줄에 들어가는 글자의 수, 수치의 의미는 평균적인 글자의 너비로 정확히 글자 수를 나타내지는 않는다)
- rows -> 세로 크기를 조절하는 속성 (화면에 보여지는 줄 수)
<button>
버튼을 만들 때 사용하며 submit, reset, button 3가지의 타입이 있다
<button type=“submit|reset|button”> ooo </button>각 버튼을 input 타입의 submit, reset, button과 모두 같은 기능을 가진 버튼이다
다만, 빈 태그가 아니며 내용을 안에 직접 넣을 수 있으므로 좀 더 자유로운 스타일 표현이 가능하다
기본 버튼을 나타내는 type=“button”
<input type="button" value="버튼에 표시할 내용">
button 속성은 기능이 없고 오직 버튼 형태만 삽입합니다.
주로 버튼을 클릭해서 자바스크립트를 실행할 때 사용합니다.
<input type="button" value="공지 창 열기" onclick="window.open('notice.html')">
- 인용할 때 쓰는 <blockquote> 태그
큰 따옴표("") 대신 쓸 blockquote 태그
<blockquote>인용문</blockquote>웹 브라우저는 <blockquote> 태그 안의 내용을 인용문으로 알고 다른 텍스트보다 약간 들여쓴다
- 텍스트를 굵게 표시하려면 <strong>, <b> 태그
<strong> 굵게 강조할 텍스트 </strong>
<b> 굵게 표시할 텍스트 </b>경고나 주의 사항처럼 중요한 내용을 강조해야할 때는 <strong> 태그를 키워드처럼 단순히 글자만 굵게 표시할 때는 <b> 태그를 사용한다
보이는 것이 아니라 의미가 중심
- 기울인 텍스트를 입력해주는 <em>, <i> 태그
<em> 이탤릭체로 강조할 텍스트 </em>
<i> 이탤릭체로 표시할 텍스트 </i>
em : 강조를 뜻함, 문장에서 흐름상 특정 부분을 강조하고 싶을 때 사용
i : 이탤릭체, 즉 기울기체 / 마음속의 생각이나 용어, 관용구 등에 사용함, 단순히 다른 텍스트와 구별하기 위해 기울여서 표시
오디오와 비디오 삽입하기
다양한 멀티미디어 파일을 삽입할 때 쓰는 <object>, <embed> 태그
<object width="너비" height="높이" data="파일"></object>
* data 속성에 보여 줄 멀티미디어 파일을 지정하고 width, height 속성을 사용해 플레이어 크기를 지정한다
<embed src="파일 경로" width="너비" height="높이">
* HTML의 <audio>, <video>, <object> 태그를 지원하지 않는 웹 브라우저를 고려해야 하면 <embed> 태그를 사용해서 멀티미디어 파일을 삽입한다
오디오와 비디오 파일을 삽입하는 <audio>, <video> 태그
HTML5에서는 웹 브라우저 안에서 멀티미디어 파일을 삽입하고 바로 재생할 수 있습니다
<audio src="오디오 파일 경로"></audio>
<video src="비디오 파일 경로"></video>
* 배경 음악이나 효과음 등 비디오 파일을 삽입할 때는 <audio> 태그를 사용하고, 비디오 파일을 삽입할 때는 <video> 태그를 사용합니다
* <audio>, <video> 태그의 속성
다양한 텍스트 관련 태그
| 종류 | 설명 | 예시 |
| <abbr> | 줄임말을 표시하고 title 속성을 함께 사용할 수 있습니다 | <abbr title = "Internet of Things"> IoT</abbr> |
| <cite> | 웹 문서나 포스트에서 참고 내용을 표시합니다 | <p> 내가 경험한 가장 흥미진진한 일은 누군가 만나는 일이다 - 영화, <cite>'비포선셋'</cite> 중 </p> |
| <code> | 컴퓨터 인식을 위한 소스코드입니다 | <code>function savetheLocal( ) </code> |
| <smail> | 부가 정보처럼 작게 표시해도 되는 텍스트입니다 | <p>가격 : 13,000원 <small>(부가세 별도)</small><p> |
| <sub> | 아래 첨자를 표시한다 | <p>물의 화학식은 H<sub>2</sub>0입니다</p> |
| <sup> | 위 첨자를 표시한다 | <p>E = mc <sup> 2 </sup></p> |
| <s> | 취소선을 표시한다 | <p><s>34,000원</s>19,000원</p> |
| <u> | 밑줄을 표시한다 | <u>텍스트에 단순히 밑줄 긋기</u> |
| <ins> | 공동 작업 문서에서 새로운 내용을 삽입한다 | <ins>새로운 내용을 삽입합니다</ins> |
| <del> | 공동 작성 문서에서 기존 내용을 삭제한다 | <del>기존 내용을 삭제합니다</del> |
하이퍼링크 삽입하기
링크를 삽입하는 <a> 태그와 href 속성
<a href="링크할 주소">텍스트 또는 이미지</a>
* 텍스트 링크 만들기
텍스트 링크는 <a>와 </a> 태그 사이에 링크로 만들 텍스트를 입력하면 텍스트에 링크를 만들 수 있습니다 * 이미지 링크 만들기
<a>와 </a> 태그 사이에 <img> 태그를 넣으면 이미지에 링크를 만들 수 있습니다 * target 속성에 _blank 를 지정하면 링크에 연결된 문서가 새 탭에서 열립니다
날짜 입력을 나타내는 type=“date”, type=“month”, type=“week”
<input type="date | month | week">
type="date" 로 지정하면 달력에서 날짜를 선택해서 입력할 수 있습니다. 날짜를 선택하면 필드에 “yyyy-mm-dd” 형식으로 연도, 월, 일이 표시됩니다.
type="month" 로 지정하면 달력에서 월을 선택해서 입력할 수 있습니다. 월을 선택하면 “yyyy-mm” 형식으로 연도, 월까지만 입력됩니다.
type="week" 로 지정하면 달력에서 주를 선택해서 입력할 수 있습니다. 주를 선택하면 1월 첫째 주를 기준으로 몇 번째 주인지 표시됩니다.
시간 입력을 나타내는 type="time", type="datetime", type="datetime-local"
<input type="time | datetime | datetime-local">
**type="time"**은 폼에서 시간을 입력하게 합니다.
type="datetime" 또는 type="datetime-local" 유형을 사용하면 사용자가 웹 문서를 보고 있는 지역에 맞는 날짜와 시간을 함께 입력할 수 있습니다.
날짜와 시간의 범위를 지정하는 속성 | 종류 | 설명 |
| ——– | ——– |
| min | 범위의 시작 날짜나 시간을 제한합니다. |
| max | 범위의 마지막 날짜나 시간을 제한합니다. |
| step | 스핀 박스의 화살표를 클릭했을 때 증감시킬 크기를 지정합니다. |
| value | 기본적으로 표시할 날짜나 시간을 지정합니다. |
히든 필드 만들 때 사용하는 type=“hidden”
<input type="hidden" name="이름" value="서버로 넘길 값">
- 히든 필드는 화면의 폼에는 보이지 않지만 사용자가 입력을 마치면 폼과 함께 서버로 전송되는 요소입니다.
<input> 태그의 주요 속성 (1)
- 자동으로 입력 커서를 갖다 놓는 autofocus 속성
<input type=텍스트-입력-필드 autofocus required>- autofocus 속성을 사용하면 페이지를 불러오자마자 폼에서 원하는 요소에 마우스 포인터를 표시할 수 있습니다.
- 힌트를 표시해주는 placeholder 속성
- placeholder 속성을 사용하면 사용자가 텍스트를 입력할 때 입력란에 적당한 힌트 내용을 표시해서 그 필드를 클릭하면 내용이 사라지도록 만들 수 있습니다.
<input type=텍스트-입력-필드 placeholder="하이픈 빼고 입력해 주세요.(01012345678)" required>
<input> 태그의 주요 속성(2)
읽기 전용 필드를 만들어 주는 readonly 속성
<input type=텍스트-입력-필드 readonly>
- readonly 속성은 해당 필드를 읽기 전용으로 바꿉니다.
- readonly 속성은 간단히 readonly라고만 쓰거나 readonly="readonly", 또는 readonly="true"로 지정합니다.
필수 입력 필드를 지정하는 required 속성
- equired 속성은 해당 필드를 필수 필드로 바꿉니다.
- required 속성은 간단히 required라고만 쓰거나 required="required"로 지정합니다.
폼에서 사용하는 여러 가지 태그 (1)
여러 줄을 입력하는 텍스트 영역 <textarea> 태그
textarea : 텍스트 영역
<textarea>내용</textarea>
- <textarea> 태그를 사용하여 폼에서 텍스트를 여러 줄 입력하는 영역을 만들 수 있습니다.
- <textarea> 태그에서는 너비 크기를 지정하는 cols 속성과 화면에 텍스트를 몇 줄 표시할지 지정하는 rows 속성을 사용합니다.
* cols에서 지정하는 글자 수는 영문자를 기준으로 한다
| 종류 | 설명 |
| cols | 텍스트 영역의 가로 너비를 문자 단위로 지정합니다 |
| rows | 텍스트 영역의 세로 길이를 줄 단위로 지정합니다. 지정한 숫자보다 줄 개수가 많아지면 스크롤 막대가 생깁니다 |
폼에서 사용하는 여러 가지 태그 (2)
드롭다운 목록을 만들어 주는 <select>, <option> 태그
드롭다운 목록은 목록을 클릭했을 때 옵션이 요소 아래쪽으로 펼쳐져서 붙인 이름입니다
<select>
<option value="값1">내용1</option>
<option value="값2">내용2</option>
......
</select>- <select> 태그로 드롭다운 목록의 시작과 끝을 표시하고, 그 안에 <option> 태그를 사용해 드롭다운 목록을 표시합니다.
- <option> 태그에는 value 속성을 이용해 서버로 넘겨주는 값을 지정합니다.
- <select> 태그의 속성
종류 설명
| size | 화면에 표시할 드롭다운 항목의 개수를 지정합니다. |
| multiple | 드롭다운 목록에서 둘 이상의 항목을 선택할 때 사용합니다. |
<option> 태그의 속성
종류 설명
| value | 해당 항목을 선택할 때 서버로 넘겨줄 값을 지정합니다. |
| selected | 드롭다운 메뉴를 삽입할 때 기본적으로 선택해서 보여 줄 항목을 지정합니다. |
데이터 목록 만들어 주는 <datalist>, <option> 태그
데이터 목록을 사용하면 텍스트 필드에 값을 직접 입력하지 않고 미리 만들어 놓은 값 중에서 선택할 수 있습니다.
<input type="text" list="데이터 목록 id">
<datalist id="데이터 목록 id">
<option value="서버로 넘길 값1">선택 옵션1</option>
<option value="서버로 넘길 값2">선택 옵션2</option>
</datalist>
Copy- <datalist> 태그를 이용해 데이터 목록의 시작과 끝을 표시하고 그 사이에 <option> 태그를 사용해 각 데이터의 옵션을 표시하여 데이터 목록을 표시합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>레드향 주문하기</title>
<style>
hr {
visibility: hidden;
}
</style>
</head>
<body>
<h1>여러 데이터 나열하기</h1>
<form action="">
<!-- 드롭 다운 목록 -->
<label for="prod1">상품 선택</label>
<select id="prod1">
<option value="special_3" selected>선물용 3kg</option>
<option value="special_5">선물용 5kg</option>
<option value="family_3">가정용 3kg</option>
<option value="family_5">가정용 5kg</option>
</select>
<hr>
<!-- 데이터 목록 -->
<label for="prod2">포장 여부 </label>
<input type="text" id="prod2" list="pack">
<datalist id="pack">
<!--지시사항을 수행해보세요-->
<option value="package">선물 포장</option>
<option value="nopackage">포장 안함</option>
</datalist>
</form>
</body>
</html>폼에서 사용하는 여러 가지 태그 (3)
버튼을 만들어 주는 <button> 태그
<button type="submit">내용</button>
<button type="reset">내용</button>
<button type="button">내용</button>
Copy- <button> 태그를 이용하여 폼을 전송하거나 리셋하는 버튼을 삽입할 수 있습니다.
- <button> 태그에는 콘텐츠를 포함할 수 있어서 아이콘을 추가하거나 CSS를 이용해 원하는 형태로 꾸밀 수도 있습니다.
- <button> 태그의 type 속성
- 종류 설명
submit 폼을 서버로 전송합니다. <input type="submit">과 같은 기능을 합니다. reset 폼에 입력한 내용을 초기화합니다. <input type="reset">과 같은 기능을 합니다. button 버튼 형태만 만들 뿐 자체 기능은 없습니다. <input type="button">과 같은 기능을 합니다.
HTML 전체를 사용하는 block
내가 가지고 있는 만큼만 표현되는 inline, css의 display 속성값으로 변경할 수 있는 inline-block으로 구성되어 있다
block => <div>, <section>,<acticle>, <aside>와 같이 주로 레이아웃을 결정하는 html sectionning 태그로 일반적으로 줄 바꿈이 되는 요소를 의미한다
'Full-Stack > HTML' 카테고리의 다른 글
| 검색 엔진 최적화와 HTML (0) | 2024.07.29 |
|---|---|
| HTML - 1 (0) | 2022.08.01 |
