Chillax in dev

[WEB] HTML5 태그들 정리 본문

WEB

[WEB] HTML5 태그들 정리

Seong Story 2020. 8. 8. 20:30
728x90

html- HTML 5 수업 내용 정리

- HTML5 수업 내용을 정리합니다.  HTML(Hyper Text Markup Language)입니다. 여기서 주목할 점은 Hyper Text (웹 페이지에서 다른 페이지로 이동 가능) + Markup Language(마크업 언어로 프로그래밍 언어가 아니라는점)입니다. 따라서 웹 페이지에 내용(content)을 담기 위한 용도로 사용하는 언어입니다. 즉  적절한 태그(Tag)들의 사용법을 알고 원하는 내용을 담기 위해 구조적으로 이용하기 위해 사용합니다.

 

<목차>

h1태그
p태그
hr태그
a태그
CharFormTag
Marquee 흐르는 문자열
image태그
li태그
article태그
table태그
input type="?" name="", value=""태그
lable 태그
div태그
span태그
특수문자 태그
HTML의 시멘틱(Semantic)

 

 

<Tag 정리>

- <h1>제목</h1> : header의 h, 문단의 제목에 사용 1~6에 따라 글씨 크기가 달라집니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- header태그 h는 해더의 약자 -->
<h1>제목</h1>
<h2>제목</h2>
<h3>제목</h3>
<h4>제목</h4>
<h5>제목</h5>
<h6>제목</h6>
<!-- 문단의 제목이나 컨텐츠의 제목을 쓸때 많이 사용하는tag -->
<!-- <br/>태그를 안싸도 줄바꿈이 일어나는 대표적인 태그 -->
<!-- 1~~~~~~~6 -->
</body>
</html>

- <p>본문</p> : paragraph의 p , 내용을 넣습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>p태그</title>
</head>
<body>
<h1>본문1</h1>
<p>
국회는 국가의 예산안을 심의·확정한다. 국회의원의 선거구와 비례대표제 기타 선거에 관한 사항은 법률로 정한다. 법률이 헌법에 위반되는 여부가 재판의 전제가 된 경우에는 법원은 헌법재판소에 제청하여 그 심판에 의하여 재판한다. 제3항의 승인을 얻지 못한 때에는 그 처분 또는 명령은 그때부터 효력을 상실한다. 이 경우 그 명령에 의하여 개정 또는 폐지되었던 법률은 그 명령이 승인을 얻지 못한 때부터 당연히 효력을 회복한다. 제2항과 제3항의 처분에 대하여는 법원에 제소할 수 없다. 제1항의 지시를 받은 당해 행정기관은 이에 응하여야 한다. 대통령이 궐위되거나 사고로 인하여 직무를 수행할 수 없을 때에는 국무총리, 법률이 정한 국무위원의 순서로 그 권한을 대행한다.
</p>
<h1>본문2</h1>
<p>
대한민국의 경제질서는 개인과 기업의 경제상의 자유와 창의를 존중함을 기본으로 한다. 대통령은 취임에 즈음하여 다음의 선서를 한다. 모든 국민은 법률이 정하는 바에 의하여 국방의 의무를 진다. 모든 국민은 법률이 정하는 바에 의하여 납세의 의무를 진다. 제1항의 탄핵소추는 국회재적의원 3분의 1 이상의 발의가 있어야 하며, 그 의결은 국회재적의원 과반수의 찬성이 있어야 한다. 다만, 대통령에 대한 탄핵소추는 국회재적의원 과반수의 발의와 국회재적의원 3분의 2 이상의 찬성이 있어야 한다. 대통령은 국민의 보통·평등·직접·비밀선거에 의하여 선출한다. 대통령은 제3항과 제4항의 사유를 지체없이 공포하여야 한다.
</p>
<h1>본문3</h1>
<p>
국회는 정부의 동의없이 정부가 제출한 지출예산 각항의 금액을 증가하거나 새 비목을 설치할 수 없다. 헌법에 의하여 체결·공포된 조약과 일반적으로 승인된 국제법규는 국내법과 같은 효력을 가진다. 군사법원의 조직·권한 및 재판관의 자격은 법률로 정한다. 계엄을 선포한 때에는 대통령은 지체없이 국회에 통고하여야 한다. 신체장애자 및 질병·노령 기타의 사유로 생활능력이 없는 국민은 법률이 
정하는 바에 의하여 국가의 보호를 받는다. 국무총리·국무위원 또는 정부위원은 국회나 그 위원회에 출석하여 국정처리상황을 보고하거나 의견을 진술하고 질문에 응답할 수 있다. 대통령은 국무총리·국무위원·행정각부의 장 기타 법률이 정하는 공사의 직을 겸할 수 없다.
</p>
</body>
</html>

