본문 바로가기
IT일반과목/HTML5+CSS3

20180907 학원수업 영역태그, 이미지삽입 등

어쩌먼 2018. 9. 7. 02:08

## <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

'IT일반과목/HTML5+CSS3' Related Articles

티스토리툴바