영역분할, 멀티미디어, 하이퍼링크, form 태그에 대해서 알아보았다.
영역분할 태그
영역분할은 블록요소와 인라인요소로 나눌 수 있다.
블록요소
- 한 줄 전체를 차지하는 요소로 한 줄에 여러 요소가 올 수 없음
- 기본적으로 가로폭 전체의 넓이를 가지는 직사각형 형태의 요소
- 자동으로 줄이 개행 되며, 크기조절이 가능
- 블록요소는 모든 인라인 요소를 포함할 수 있고 다른 블록요소도 포함이 가능
- 제목태그(h1~h6), 목록태그, 테이블태그 등등
- 수직으로 공간 분할
인라인요소
- 내부의 컨텐츠가 끝나는 지점까지를 넓이로 가지게 되며, 한줄에 여러 요소가 올 수 있음
- 자동으로 줄이 개행되지 않으며, 한줄에 여러 요소가 오기 때문에 크기조절이 불가능
- 반드시 블록요소 안에 포함되어 있음
- 글자 형식태그 등등
- 수평으로 공간 분할
영역분할 태그를 전부 공부한 것은 아니다. 더 있는건 알고있는데, 오늘 공부한 내용만 정리하자.
iframe
iframe ~ /iframe
iframe은 우ㅐㅂ 문서 안에 다른 웹페이지를 추가하는 태그이다.
표현방식
(iframe width="넓이" hright="높이" src="파일경로" [seamless] </iframe)
seamless = 태그의 테두리를 없애는 속성
div / span
div : block 형식의 공간을 분할
영역분할태그
span : inline 형식의 공간으 분할iframe
한국인이라면침착맨
구독합시다
한국인이라면 침착맨 구독합시다.
abddkg123abd dkg 123
<!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>영역분할태그</title>
</head>
<body>
<h2>iframe</h2>
<iframe width="1280" height="720" src="https://www.youtube.com/embed/GEeygaem4ow" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<hr>
한국인이라면<h2>침착맨</h2>구독합시다
<hr>
한국인이라면 <b>침착맨 </b>구독합시다.
<hr>
<div>
<div>abd</div>
<div>dkg</div>
<div>123</div>
</div>
<div>
<span>abd</span>
<span>dkg</span>
<span>123</span>
</div>
</body>
</html>div와 span iframe까지 같이 나오는 코드를 써봤다. iframe으로 코드를 가져오는 방법은 유튜브 영상에서 우클릭 / 소스코드 해서 가져오면 된다.
HTML4까지의 영역분할 방식이다. HTML5부터는 시멘틱태그라는 태그들을 사용해 영역분할을 한다.
그런데 필자가 공부를 안했다.. 진도가 안나갔다.
어떤게 있는지 정리만 해보자아
시멘틱태그
- header
특정부분을 머리말로 주로 검색어, 메뉴를 넣는다.- main
해당페이지에서 전달하려는 정보가 표현되는 영역- nav
다른 사이트나 페이지로 이동하는 태그를 모아 놓은 태그(네비게이션)
특정 태그에 종속되지않고 어느 곳에서나 사용할 수 있음
주로 메뉴, footer의 사이트 링크 모음에 많이 쓰임- section
웹 문서에서 컨텐츠가 들어가는 영역, 컨텐츠를 주제별로 묶을 때 사용
section태그안에 다른 section을 넣을 수 있음
주제별로 article을 묶어주는 태그- article
웹 페이지의 내용이 들어가는 영역
이 태그 영역은 다른 곳으로 배포하거나 재사용 가능
검색 로봇은 이 태그가 사용된 컨텐츠는 배포할 수 있는 컨텐츠로 인식- aside
사이드바라고 불림
본문 외의 기타내용을 담고있는 영역
주로 광고를 달고나 링크모음 등을 표현- footer
웹페이지의 맨 아래쪽에 위치하며, 회사소개, 저작원, 연락처 등의 정보 표시
footer에는 header/section/article등 다른 레이아웃 사용이 가능
멀티미디어 태그
- img
웹 페이지에 사진이나 그림을 삽입할 때 사용하는 태그
닫는 태그가 존재하지 않음
사용방식 : img width=‘넓이’ height=‘높이’ src=‘파일경로’ alt=‘설명문구- audio
웹 브라우저에서 플러그인의 도웁 없이 음악을 재생할 수 있게 만들어주는 태그
사용방식 : audio src=‘오디오 파일경로’ controls autoplay loop preload=‘다운로드 옵션’></audio- video
웹 브라우저에서 플러그인의 도웁 없이 미디어를 재생할 수 있게 만들어주는 태그
사용방식 : video src=‘미디어파일 경로’ controls autoplay loop preload=‘다운로드 옵션’
height=‘높이’width=‘넓이’ poster=‘썸네일 이미지 경로’></video
멀티미디어
<!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>멀티미디어</title>
</head>
<body>
<div style="background-color: aquamarine;">
<img src="image/이미지.png">
</div>
<hr>
<audio src="mp3/asflknaslfan" controls loop
preload="auto"></audio>
<hr>
<video src="mp4/동영상파일이름.mp4" controls width="500px"
height="300px" poster="image/golf.png"></video>
</body>
</html>하이퍼링크
a ~ /a
웹 페이지에서 해당 부분을 클릭하면 지정된 페이지로 이동하는 태그
외부 사이트 연결, 문서 내부에서 이동 가능
하이퍼링크의 속성
1. herf : 링크한 페이지의 id값이나 사이트 주소 지정
2. target : 링크 페이지가 표시될 위치 지정(새창, 현재창)
_blnak : 새창 / _self : 현재창 & _parent : 상위창 / _top : 최상위창
3. download : 링크한 페이지를 표시하지 않고 다운로드 하는 것
4. rel : 현재 페이지와의 관계 지정
5. herflabg : 링크한 페이지의 언어를 지정
6. type : 페이지의 파일 유형 지정
하이퍼링크문서시작
머시기로 이동
저시기로 이동
네이버로이동
제일위로
><!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>하이퍼링크</title>
</head>
<body>
<h1 id="top">문서시작</h1>
<!--1. 시스템 내부에있는 페이지로 이동할 때-->
<a href="머시기.html" target="_self">머시기로 이동</a><br>
<a href="저시기.html" target="_blank">저시기로 이동</a><br>
<!--2. 시스템 외부에있는 페이지로 이동할 때-->
<a href="http://www.naver.com" target="_blank">네이버로이동</a><br>
</a>
<a href="#top">제일위로</a>
</body>링크를 여는 태그라고 보면될 것 같다.
form
사용자가 입력한 data를 보내는 방식과 처리할 프로그램을 정하는 태그
form의 속성
1. method
2. name : form태그의 고유이름 지정 ((form)을 구분하기 위함)
3. action : 데이터를 처리 할 프로그램(페이지) 지정
4. target : action 속성을 어떻게 열 것인지 지정
5. autocomplete : 이전 입력내용 출력하는 기능(생략하면 자동으로 on)
method는 정리할 내용이 조금 있으니 따로 한번 보자.
method
method
데이터를 보내는 방싱을 정하는 속성이다. get/post 두종류가 있다.
- get
URL창에 데이터를 보내는 방식
보내는 데이터 크기에 제한이 있음(256~4096byte)
보내는 데이터가 눈으로 보임
데이터가 보이는 방식 : 파일위치, 이름 ?(?은 피라미터 구분자)'보내는 데이터'
front/html/test.html?idid=안녕하세요&pwpw=asfasf&abc=- post
http 헤더에 데이터를 넣어 보내는 방식
보내는 데이터의 크기에 제한이 없음
보내는 데이터를 볼 수 없음
post는 front/html/test.html 여기까지만 나온다.
form 태그
fieldset ~ /fieldset, legend ~ /legend
폼 요소를 그룹으로 묶는 태그, 묶은 폼 요소에 명칭을 붙이는 태그
명칭<form action=처리할 프로그램 ‘(페이지)’ method=‘전송방식 (get/post)’>
<fieldset>
<legend> 명칭 </legend>
<input type 타입>
</fieldset>
</form>input
사용자로부터 데이터를 입력 받기 위한 태그
form 태그를 통해서 데이터 전송 시 해당 form태그 내부에 있는 input 태그에 작성된 내용만 전송
input 태그에는 정말 다양한 속성이 존재한다.
form 예시
input태그 속성테스트 value 속성 :placeholder 속성 :
readonly 속성 :
disabled 속성 :
required 속성 :
<form action="test2.html" method post>
<fieldset>
<legend>input태그 속성테스트</legend>
value 속성 : <input type="text" name="input1" value="자동으로 입력되는 값"><br>
<!-- value = 기본값 설정 // 입력됨-->
placeholder 속성 : <input type="text" name="input2" placeholder="아이디"><br>
<!-- placeholder = 가이드를 제공해주는 코드 // 입력되는게 아님 -->
readonly 속성 : <input type="text" name="input3" value="읽기전용" readonly><br>
<!-- 얘는 입력은 되어있는데 수정이 안됨 // 읽기 전용임 // vlaue에 세팅해주고 뒤에 readon;y를 붙여서 사용-->
disabled 속성 : <input type="text" name="input4" value="비활성화" disabled><br>
<!-- 얘는 수정 안되는건 readonly랑 똑같은데 submit할때 아예 누락됨 // action이 안됨-->
required 속성 : <input type="text" name="input5" required><br>
<!-- 반드시 입력해야하는 값을 지정해줄때 사용 -->
<input type="submit" value="제출">
</fieldset>
</form>정말 다양한 속성이 있으니 외우지 말고 필요할 때 찾아보는 것이 좋다.
어차피 많이쓰는 코드는 자연스럽게 외운다 카더라.
ps 테이블안에 테이블 넣기
| 네이버로고 | 검색창 | |||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 매일 | 카페 | 블로그 | 지식In | 쇼핑 | 로그인 | |||||||||||
|
||||||||||||||||
| 광고 |
<table border="1">
<tr>
<th width="100px" height="100px">네이버로고</th>
<th colspan="5" width="500px">검색창</th>
</tr>
<tr>
<th height="30px">매일</th>
<th>카페</th>
<th>블로그</th>
<th>지식In</th>
<th>쇼핑</th>
<th rowspan="2" width="200px" height="100px">로그인</th>
</tr>
<tr>
<th colspan="5" rowspan="2">
<table border="1">
<tr>
<th width="80px" height="100px">MBN</th>
<th width="80px">뉴데일리</th>
<th width="80px">중앙일보</th>
<th width="80px">연합뉴스</th>
</tr>
<tr>
<th height="100px">MBN</th>
<th>뉴데일리</th>
<th>중앙일보</th>
<th>연합뉴스</th>
</tr>
<tr>
<th height="100px">MBN</th>
<th>뉴데일리</th>
<th>중앙일보</th>
<th>연합뉴스</th>
</tr>
<tr>
<th height="100px">MBN</th>
<th>뉴데일리</th>
<th>중앙일보</th>
<th>연합뉴스</th>
</tr>
</table>
</th>
</tr>
<tr>
<th height="300px">광고</th>
</tr>
</table>테이블의 구석 tr / (th / td) 안에 테이블 선언해주면 된다.
고생쓰!