- <hr> : 구분선 넣기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><hr>수평선</title>
<!-- <hr/> 수평선단일태그 -->
<body>
<h1>본문1</h1>

<p>
국회는 국가의 예산안을 심의·확정한다. 국회의원의 선거구와 비례대표제 기타 선거에 관한 사항은 법률로 정한다. 법률이 헌법에 위반되는 여부가 재판의 전제가 된 경우에는 법원은 헌법재판소에 제청하여 그 심판에 의하여 재판한다. 제3항의 승인을 얻지 못한 때에는 그 처분 또는 명령은 그때부터 효력을 상실한다. 이 경우 그 명령에 의하여 개정 또는 폐지되었던 법률은 그 명령이 승인을 얻지 못한 때부터 당연히 효력을 회복한다. 제2항과 제3항의 처분에 대하여는 법원에 제소할 수 없다. 제1항의 지시를 받은 당해 행정기관은 이에 응하여야 한다. 대통령이 궐위되거나 사고로 인하여 직무를 수행할 수 없을 때에는 국무총리, 법률이 정한 국무위원의 순서로 그 권한을 대행한다.
</p><hr/>
<h1>본문2</h1>
<p>
대한민국의 경제질서는 개인과 기업의 경제상의 자유와 창의를 존중함을 기본으로 한다. 대통령은 취임에 즈음하여 다음의 선서를 한다. 모든 국민은 법률이 정하는 바에 의하여 국방의 의무를 진다. 모든 국민은 법률이 정하는 바에 의하여 납세의 의무를 진다. 제1항의 탄핵소추는 국회재적의원 3분의 1 이상의 발의가 있어야 하며, 그 의결은 국회재적의원 과반수의 찬성이 있어야 한다. 다만, 대통령에 대한 탄핵소추는 국회재적의원 과반수의 발의와 국회재적의원 3분의 2 이상의 찬성이 있어야 한다. 대통령은 국민의 보통·평등·직접·비밀선거에 의하여 선출한다. 대통령은 제3항과 제4항의 사유를 지체없이 공포하여야 한다.
</p><hr/>
<h1>본문3</h1>
<p>
국회는 정부의 동의없이 정부가 제출한 지출예산 각항의 금액을 증가하거나 새 비목을 설치할 수 없다. 헌법에 의하여 체결·공포된 조약과 일반적으로 승인된 국제법규는 국내법과 같은 효력을 가진다. 군사법원의 조직·권한 및 재판관의 자격은 법률로 정한다. 계엄을 선포한 때에는 대통령은 지체없이 국회에 통고하여야 한다. 신체장애자 및 질병·노령 기타의 사유로 생활능력이 없는 국민은 법률이 정하는 바에 의하여 국가의 보호를 받는다. 국무총리·국무위원 또는 정부위원은 국회나 그 위원회에 출석하여 국정처리상황을 보고하거나 의견을 진술하고 질문에 응답할 수 있다. 대통령은 국무총리·국무위원·행정각부의 장 기타 법률이 정하는 공사의 직을 겸할 수 없다.
</p><hr/>
</body>
</head>
</html>

- <a> 태그 : anchorTag의 a, 링크나 목차 만들기

1. 글씨를 누르면 해당 링크로 이동하기!

<body>
<a href="https://www.daum.net" target="_blasnk"/>Daum 으로 이동<br/>
<a href="https://www.naver.com"target="_blasnk">Naver 으로 이동</a><br/>
<a href="https://www.nate.com"target="_blasnk">Nate 으로 이동</a><br/>
<a href="03_Header_Tag.html"target="_blasnk">03_Header_Tag이동</a><br/>
</body>

2. 목차 처럼 이동하기! : Anchor 태그의 이동은  다른 사이트 또는 다른 페이지 의 이동도 있지만 한 페이지 내에서 특정 위치로의 이동 기능도 있습니다. 다만 같은 페이지에서의 이동을 위해서는 이동할 위치에 id 옵션을 포함한 태그가 있어야 이동이 가능합니다. 이동한 위치의 id 값을 Anchor 태그의 href 값에 "#" 과함께 써주면 이동이 가능합니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>목차만들기</title>
</head>
<body>
<a href="#first">첫 단락 위치로 이동</a><br /><br />
<a href="#second">두번째 단락 위치로 이동</a><br /><br />
<a href="#third">세번째 단락 위치로 이동</a><br /><br />


