0801 HTML 기본 태그-2

영역분할태그

iframe

웹문서 안에 다른 웹 페이지를 추가하는 태그

다른 곳에서 컨텐츠를 가져올 때 사용

<iframe width="폭" height="높이" src="해당 컨텐츠의 소스코드 입력"></iframe>

div

블록형식의 공간 분할 (수직으로 분할)

block 요소란 ?

가로폭과 전체 넓이를 가지는 직사각형 형태의 요소 한 줄 전체를 차지한다
자동으로 줄이 개행되며 크기를 조절할 수 있다
모든 인라인 요소와 블록요소를 포함할 수 있다

span

inline 형식의 공간분할 (수평으로 분할)

inline 요소란?

내부의 컨텐츠가 끝나는 지점까지를 넓이로 가지는 요소
자동으로 줄이 개행되지 않으며 한 줄에 여러요소가 올 수 있다
크기조절이 불가능하며 반드시 블록요소 안에 포함되어 있다

시멘틱 태그

페이지 구조를 쉽게 파악할 수 있도록 기능에 맞는 태그를 사용하여 구분

<header>
	헤더 내용
</header>
<main>
	<section>
		<article>
			본문내용1
		</article>
		<article>
			본문내용2
		</article>
	</section>
</main>
<aside>
	사이드 내용
</aside>
<footer>
	회사 정보
</footer

• header : 특정부분의 머리말, 주로 검색어나 메뉴를 넣는다

• main : 해당 페이지를 전달하려는 정보가 표현되는 영역

• nav : 다른 사이트나 페이지로 이동하는 태그를 모아놓은 태그 (네비게이션)

  ​ 특정 태그에 종속되지 않고 어느 곳에서나 사용할 수 있다

  ​ 주로 메뉴, footer의 사이트 링크 모음에 많이 쓰임

• section : 웹 문서에서 컨텐츠가 들어가는 영역, 컨텐츠의 주제별로 묶을 때 사용

  ​ section안에 section을 넣을 수 있으며 주제별로 article을 모아주는 태그

• article : 웹 페이지의 내용이 들어가는 영역

  ​ 배포하거나 재사용 가능한 영역

• aside : 사이드 바라고 불리는 영역

  ​ 본문 외 기타 내용을 담고 있으며 주로 광고를 달거나 링크모음 등을 표현

• footer : 웹 페이지 맨 아래쪽에 위치하며 회사 소개, 저작권, 연락처 등의 정보 표시

멀티미디어 태그

img

웹페이지에 사진이나 그림을 삽입할 때 사용
닫는 태그가 존재하지 않음

<img width='넓이' height='높이' src='파일 경로' alt='출력이 안 될 시 문구'>

이미지 확장자 : GIF / JPG, JPEG / PNG

map / area

img 태그에 usemap 속성을 지정하여 이미지를 구역 별로 나누어 링크를 걸어줄 때 사용

<img src="새 폴더/dog.jpg" usemap="#dog">
<map name="dog"> 
  	<area shape="circle" cords="244,103,54" href="새 폴더/head.jpg">
    <area shape="circle" cords="382,280,56" href="새 폴더/disk.jpg">
    <area shape="circle" cords="538,326,62" href="새 폴더/leg.jpg">
</map>

1. 사용하고자 하는 파일을 이미지 태그로 불러온다
2. 이미지 속성에 usemap을 넣고 이름을 지정한다
3. map 태그에 지정한 이름을 넣는다
4. area로 영역을 지정한다
5. shape은 모양, cords 분할할 지역의 좌표, href는 링크 페이지의 경로를 지정한다

audio

웹 브라우저에서 플러그 인의 도움없이 음악을 재생할 수 있게 해주는 태그

<audio src="라떼-벨로그.mp3" controls loop></audio>

• controls : 재생도구 출력 지정
• autoplay : 자동재생여부 지정 (모바일 적용X 크롬 지원X)
• loop : 반복여부 지정
• preload : none 재생 전 미리 다운로드 X / metadata 기본 정보만 가져옴 / auto 미리 다운로드

