본문 바로가기
원.더.풀 프로젝트/HTML,CSS

원더풀 프로젝트_HTML 5

by _JMY_ 2020. 3. 14.

 

 

#HTML 시맨틱 태그

 

 

  • 시맨틱 태그(semantic tag)

 

관련링크: https://www.w3schools.com/html/html5_semantic_elements.asp

Semantic elements = elements with a meaning.

What are Semantic Elements?

A semantic element clearly describes its meaning to both the browser and the developer. Examples of non-semantic elements: <div> and <span> - Tells nothing about its content. Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content.

: 시맨틱 요소 = 의미있는 요소들

시맨틱 요소는 시맨틱 브라우저와 개발자 모두에게 그 의미를 명확하게 설명한다.
비시맨틱 요소의 예: <div>와 <span> - 그 내용에 대해서는 아무것도 말하지 않는다.
시맨틱 요소의 예: <form>, <table>, <article> - 그 내용을 명확하게 정의한다.

 

 

 

 

  • <header> : 페이지나 섹션의 머리말 표현. 페이지 제목, 페이지를 소개하는 간단한 설명.
  • <nav> : 하이퍼링크들을 모아놓은 특별한 섹션. 페이지 내 목차를 만드는 용도.
  • <section> : 문서의 장(Chapter, section) 혹은 절을 구성하는 역할. 일반 문서에 여러 장이 있듯이 웹 페이지에 여러 섹션 가능. 헤딩 태그(<h1>~<h6>)를 사용해 절 혹은 섹션의 주제 기입
  • <article> : 본문과 연관 있지만, 독립적인 콘텐츠를 담는 영역 혹은 보조 기사, 블로그 포스트, 댓글 등 기타 독립적인 내용. <article>에 담는 내용이 많은 경우 여러 <section> 둘 수 있음.
  • <aside> : 본문에서 약간 벗어난 노트나 팁. 신문, 잡지에서 주요 기사 옆 관련 기사, 삽입 어구로 표시된 논평 등 페이지의 오른쪽이나 왼쪽에 주로 배치.
  • <footer> : 꼬리말 영역, 주로 저자나 저작권 정보.

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 문서 구조 시맨틱 태그 사용</title>
<style>
    html,body {margin:0; padding:0; height:100%;}
    .header{width:100%; height:15%;background:yellow;}
    .nav{width:15%; height:70%; float:left; background:orange;}
    .section{width:70%; height: 70%; float:left;background:olivedrab;}
    .aside{width:15%; height: 70%; float:left;
    background:orange;}
    .footer{width:100%; height:15%; clear:both; 
    background:plum;}
</style>
</head>
<body>
    <header class="header">header</header>
    <nav class="nav">nav</nav>
    <section class="section">section</section>
    <aside class="aside">aside</aside>
    <footer class="footer">footer</footer>
</body>
</html>

 

+) HTML5에서 제거된 태그

-다음 태그들은 문서의 시맨틱 구조를 저해한다는 이유로 HTML5에서 제거.

: <center>, <big>, <dir>,<font>,<tt>,<u>,<xmp>,<acronym>,<applet>,<basefont>,<frame>,<frameset>,<noframes>,<strike>

 

#<form> 태그

 

  • <form> 태그
<form 
action="웹 서버 응용 프로그램의 URL"
enctype="데이터의 인코딩 타입"
method="get|post"
name="폼 이름"
target="윈도우 이름"
>
</form>

 

  • action : 폼 데이터를 처리할 웹 서버 응용 프로그램 이름 URL
  • enctype : 폼 데이터를 웹 서버로 전송할 때 암호화 방식 지정
  • method : 폼 데이터를 웹 서버에 전송하는 방식
  • target : 웹 서버 응용프로그램으로부터 전송받은 데이터(HTML 문서나 이미지)를 출력할 윈도우 이름.

 

  • 폼 요소의 종류

 

  • <input type="text"> : 한 줄 텍스트 입력 창
  • <input type="password"> : 암호 입력을 위한 한 줄 텍스트 입력 창
  • section : 드롭다운 리스트를 가진 콤보박스
  • <input type="image"> : 이미지 버튼
  • <input type="checkbox|radio"> :체크박스와 라디오 버튼
  • <input type="button"> : 단순 버튼
  • <input type="submit"> : 웹 서버로 폼 데이터를 전송시키는 버튼
  • <input type="reset"> : 입력된 폼 데이터를 초기화시키는 버튼
  • <textarea> : 여러 줄의 텍스트 입력창
  • <input type="color"> : 색 입력을 쉽게 하는 컬러 다이얼 로그
  • <button type="button | reset | submit"> : 단순 버튼, reset, submit 버튼

 

 