<h1 id="first"> 첫 단락 </h1>
<p>선거운동은 각급 선거관리위원회의 관리하에 법률이 정하는 범위안에서 하되, 균등한 기회가 보장되어야 한다.
국무총리 또는 행정각부의 장은 소관사무에 관하여 법률이나 대통령령의 위임 또는 직권으로 총리령 또는 부령을
발할 수 있다. 모든 국민은 주거의 자유를 침해받지 아니한다. 주거에 대한 압수나 수색을 할 때에는 검사의 신청에
의하여 법관이 발부한 영장을 제시하여야 한다. 군인·군무원·경찰공무원 기타 법률이 정하는 자가 전투·훈련등
직무집행과 관련하여 받은 손해에 대하여는 법률이 정하는 보상외에 국가 또는 공공단체에 공무원의 직무상
불법행위로 인한 배상은 청구할 수 없다.</p>
<br />
<hr />
<br />
<h1 id="second"> 두번째 단락 </h1>
<p>모든 국민은 법률이 정하는 바에 의하여 공무담임권을 가진다.
 헌법재판소 재판관은 탄핵 또는 금고 이상의 형의 선고에 의하지 아니하고는 파면되지 아니한다. 국가는 지역간의
  균형있는 발전을 위하여 지역경제를 육성할 의무를 진다. 혼인과 가족생활은 개인의 존엄과 양성의 평등을 기초로
  성립되고 유지되어야 하며, 국가는 이를 보장한다. 정당의 목적이나 활동이 민주적 기본질서에 위배될 때에는
  정부는 헌법재판소에 그 해산을 제소할 수 있고, 정당은 헌법재판소의 심판에 의하여 해산된다. 형사피해자는
  법률이 정하는 바에 의하여 당해 사건의 재판절차에서 진술할 수 있다. 모든 국민은 주거의 자유를 침해받지
  아니한다. 주거에 대한 압수나 수색을 할 때에는 검사의 신청에 의하여
    성립되고 유지되어야 하며, 국가는 이를 보장한다. 정당의 목적이나 활동이 민주적 기본질서에 위배될 때에는
  정부는 헌법재판소에 그 해산을 제소할 수 있고, 정당은 헌법재판소의 심판에 의하여 해산된다. 형사피해자는
  법률이 정하는 바에 의하여 당해 사건의 재판절차에서 진술할 수 있다. 모든 국민은 주거의 자유를 침해받지
  아니한다. 주거에 대한 압수나 수색을 할 때에는 검사의 신청에 의하여
    성립되고 유지되어야 하며, 국가는 이를 보장한다. 정당의 목적이나 활동이 민주적 기본질서에 위배될 때에는
  정부는 헌법재판소에 그 해산을 제소할 수 있고, 정당은 헌법재판소의 심판에 의하여 해산된다. 형사피해자는
  법률이 정하는 바에 의하여 당해 사건의 재판절차에서 진술할 수 있다. 모든 국민은 주거의 자유를 침해받지
  아니한다. 주거에 대한 압수나 수색을 할 때에는 검사의 신청에 의하여
    성립되고 유지되어야 하며, 국가는 이를 보장한다. 정당의 목적이나 활동이 민주적 기본질서에 위배될 때에는
  정부는 헌법재판소에 그 해산을 제소할 수 있고, 정당은 헌법재판소의 심판에 의하여 해산된다. 형사피해자는
  법률이 정하는 바에 의하여 당해 사건의 재판절차에서 진술할 수 있다. 모든 국민은 주거의 자유를 침해받지
  아니한다. 주거에 대한 압수나 수색을 할 때에는 검사의 신청에 의하여
    성립되고 유지되어야 하며, 국가는 이를 보장한다. 정당의 목적이나 활동이 민주적 기본질서에 위배될 때에는
  정부는 헌법재판소에 그 해산을 제소할 수 있고, 정당은 헌법재판소의 심판에 의하여 해산된다. 형사피해자는
  법률이 정하는 바에 의하여 당해 사건의 재판절차에서 진술할 수 있다. 모든 국민은 주거의 자유를 침해받지
  아니한다. 주거에 대한 압수나 수색을 할 때에는 검사의 신청에 의하여
    성립되고 유지되어야 하며, 국가는 이를 보장한다. 정당의 목적이나 활동이 민주적 기본질서에 위배될 때에는
  정부는 헌법재판소에 그 해산을 제소할 수 있고, 정당은 헌법재판소의 심판에 의하여 해산된다. 형사피해자는
  법률이 정하는 바에 의하여 당해 사건의 재판절차에서 진술할 수 있다. 모든 국민은 주거의 자유를 침해받지
  아니한다. 주거에 대한 압수나 수색을 할 때에는 검사의 신청에 의하여
    성립되고 유지되어야 하며, 국가는 이를 보장한다. 정당의 목적이나 활동이 민주적 기본질서에 위배될 때에는
  정부는 헌법재판소에 그 해산을 제소할 수 있고, 정당은 헌법재판소의 심판에 의하여 해산된다. 형사피해자는
  법률이 정하는 바에 의하여 당해 사건의 재판절차에서 진술할 수 있다. 모든 국민은 주거의 자유를 침해받지
  아니한다. 주거에 대한 압수나 수색을 할 때에는 검사의 신청에 의하여
    성립되고 유지되어야 하며, 국가는 이를 보장한다. 정당의 목적이나 활동이 민주적 기본질서에 위배될 때에는
  정부는 헌법재판소에 그 해산을 제소할 수 있고, 정당은 헌법재판소의 심판에 의하여 해산된다. 형사피해자는
  법률이 정하는 바에 의하여 당해 사건의 재판절차에서 진술할 수 있다. 모든 국민은 주거의 자유를 침해받지
  아니한다. 주거에 대한 압수나 수색을 할 때에는 검사의 신청에 의하여
      성립되고 유지되어야 하며, 국가는 이를 보장한다. 정당의 목적이나 활동이 민주적 기본질서에 위배될 때에는
  정부는 헌법재판소에 그 해산을 제소할 수 있고, 정당은 헌법재판소의 심판에 의하여 해산된다. 형사피해자는
  법률이 정하는 바에 의하여 당해 사건의 재판절차에서 진술할 수 있다. 모든 국민은 주거의 자유를 침해받지
  아니한다. 주거에 대한 압수나 수색을 할 때에는 검사의 신청에 의하여
    성립되고 유지되어야 하며, 국가는 이를 보장한다. 정당의 목적이나 활동이 민주적 기본질서에 위배될 때에는
  정부는 헌법재판소에 그 해산을 제소할 수 있고, 정당은 헌법재판소의 심판에 의하여 해산된다. 형사피해자는
  법률이 정하는 바에 의하여 당해 사건의 재판절차에서 진술할 수 있다. 모든 국민은 주거의 자유를 침해받지
  아니한다. 주거에 대한 압수나 수색을 할 때에는 검사의 신청에 의하여
    
  법관이 발부한 영장을 제시하여야 한다.</p>
