## <iframe> 태그 ##
-> 웹 문서안에 다른 웹 페이지를 추가하는 태그
속성
width / height : 페이지의 크기 설정
name : 인라인 프레임의 이름
scr : 페이지의 경로
## <div> 태그 ##
-> block 형식의 공간을 분할 (수직으로 공간분할)
-> 공간 단위로
##<span> 태그 ##
-> inline 형식의 공간을 분할 (수평으로 공간 분할)
-> text 단위로
@ html4 페이지 구조
-> html4에서 페이지 구조는 <div>, <span> 태그 등을 이용하여 구조를 만듬
-> 구역을 설정하고 거기에 id 값을 넣어서 구분
※ 장점
-> 웹 페이지의 구조를 쉽게 만들 수 있음
※ 단점
-> 사용자마다 id값을 다르게 부여하여 구조를 이해하는데 어려움
(누구는 header이고 누구는 top을 쓰는 경우가 있기 때문)
-> 구조 파악이 어려워지자 차후 유지보수에 문제가 발생할 수 있음
-> 검색 엔진이 웹 소스를 확인할 때에도 메뉴, 본문 구별이 어려움
-> 구별이 어려운 만큼 웹 접근성에 용이하지 못함
@ html5 페이지 구조
-> 시멘틱 태그를 사용함
- 페이지 구조를 특정 기능에 맞는 태그를 사용하여 구분함
- 페이지 구조를 쉽게 파악하고 좀 더 정확한 정보를 검색 할 수 있게 함
- header, section, footer
-> 웹 접근성의 용이함
- 장애인, 고령자 등이 웹 사이트에서 제공하는 정보를
비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것을 웹 접근 성이라고 함
## haeder ##
-> 특정 부분의 머리말로 주로 검색어, 바, 메뉴 바를 넣음
- <nav> 태그를 사용함
- 다른 사이트나 페이지로 이동하는 태그를 모아놓은 태그
- 특정 태그에 종속되지 않고 어느 곳에서나 사용할 수 있음
## section ##
-> 웹 문서에서 컨텐츠가 들어가는 영역, 컨텐츠를 주제별로 묶을 때 사용
-> <section> 태그안에 <section>태그를 또 넣을 수 있음
-> 주제별로 article을 묶어 주는 태그
- article 태그는 웹 페이지의 내용이 들어가는 영역
- 이 태그 영역은 다른 곳으로 배포하거나 재상용이 가능
- 검색 로봇은 이 태그가 사용된 컨텐츠는 배포할 수 있는 컨텐츠로 인식
## aside ##
-> 사이드 바라고 부름
-> 본문 이외의 기타 내용을 담고 있는 영역
-> 주소 광고를 달거나 링크 모음등을 표현함
## footer ##
-> 웹 페이지의 맨 아래쪽에 위치하며, 회사소개, 저작권, 연락처 등의 정보를 표시함
소스검색할때 article 자체가 안나온다.
<section> 이 있다.
## img 태그 ##
-> 웹 페이지에 사진이나 그림을 삽입할 때 사용하는 태그
속성
src : 삽입할 이미지 경로를 지정하는 속성
alt : 이미지를 설명해주는 텍스트 속성 (만약 이미지가 깨졋을 경우 출력되는 글자)
width, height : 이미지의 크기를 설정하는 속성
작성법
<img src="경로" alt="설명 문구" width="넓이" height="길이" />
※ 웹 페이지 사용 가능한 확장자
GIF : 파일 크기가 작아 아이콘이나 블릿 기호에 많이 사용
투명한 배경이나 움직이는 이미지를 만들 수 있음
- 블릿 기호 : 특수 기호 같은 것
JPG / JPEG : 사진을 위해 개발된 확장자, 저장을 반복하다 보면 화질이 떨어 질 수 있음
PNG : 네트워크용으로 개발되었고, 요즘 많이 사용함
이거 만들어보기!!!!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!--테이블 굵기를 말한다. -->
<table border="1">
<tr>
<th>이름</th><!--굵게 표시되고 자동정렬된다. -->
<th>나이</th>
<th>주소</th>
</tr>
<tr>
<td>김종규</td>
<td>26살</td>
<td>인천광역시</td>
</tr>
<tr>
<td>종규</td>
<td>27살</td>
<td>인천 광역시</td>
</tr>
</table>
<!-- 아래로 행을 합치는 행병합이다. -->
<table border="1">
<tr> <td rowspan="3"></td> <td></td> <td colspan="2"></td> <td rowpan="2"></td> </tr>
<tr> <td></td> <td></td> <td></td> <td></td> </tr>
<tr> <td></td> <td></td> <td></td> <td></td> </tr>
<tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr>
</table>
<br/>
<!--
<style>
thead{
background-color: yellow;
}
tbody{
background-color: beige;
}
tfoot{
background-color: aqua;
}
</style>
-->
<table border="1">
<thead><tr><th>이름</th><th>나이</th><th width="100px">주소</th></tr></thead>
<tbody><tr><td>홍길동</td><td>20</td><td>경기도</td></tr></tbody>
<tbody><tr><td>김말똥</td><td>30</td><td>서울시</td></tr></tbody>
<tfoot><td colspan="2" height="50px">총인원</td><td>2명</td></tfoot>
</table>
<br/>
<table border="2">
<thead> <tr><th colspan="5"><b>보석 컬렉션</b></th></tr></thead>
<tbody>
<tr><td rowspan="5"; align="center"><b>제품리스트</b></td><td align="center"><b>코드</b></td><td align="center"><b>분류</b></td><td align="center"> <b>가격</b></td><td align="center"><b>구매가능 개수</b></td></tr>
<tr><td>01-468</td><td>에메랄드</td><td>200,000원</td><td>1068</td></tr>
<tr><td>01-469</td><td>루비</td><td>150,000원</td><td>1700</td></tr>
<tr><td>01-470</td><td>사파이어</td><td>950,000원</td><td>2500</td></tr>
<tr><td>01-471</td><td>다이아몬드</td><td>120,000원</td><td>3200</td></tr>
<tr><td><b>★ 특가 ★</b></td><td colspan="4">푸드렛 타이트 (문의전화주세요)</td></tr>
</tbody>
</table>
<br/>
<table border="1">
<tr><td align="center"; colspan="5"><b>이력서</b></td></tr>
<tr><td rowspan="4"; width="100px"; align="center">사진</td><td align="center">이름</td><td width="100px"; colspan="3"></td></tr>
<tr><td align="center">생년월일</td><td width="100px"; colspan="3"></td></tr>
<tr><td align="center">주소</td><td width="100px"; colspan="3"></td></tr>
<tr><td align="center">전화번호</td><td width="50px"></td><td align="center">이메일</td><td width="180px"></td></tr>
</table>
<br/>
<!-- align center주면된다.-->
<table border="1">
<tr><td width="70px"></td><td width="120px"; align="center">기간</td><td>출신학교명</td><td width="70px"; align="center">전공</td><td>졸업여부</td><td>학점</td></tr>
<tr><td rowspan="2"; align="center">학력사항</td><td height="20px"></td><td></td><td></td><td></td><td></td></tr>
<tr>
<td height="20px"></td><td></td><td></td><td></td><td></td>
</tr>
</table>
<br/>
<table border="1">
<tr><td></td><td width="130px"; align="center">기간</td><td width="130px"; align="center">시행처</td><td width="140px"; align="center">취득일</td></tr>
<tr><td rowspan="2">자격증</td><td height="20px"></td><td></td><td></td></tr>
<tr>
<td height="20px"></td><td></td><td></td>
</tr>
</table>
<br/>
<table>
<tr><td align="center"; width="500px">네이버화면</td></tr>
</table>
<br/>
<table border="1">
<tr><td width="100px"; height="100px"; align="center"><b>네이버로고</b></td><td width="100px"; colspan="5"; height="100px"; align="center"><b>검색창</b></td></tr>
<tr><td align="center">메일</td><td width="50px"; align="center">카페</td><td width="80px"; align="center">블로그</td><td width="80px"; align="center">지식In</td><td width="40px"; align="center">쇼핑</td><td rowspan="2"; width="100px"; height="100px"; align="center">로그인</td></tr>
<tr><td height="20px"; rowspan="5"; colspan="5">
<table border="1" align="center">
<tr><td width="80px"; height="75px"; align="center">MBN</td><td align="center">NewDelity</td><td align="center">중앙일보</td><td align="center">연합뉴스</td></tr>
<tr><td width="80px"; height="80px"; align="center">파이낸셜</td><td align="center">SBS</td><td align="center">매일경제</td><td align="center">동아일보</td></tr>
<tr><td width="80px"; height="80px"; align="center">KBS</td><td>전자신문</td><td align="center">시사IN</td><td>노컷뉴스</td></tr>
<tr><td width="80px"; height="80px"; align="center">프레시안</td><td align="center">OSEN</td><td>이투데이</td><td>뉴스타파</td></tr>
</table>
</td></tr>
<tr><td height="265px"; align="center">광고</td></tr>
</table>
<br/>
<iframe width="400px" height="200px" name="nate" src="http://www.nate.com"></iframe>
<iframe width="400px" height="200px" name="daum" src="http://www.daum.net"></iframe>
</body>
</html>
'IT일반과목 > HTML5+CSS3' 카테고리의 다른 글
20180907 멀티미디어태그 (오디오 태그, 비디오 태그) (0) | 2018.09.07 |
---|---|
20180907 멀티미디어태그 (이미지의 부분마다 경로지정하기) (0) | 2018.09.07 |
20180906 (HTML 글자태그, HTML 목록태그,실습) (0) | 2018.09.06 |
20180905 학원수업 과제1 (0) | 2018.09.06 |
20180905 학원수업 HTML개요,헤드,글자태그 (0) | 2018.09.06 |