<html>
<head><title>form tag</title></head>
<body>
<h3>form tag(데이터 목록을 가진 텍스트 입력, 버튼이 있는 입력 폼, 체크 박스와 라디오 버튼 만들기, 콤보 박스 만들기,캡션을 가진 라디오 버튼)</h3><hr>
<form>
name:<input type="text" name="n1" value="honggildong"><hr>
pwd:<input type="password" name="p1" maxlength="6" value="123456"><hr>
자기소개서: <textarea name="t1" cols="30" row="10">자기소개서 쓰기</textarea><hr>
여행지 : <input type="text" name="n2" list="travel">
<datalist id="travel">
<option value="경주">
<option value="제주도">
<option value="포항">
<option value="부산">    
</datalist><hr>
<h3>단풍지</h3>
<select name="s1" multiple>
<option value="설악산">설악산
<option value="속리산">속리산
<option value="내장산">내장산
<option value="치악산">치악산
</select><hr>
<select name="s2" multiple>
<optgroup label="선호 과목">
    <option value="HTML">HTML
    <option value="css">CSS
    <option value="Javascript">Javascript
</optgroup>
<optgroup label="기피 과목">
    <option value="영어">영어
    <option value="수학">수학
    <option value="윤리">윤리
    <option value="철학">철학
</optgroup>

<optgroup label="희망 과목">
    <option value="">영화의 이해
    <option value="">현대 뮤지컬
    <option value="">SF와 미래학
    <option value="">인문학으로 읽는 헬레니즘 문화
    </optgroup>
</select><hr>

<input type="button" value="push"> &nbsp;&nbsp;
<input type="image" src="image\button.png" alt="button"><hr>

<h3>취미 선택하기</h3>
등산 <input type="checkbox" name="c1" value="1">
노래 <input type="checkbox" name="c1" value="2">
바이크 <input type="checkbox" name="c1" value="3" checked><hr>

<h3>성별 표시하기</h3>
여성 <input type="radio" name="r1" value="1" checked>
남성 <input type="radio" name="r1" value="2"><hr>
<label>
짜장면<input type="radio" name="m1" value="1">
<img src="image\jajang.png" title="짜장면"></label><br><br>
<label>
짬뽕<input type="radio" name="m1" value="2" checked>
<img src="image\jjambbong.png" title="짬뽕"></label><br><br>
<label>
탕수육<input type="radio" name="m1" value="3">
<img src="image\tangsuyuk.png" title="탕수육"></label><br><br>
<hr>
숫자<input type="number" name="su1" min="0" max="100" step="5" value="0">
<hr>
<fieldset>
<legend>신상정보</legend>
tel <input type="tel" name="tel1" value="010-"><br>
e-mail <input type="email" name="e1" value="xxx@xxxxx"><br>
home page <input type="url" name="u1"value="http://www.">
</fieldset>
<hr>
DATE <input type="date" name="date1" value="2019.10.28">
<hr>
컬러 <input type="color" name1="color1" value="#ffff10">
<hr>
<label>Value1</label>
<input type="range" name="range1" min="10" max="50" 
step="0.5" value="10" oninput="document.getElementById('value1').innerHTML=this.value">
<span id="value1"></span>
<hr>
<input type="reset" value="초기화"> &nbsp;&nbsp;
<input type="submit" value="전송">
</form>
</body>
</html>

 

 

  • <fieldset>, <legend>

 

  • 텍스트는 한 줄
  • <textarea> - 텍스트 에리어는 좀 길게 쓸 때
  • 숫자 타입은 최소, 최대값 넣어주고 얼마나 증가하는지 step도 넣어주면 좋다.
  • <fieldset>은 데이터들을 묶는 거고 <legend>는 그 제목을 정하는 것.
  • 선택지랑 그림이랑 같이 들어갈 때는 label 주는 걸 추천. 레이블은 입력 창 옆에 아이디나 비밀번호처럼 붙여놓은 텍스트.
  • 라디오 버튼과 체크박스에서 <label>을 사용해야 텍스트를 눌러도 체크가 된다.

 

<label[속성="속성 값"]>레이블<input...></label>
또는
<label for="id 이름">
	<input id="id 이름" [속성="속성 값"]
 </label>