<br />
<hr />
<br />
<h1 id="third"> 세번째 단락 </h1>
  <p>법률이 헌법에 위반되는 여부가 재판의 전제가 된 경우에는
  법원은 헌법재판소에 제청하여 그 심판에 의하여 재판한다. 근로자는 근로조건의 향상을 위하여 자주적인
  단결권·단체교섭권 및 단체행동권을 가진다.이 헌법시행 당시에 이 헌법에 의하여 새로 설치될 기관의 권한에
  속하는 직무를 행하고 있는 기관은 이 헌법에 의하여 새로운 기관이 설치될 때까지 존속하며 그 직무를 행한다</p>
<br /><br /><br /><br /><br /><br />
</body>
</html>

- CharFormTag 모음

<b></b> : 굵은 글자 
<i> </i>  : 이텔릭 체
<sup></sup> : 위 첨자
<sub></sub> : 아래 첨자 
<ins></ins>   : 밑줄 
<u></u> : 밑줄 
<del></del>  : 삭선

 - Marquee 흐르는 문자열

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Marquee Tag</title>
</head>
<body>
<marquee>흐르는 문자열</marquee>
<marquee behavior="slide">슬라이드 문자열</marquee>
<marquee behavior="alternate">좌우 이동 문자열</marquee>
<marquee bgcolor="yellow"
      width="50%"
      height="150"
      direction="right"
      loop="10"
      scrolldelay="20">영역</marquee>
</body>
<!-- bgcolor : 배경색,  width:가로크기 , height:세로크기, loop:반복횟수
scrolldelay : 이동 속도,   behavior :  크크롤 방식(slide:한번이동 멈춤, alternate:좌우이동반복
scroll(기본값) : 단방향 이동, 같은 방향 재출현),  direction:방향(up, down, right 선택가능 안쓰면left)-->
</html>

- image 태그 : 사진 첨부 하기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Image Tag</title>
</head>
<body>
<!-- 프로젝트 내부에 파일을 보유하고 있을때 -->
<img src="images/daumlogo.png" width="200"><br />
<img src="images/facebook.jpg" width="200" height="70"><br />
<img src="images/nate.png" width="200"><br />
<img src="images/naver.png" width="200"><br />
<img src="images/twiter.jpg" width="200"><br />
<!-- src : 이미지의 경로와 파일 이름 -->
<!-- 그 외 속성 width:가로 크기, height:세로 크기 -->
<!-- width와 height 중 하나만 조정하면 나머지 크기는 비율에 맞춰서 자동 조정 됩니다 -->
<!-- 다문 비율을 생각하지 않고 width와 height 를 동시에 저장하면 비율이 틀어져서 언발런스해질수 있습니다 -->