video

웹 브라우저에서 플러그인의 도움 없이 미디어를 재생할 수 있게 만들어주는 태그

<video src="mp4/라떼_브이로그" controls loop poster="새 폴더/latte.JPG"></video>

• poster : 재생 전 출력할 이미지 지정
• width / height : 미디어 크기 지정
• 나머지 속성은 audio와 동일

하이퍼링크 태그

a

웹 페이지에서 해당 부분을 클릭하면 지정된 페이지로 이동

외부 사이트 연결, 문서 내부 이동 가능

1. 문서 내부로 이동

<a href="sql_tutorial.html" target="_blank">sql tutorial로 이동</a>

• target : href 경로의 파일이 열리는 위치를 지정
  • self : 현재 창을 변경
  • blank : 새 창을 띄워서 문서 열기
  • parent : 부모창에서 문서 열기 <부모창 : 현재 문서 열어준 창>
  • top : 최상위 창

<h1 id='top'></h1>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<a href="#top">제일위로이동</a>
<!--id가 top인 곳으로 이동-->

• download : 링크한 페이지를 표시하지 않고 다운로드
• rel : 현재 페이지와의 관계 지정
• hreflang : 링크한 페이지의 언어를 지정
• type : 페이지의 파일 유형 지정

2. 시스템 외부에 있는 페이지로 이동

<a href="http://www.naver.com">네이버로이동</a>
<a href="http://www.naver.com"><img src="새 폴더/latte.JPG"></a>
<!-- 이미지 클릭 시, 네이버로 이동 -->

폼 태그

사용자가 입력한 데이터를 보내는 방식과 처리할 프로그램 지정 태그

fieldset / legend

폼태그를 묶어주는 역할 filedset은 박스로 묶고, legend는 명칭을 붙인다

<form action="test.html" method="get">
    <fieldset>
        <legend>로그인</legend>
        아이디 : <input type="text" name="idid"><br>
        비밀번호 : <input type="text" name="pwpw"><br>
        <input type="text" name="abc"><br>
        <input type="submit" value="로그인"><br>
        <!-- submit : submit버튼이 소속되어 있는 form태그를 action페이지로 제출-->
        <!-- form 태그 바깥에 있는 input은 전송되지 않음-->
    </fieldset>
</form>

• action : 데이터를 처리할 프로그램 (페이지) 지정
• method : 보내는 방식
  • get : URL 창에 데이터를 보내는 방식
  • post : http 헤더에 데이터를 넣어 보내는 방식 (보안)
• name : 폼태그 구분용 고유 이름 지정
• target : action 속성을 어떻게 열것인지 지정

input

사용자로부터 데이터를 입력받기 위한 태그

form 태그로 전송 시, 해당 form태그 내부에 있는 input태그에 작성된 내용만 전송

<form action="test2.html" method="get">
    <fieldset>
        <legend>input태그 속성테스트</legend>
        value : <input type="text" name="input1" value="자동으로 입력되는 값"><br>
        placeholder : <input type="text" name="input2" placeholder="아이디"><br>
        readonly : <input type="text" name ="input3" value="읽기전용" readonly><br>
        disabled : <input type="text" name="input4" value="비활성화" disabled><br>
        <!-- disabled는 제출이 안된다 -->
        required : <input type="text" name="input5" required><br>
        <!-- 입력값 없으면 제출되지 않음 필수 입력 항목에 사용한다-->
        <input type="submit" value="전송">
    </fieldset>
</form>

• type : 입력창의 타입을 결정
• value : input 요소의 기본값 입력 (사용자의 기본값이 됨)
• name : input을 구별할 수 있는 명칭
• readonly : 읽기전용필드
• placeholder : 사용자 입력전 입력창 표시글
• disabled : 비활성화
• required : 필수 입력 항목 ( 입력값 없으면 제출 X )
• maxlength / minlength : 사용자 입력 글자 수 제한