<html><head><title>form-tag</title></head>
<body>
    <fieldset>
    <legend><h3>개인 신상정보</h3></legend><br>
    이름: <input type="name" name="n1" value="honggildong"><br><br>
    암호: <input type="password" name="p1" value="" maxlength="6"><br><br>
    핸드폰 번호: <input type="tel" name="tel1" value="010-"><br><br>
    이메일 주소: <input type="email" name="email1" value="xxx@xxxx"><br><br>
    홈페이지: <input type="url" name="u1" value="http://"><br><br>
    <h3>&nbsp;&nbsp;&nbsp;&nbsp;자기소개서</h3>
    <textarea name="ta1" cols="40" rows="20">여기에서 작성하세요</textarea>
</fieldset>
<hr>
주문하세요<br><br>
<input type="radio" name="r1" value="아메리카노" checked> 아메리카노<br>
<input type="radio" name="r1" value="ice-아메리카노"> 아이스 아메리카노<br>
<input type="radio" name="r1" value="까페라떼"> 까페라테<br>
<input type="radio" name="r1" value="더치커피"> 더치커피<br>
<hr>
<h3>푸드(food) 선택</h3>
<label><img src="image\jajang.png" title="짜장면">짜장면
<input type="radio" name="r2" value="1"></label><br>
<label><img src="image\jjambbong.png" title="짬뽕">짬뽕
<input type="radio" name="r2" value="2"></label><br>
<label><img src="image\tangsuyuk.png" title="탕수육">탕수육
<input type="radio" name="r2" value="3"></label><br>
<hr>
<h3>가족 표시하기</h3>
조부<input type="radio" name="r3" value="1" checked>
조모<input type="radio" name="r3" value="2">
부<input type="radio" name="r3" value="3">
모<input type="radio" name="r3" value="4">
남매<input type="radio" name="r3" value="5">
자매<input type="radio" name="r3" value="6">
<hr>
<h3>나의 고향</h3>
<select name="s1">
<option value="서울">서울
<option value="경기도">경기도
<option value="강원도">강원도
<option value="경상도">경상도
<option value="전라도">전라도
<option value="충청도">충청도
<option value="제주도">제주도
<br>
</select>
<hr>

<h3>내가 방문한 해외 여행지</h3>
<select name="s2" multiple>
<optgroup label="미국">
    <option value="뉴욕">뉴욕
    <option value="맨하탄">맨하탄
    <option value="시카고">시카고
</optgroup>
<optgroup label="독일">
    <option value="브레뉴">브레뉴
    <option value="베를린">베를린
    <option value="구텐베르크">구텐베르크
</optgroup>
</select><hr>

<h3>영화 사운드 오브 뮤직</h3>
<input type="text" name="li1" list="movie OST">
<datalist id="movie OST">
    <option value="에델바이스">에델바이스</option>
    <option value="도레미송">도레미송</option>
    <option value="내가 좋아하는 것">내가 좋아하는 것</option>
</datalist>
<hr>
<h3>버튼, 이미지 버튼</h3>
    <br><input type="button" value="눌러주세요">&nbsp;&nbsp;
    <input type="image" src="image\button.png" alt="button"><br>
<hr>
<h3>숫자 0부터 100까지 5씩 증가하기</h3><br>
<label><input type="text" name="ts1" min="0" max="100" step="5" value="50"></label><br>
<h3>color 선택하기</h3>
<input type="color" name="col1" value="#ff0000"><br>
<hr>
<h3>날짜 선택하기</h3>
<input type="date" name="date1" value="2019-10-28"><br>
<hr>
<h3>시간 선택하기</h3>
<input type="time" name="time1" value="--&nbsp;--:--"><br>
<hr>
<h3>범위 선택하기</h3>
value1 0<input type=range name="range1" min="0" max="100" value="">100<br>
<hr>
<input type="button" name="reset1" value="reset">&nbsp;&nbsp;
<input type="button" name="submit1" value="submit"><br>
<hr>
</body></html>

 

 

 

 

 

 

'원.더.풀 프로젝트 > HTML,CSS' 카테고리의 다른 글

원더풀 프로젝트_CSS2  (0) 2020.03.28
원더풀 프로젝트_CSS1  (0) 2020.03.21
원더풀 프로젝트_HTML 4  (0) 2020.02.24
원더풀 프로젝트_HTML 3(테이블 만들기/테이블 변형)  (0) 2020.02.17
원더풀 프로젝트_HTML 2  (0) 2020.02.12

관련글

댓글

티스토리툴바