<!-- 인터넷 상에 이미 게시된 이미지를 같이 URL 로 가지고 와서 표시하고자 할때 -->
<img src="https://s.pstatic.net/static/newsstand/up/2017/0424/nsd14479875.png"><br/>
<img src="https://t1.daumcdn.net/daumtop_chanel/op/20170315064553027.png"><br/>
<img src
="https://t1.daumcdn.net/b2/creative/129175/ba0ffc1146d1232fdd83eeb2c0547490.jpg" />
<br />
<!-- 인터넷의 이미 게시된 이미지의 URL 을 얻는 방법 : 이미지 위에서 마우스 오른쪽 버튼을 클릭하고
속성창을 열면 확인할수 있다. 다만 일부 그림들은 공개하지 않을 목적으로 URL을 분산하여 식별이 어렵게 하거나
마우스 오른쪽 버튼을 누르지 못하게 하기도 합니다(자바스크립트 이용)-->

<!-- 이미지의 URL 이 맞지 않거나 해당 이미지가 이름이 틀리거나 실제 이미지가 존재하지 않아서
이른바 엑박이 나올때 ..... 풍선도움말 형식의 안내문을  표시합니다-->
<img alt="그림이 존재하지 않습니다." src="images/abcd.jpg"><br /><br />


<!-- 이미지태그를 Anchor 태크로 감싸면 클릭하면 이동하는 하이퍼 미디어로 사용됩니다 -->
<a href="https://www.daum.net"  target="_blank">
 <img src="images/daumlogo.png" width="200">
</a>
<br />
</body>
</html>

- 리스트 Tag :  목록

  1. 번호 있는 태그 : <ol>안에<li>

  2. 점으로 만든 태그 : <ul> 안에 <li>

  

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>List Tag</title>
</head>
<body>
<h1>ol (ordered list) tag</h1>
 <ol type="a" start="3"><!-- ordered list : 번호가 있는 목록 태그 -->
  <li>Facebook</li><!-- list item(목록 요소) -->
  <li>Tweeter</li>
  <li>Linked in</li>
 </ol>
 <h1>ol (ordered list) tag2</h1>
 <ol type="1" start="3"><!-- ordered list : 번호가 있는 목록 태그 -->
  <li>Facebook</li><!-- list item(목록 요소) -->
  <li>Tweeter</li>
  <li>Linked in</li>
 </ol>
 
<h1>ul (unordered list) tag</h1>
 <ul type="disc"><!-- unordered list:번호가 없는 목록 태그 -->
  <li type="square"><img src="images/facebook.jpg" /></li>
  <li><img src="images/twiter.jpg" /></li>
  <li>Linked in</li>
 </ul>
</body>
</html>

- <article> Tag :  해당 문서나 페이지 또는 사이트와는 완전히 독립적으로 구성할 수 있는 요소를 정의할 때 사용합니다.  dl (단어) 안에 dt(설명) 식으로 합니다.

<article>
<dl>
    <dt>css</dt>
    <dd>- 웹의 디자인을 담당</dd>
    <dt>html</dt>
    <dd>- 웹의 내용을 담당</dd>
</dl>
</article>

- <table> Tag : 표 만들기

#01) 기본적으로 table태그 안에 tr(행) 안에 td(열)로 표를 생성합니다.

<table  width="750" cellpadding="10" cellspacing="1" align="center" bgcolor="red">
 <!-- tr 태그의 bgcolor="white" : tr태그에만 적용되는 부분 배경색 , 배경색을 td 에 설정할수도 있지만
 그럴경우 25번을 써줘야하므로 tr에 적용해서 5번만 써줍니다-->
 <!-- tr 태그의 align="center" : 셀안에서의 내용물의 좌우가운데 정렬을 의미합니다 -->
 <!-- tr 태그의 height="50" : 각 행의 세로 크기를 지정합니다 -->
 <tr bgcolor="white" align="center" height="50">
  <td width="150">1행 1열</td>
  <td width="150">1행 2열</td>
  <td width="150">1행 3열</td>
  <td width="150">1행 4열</td>
  <td width="150">1행 5열</td>
 </tr>
 <tr bgcolor="white" align="center" height="50">
  <td>2행 1열</td>
  <td>2행 2열</td>
  <td>2행 3열</td>
  <td>2행 4열</td>
  <td>2행 5열</td>
 </tr>
 <tr bgcolor="white" align="center" height="50">
  <td>3행 1열</td>
  <td>3행 2열</td>
  <td>3행 3열</td>
  <td>3행 4열</td>
  <td>3행 5열</td>
 </tr>
 <tr bgcolor="white" align="center" height="50">
  <td>4행 1열</td>
  <td>4행 2열</td>
  <td>4행 3열</td>
  <td>4행 4열</td>
  <td>4행 5열</td>
 </tr>
 <tr bgcolor="white" align="center" height="50">
  <td>5행 1열</td>
  <td>5행 2열</td>
  <td>5행 3열</td>
  <td>5행 4열</td>
  <td>5행 5열</td>
 </tr>