<form action="test3.html" method="get">
    <fieldset>
           <legend>input타입 종류</legend>
      
            text : <input type="text" name="a"><br>
            password : <input type="password" name="b"><br>
            file : <input type="file" name="c" multiple><br>
            hidden : <input type="hidden" name="d" value="숨겨진값"><br>
            <!-- 폼 태그로 보내고 싶지만 화면에 보여지지 않아야 하는 값-->
            button : <input type="button" value="클릭"><br>
            <button>버튼태그</button>
            <!-- 버튼 태그가 폼 태그 안에 있으면 submit으로 동작-->
            <br>
            <button type="button">버튼태그2</button>
      	    <!-- submit으로 사용하지 않기 위해서는
                type=button을 반드시 명시 -->
            <br>
           	
      		radio : <br>
            <!-- name 속성이 같은 여러 radio중 1개만 선택 가능-->
            <input type="radio" name="e" value="1">일<br>
            <input type="radio" name="e" value="2">이<br>
            <input type="radio" name="e" value="3">삼<br>
            <input type="radio" name="e" value="4">사<br>
            <input type="radio" name="e" value="5">오<br>
            <!-- name을 가지고 value값을 가져감 -->
            <input type="submit" value="라디오전송">
            <br>
      
           	checkbox : <br>
 		   <!-- 동일한 name으로 여러값을 선택하여 전송할 때 사용-->
            <input type="checkbox" name="f" value="1">일<br>
            <input type="checkbox" name="f" value="2">이<br>
            <input type="checkbox" name="f" value="3">삼<br>
            <input type="checkbox" name="f" value="4">사<br>
            <input type="checkbox" name="f" value="5">오<br>
            <input type="submit" value="체크전송">
       	    <br>
   </fieldset>
</form>

• type의 종류

  • text : 한 줄 짜리 텍스트 입력창

  • password : 입력 시 텍스트가 보이지 않는 입력창

    <input type='password' name='명칭' vlaue='값' size='숫자' maxlenhth='숫자'>

  • hidden : 사용자에게 보이지 않는 입력창, 값을 숨겨 보낼 때 사용

    <input type='hidden' name='명칭' value='값'>

  ​ 데이터만 넘기기 때문에 반드시 value 설정

  • button : 자체기능 없는 버튼 생성 (script를 통해 함수 연결)

  • checkbox : 다중 항목 선택 (name으로 input 항목 연결)

  • radio : 단일 항목 선택 (name으로 input 항목 연결)

  • file : 파일 입력 양식

    <input type='file' name='명칭' [multiple] accept='허용할 확장자들'>

    multiple 속성 추가 시 한번에 여러파일 선택 가능

    accept 추가 시 해당 확장자만 보여주며, 콤마로 구분

  • submit : 입력 데이터를 form태그의 action페이지로 전송

  • reset : 입력 내용 삭제

  • image : 이미지 형태 생성

label

input 태그에 레이블을 붙이기 위한 태그

<label for="m">남<input type="radio" name="gender" value="남" id="m"></label>
<label for="f">여<input type="radio" name="gender" value="여" id="f"></label>

<label><input type="checkbox" name="hobby" value="잠">잠자기</label>
<label><input type="checkbox" name="hobby" value="독서">독서</label>
<label><input type="checkbox" name="hobby" value="게임">게임</label>
<label><input type="checkbox" name="hobby" value="코딩">코딩</label>

레이블 내 글자를 선택하면 체크

select

선택 - 옵션

<form action="/test6.html" method="get">
        <fieldset>
        <legend>값 전송을 위한 input태그 외 태그</legend>
        <input type="text" name="a"><br>
        <textarea name="b" cols="30" rows="10"></textarea>
        <select name="c">
            <option value="1">일</option>
            <option value="2">이</option>
            <option value="3">삼</option>             
          	<option value="4">사</option>
            <option value="5">오</option>
        </select>
        <br>
        <input type="submit" value="전송">
    </fieldset>
</form>