</table>

#02) 코딩으로 셀을 합치는 방법 

  1. 합치고자 하는 셀들의 td 태그를 골라냅니다.
  2. 골라낸 셀들 중 가장 왼쪽, 가장 위에 있는 셀 td 만 남기고 나머지 td를 삭제합니다.
  3. 행으로 몇 개가 삭제되고, 열로 봤을 때 몇 개의 열이 삭제 됐는지 파악한 후
  4. 삭제된 행의 개수+1만큼 남아 있는 셀의 속성으로 rowspan 값을 설정합니다.
  5. 또한  삭제된 열의 개수+1 만큼 남아 있는셀의 속성으로 colspan 값을 설정합니다.
  6. 삭제되지 않고 남아 있는 셀이 없어진 셀의 역할까지 한다는 의미의 속성 값입니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Table 02-Merge Cell</title>
</head>
<body>

  
<table  width="750" cellpadding="10" cellspacing="1" align="center" bgcolor="blue">
 <tr bgcolor="white" align="center" height="50">
  <td width="450" colspan="3">1행 1열</td>
 
 
  <td width="150">1행 4열</td>
  <td width="150">1행 5열</td>
 </tr>
 <tr bgcolor="white" align="center" height="50">
  <td>2행 1열</td>
  <td>2행 2열</td>
  <td>2행 3열</td>
  <td>2행 4열</td>
  <td>2행 5열</td>
 </tr>
 <tr bgcolor="white" align="center" height="50">
  <td rowspan="3">3행 1열</td>
  <td>3행 2열</td>
  <td>3행 3열</td>
  <td>3행 4열</td>
  <td>3행 5열</td>
 </tr>
 <tr bgcolor="white" align="center" height="50">
  
  <td>4행 2열</td>
  <td>4행 3열</td>
  <td rowspan="2" colspan="2">4행 4열</td>
  
 </tr>
 <tr bgcolor="white" align="center" height="50">
  
  <td>5행 2열</td>
  <td>5행 3열</td>
  
 </tr>
</table>
</body>
</html>

- <input type="?" name="", value=""> 웹에서 값 입력받기.

   - 홈페이지 제작 시 다양하게 사용하는 입력 값 예시

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Input Type Tag</title>
</head>
<body>
<form action="14_Table_01.html">
 아이디 : <input type="text" name = "id"/><hr /> <!-- 글자를 입력 받을 수 있는 입력란 -->
 PASSWORD : <input type="password" name="pw"/><hr />
 <!-- 비밀번호 입력 양식 생성-->
 첫째<input type="checkbox"  value="first" name="ch"/>
 둘째<input type="checkbox"  value="second"  name="ch"/>
 셋째<input type="checkbox"  value="third"  name="ch"/><hr />
 <!-- 체크 박스 생성 -->
 <!-- 첫째 둘째 셋째 는 화면 표시되는 단어들이고, value 값들은 서버에 전달되는 값들입니다 -->
 남자<input type="radio" name="gender" value="m"/>
 여자<input type="radio"  name="gender" value="f"/><hr />
 <!-- 라디오 버튼 생성 -->
 <select name="dkts">
   <option value="1">김밥</option>
   <option value="2">떡뽁이</option>
   <option value="3">튀김</option>
   <option value="4">순대</option>
 </select><hr /><!-- 펼침 목록 -->
 파일<input type="file" name="selectfile"/><hr /> <!-- 파일 입력 양식 생성 -->
 <input type="button" value="클릭" /><hr /> <!-- 버튼 생성 -->
 <input type="submit" value="작성완료" />
 <input type="reset" value="다시작성" /><hr /><!-- 전송 및 취소 버튼 생성 -->
 <!-- submit 과 reset 버튼은 form 과 함께 사용되는 버튼으로  name 값이 생략되곤 합니다 -->
 <input type="hidden" name="loginuser" value="홍길동"/><hr />
 <!-- 보이지 않는 입력  양식 생성 -->
 <textarea cols="50" rows="10"></textarea><hr /><!-- 멀티라인 텍스입력 란 -->
 주소 : <input type="text" size="50" placeholder="주소입력"/><hr />
 <!-- 입력 내용 안내  placeholder는 클릭하고 내용을 입력하면 지워지는 안내문구 -->
</form>
</body>
</html>

- <lable> Tag : 라벨은 폼의 양식에 이름 붙이는 태그로 주요 속성은 for입니다.
라벨의 for의 값과 양식의 id값이 같으면 연결됩니다.
라벨을 클릭하면, 연결된 양식에 입력할 수 있도록 하거나 체크하거나 체크 해제가 가능합니다.

<!doctype html>
<!--
라벨은 폼의 양식에 이름 붙이는 태그로 주요 속성은 for입니다.
라벨의 for의 값과 양식의 id값이 같으면 연결됩니다.
라벨을 클릭하면, 연결된 양식에 입력할 수 있도록 하거나 체크하거나 체크해제가가능합니다.
  -->
<html lang="ko">
	<head>
	<meta charset="utf-8">
		<title>HTML</title>
	</head>
	<body>
		<p>
			<label for="jb-input-text">Input - Text</label>
			<input type="text" id="jb-input-text">
		</p>
		<p>
			<label for="jb-input-checkbox">Input - Checkbox</label>
			<input type="checkbox" id="jb-input-checkbox">
		</p>
	</body>
</html>

- <div> Tag :차곡차곡 아래로 쌓기 block방식으로 쌓음.

* div Tag
  - div :
    . block 형식으로 공간을 분할. 차곡차곡 쌓아 올려지는 형식.
    . css를 사용해 원하는 레이아웃을 구성할 수 있기 때문에 많이 사용됩니다
  - block 형식 : div 태그/ h1~h6 태그/p 태그/목록 태그(ol, ul, li)/테이블 태그/form 태그
  - block 형식의 태그는 별도의 <br /> 이 없어도 줄 바꿈 형식이 포함되어 사용됩니다

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DIV TAG</title>
</head>
<body>
<!--
* div Tag
  - div :
    . block 형식으로 공간을 분할. 차곡차곡 쌓아 올려지는 형식.
    . css를 사용해 원하는 레이아웃을 구성할 수 있기 때문에 많이 사용됩니다
  - block 형식 : div 태그/ h1~h6 태그/p 태그/목록태그(ol, ul, li)/테이블태그/form 태그
  - block 형식의 태그는 별도의 <br /> 이 없어도 줄바꿈 형식이 포함되어져 사용됩니다
 -->
 
<h1>div(&lt;h1&gt;)</h1><!-- &lt; 여는 꺽쇠괄호< , &gt; 닫는 꺽쇠 괄호 > -->
<b>div(b)</b>
<i>div&nbsp;&nbsp;&nbsp;&nbsp;(i)</i><!-- &nbsp; 스페이스바누름  한칸 띠움 --> 
<hr />  
<div style="background-color:yellow">div</div>
<div style="background-color:#ff00ff"><b>div(b)</b></div>
<i>div(i)</i>  

</body>
</html>

- <span> :옆으로 쌓는 inline 형식으로 공간 분할.

  * span 태그(쌓기 방식)
      - span : inline 형식으로 공간을 분할.    한 줄 안에 차례차례 위치하는 형식.
   - inline 형식으로 사용되는 태그: span태그 /  a 태그 / input 태그 / 글자 형식 태그. 
   - inline 형식의 의미 : 줄 바꿈 속성이 없어서 한 줄이 이어서 나열되는 태그들

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

<div style="background-color:yellow">서울시 마포구 신촌로</div>   
<div  style="background-color:#78FCF3">친구집1</div> 
<hr />  
<span style="background-color:yellow">서울시 마포구 신촌로</span>   
<span  style="background-color:#78FCF3"> 친구집2</span> 
</body>
</html>

- 특수문자 tag : 여러 상 황상 특수문자가 나타나지 않을 때 아래의 문자들을 사용합니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<center>HTML 상에서 특수문자는 태그 기호나 다른 기능의 기호와 중첩되어<br />
제대로 나타나지 않을 수 있기 때문에 아래 문자들를 사용합니다.</center>
<table width="600" align="center" cellsapceing="1" bgcolor="black">
 <tr height="50" bgcolor="white" align="center">
  <th width="200">기호</th><th width="200">표기법</th><th width="200">의미</th>
 </tr>
 <tr height="50" bgcolor="white" align="center">
  <td><b>&amp;</b></td><td>&amp;amp;</td><td>Ampersand</td>
 </tr>
	
 <tr height="50" bgcolor="white" align="center">
  <td><b>&lt;</b></td><td>&amp;lt;</td><td>시작 꺽쇠괄호</td>
 </tr>
 <tr height="50" bgcolor="white" align="center">
  <td><b>&gt;</b></td><td>&amp;gt;</td><td>끝 꺽쇠괄호</td>
 </tr>
 <tr height="50" bgcolor="white" align="center">
  <td><b>&quot;</b></td><td>&amp;quot;</td><td>큰따옴표</td>
 </tr>
 <tr height="50" bgcolor="white" align="center">
  <td><b>&nbsp;</b></td><td>&amp;nbsp;</td><td>Space</td>
 </tr>
 <tr height="50" bgcolor="white" align="center">
  <td><b>&iexcl;</b></td><td>&amp;iexcl;</td><td>거꾸로된 느낌표</td>
 </tr>
 <tr height="50" bgcolor="white" align="center">
  <td><b>&cent;</b></td><td>&amp;cent;</td><td>센트 기호</td>
 </tr>
 <tr height="50" bgcolor="white" align="center">
  <td><b>&pound;</b></td><td>&amp;pound;</td><td>파운드 기호</td>
 </tr>
 <tr height="50" bgcolor="white" align="center">
  <td><b>&yen;</b></td><td>&amp;yen;</td><td>엔화 기호</td>
 </tr>
 <tr height="50" bgcolor="white" align="center">
  <td><b>&copy;</b></td><td>&amp;copy;</td><td>저작권 CopyRight</td>
 </tr>
 <tr height="50" bgcolor="white" align="center">
  <td><b>&laquo;</b></td><td>&amp;laquo;</td><td>이중꺽쇠 괄호 - 시작</td>
 </tr>
 <tr height="50" bgcolor="white" align="center">
  <td><b>&raquo;</b></td><td>&amp;raquo;</td><td>이중꺽쇠 괄호 - 끝</td>
 </tr>
 
</table>
</body>
</html>

- HTML의 시멘틱(Semantic) :

# 구조

* HTML5 시멘틱 태그를 사용한 웹 페이지.
- HTML5 시멘틱 구조 태그
. <header>: 헤더를 의미한다(회사명/로고).
. <nav>: 내비게이션을 의미(주메뉴 구성)한다.
. <aside>: 사이드에 위치(sub 메뉴/광고)하는 공간을 의미한.
. <section>: 여러 중심 내용을 감싸는 공간을 의미한다.
. <article>: 글자가 많이 들어가는 부분을 의미한다.
. <footer>: 맺음말(이용약관|주소(위치)|저작권|사이트맵)을 의미한다.

- Semantic 태그는 화면의 구성을 테마(제목, 메뉴, 본 내용, 회사 소개 등)를  태그로 구분함으로써 외부에서 검색을 할 경우 효과적인 검색 내용을 제공하지 위한 목적으로 만들어졌습니다.
그 외 영역별 개발 화면 구분 등에 활용이 되기도 하지만,  메뉴에서 또는 제목에서 검색어를 검색하는 오류를 줄이기 위한 목적이 더 크게 사용됩니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Semantic Tag</title>
</head>
<body>
<header><h1> 컴퓨터 아카데미</h1></header>
<nav>
  <ul>
   <li>회사소개</li>
   <li>사업소개</li>
   <li>채용정보</li>
  </ul>
</nav>
<section>
  <aside>
   <h2>회사소개</h2>
   <ul>
    <li>CEO 인사말</li>
    <li>회사개요</li>
    <li>회사연혁</li>
    <li>찾아오시는길</li>
    <li>사이트맵</li>
   </ul>
  </aside>
  <article>
   <h2>CEO 인사말</h2>
   <p>고객 여러분 반갑습니다. 지난 2019년 ...</p>
   <p>고객 여러분! 감사합니다.</p>
  </article>
</section>
<footer>
 <span>이용약관 | 개인정보처리방침 | 이메일무단수집거부</span>
 <span컴퓨터아카데미<br>서울시 마포구 신촌로. Tel : 010-1000-1000</span>
</footer>
</body>
</html>
728x90
LIST
저작자표시 동일조건

'WEB' 카테고리의 다른 글

[WEB]CSS: 페이지 꾸미는 팁 shadow - 음영 효과 주는 방법  (0) 2020.08.10
[WEB]CSS: 페이지 꾸미는 팁 (colorzilla), gradient(그라데이션) 사용법  (0) 2020.08.10
[WEB]CSS: 기초 font, position, display 속성 등등  (0) 2020.08.09
[WEB]CSS: Hover 반응선택자 사용방법  (0) 2020.08.08
[WEB] CSS3으로 웹 꾸미기: 다양한 선택자(Selector)  (0) 2020.08.08
'WEB' Related Articles more
Comments