표 관련 태그
▶ <table></table>
웹 문서에서 자료를 정리할 때 주로 사용
행과 열로 이루어져 있고 행과 열이 만나는 지점을 셀이라고 함
tr는 행 (table row) td는 sell을 만들기 위함
| <table> <tr> <td>내용</td> <td>내용</td> </tr> </table> * 1행 2열 테이블 작성 |
▶ 추가 관련 태그
| <th></th> | 열에 대한 제목을 표시하는 태그 중앙 정렬 및 굵게 표시 됨 |
| <caption></caption> | 테이블의 제목이나 내용을 추가하는 태그 다른 태그를 이용하여 텍스트를 꾸밀 수 있음 기본 위치는 테이블 위 중앙에 배치됨 |
| <figure> <figcaption> </figcaption> </figure> |
<figure>태그로 감싸서 사용하며 <caption>과 비슷한 기능 테이블 앞에 하고 싶을 시 <table>전에 기술 테이블 뒤에 하고 싶을 시 </table>후에 기술 <img>태그 설명에 주로 사용 |
▶ 테이블 속성
▷ border
<table>태그의 속성으로 표의 테두리 두께 지정
<table border = “두께”></table>
▷ rowspan과 colspan
<td>태그의 속성으로 rowspan은 지정한 수만큼의 행을 병합하고
colspan은 지정한 수 만큼의 열 병합
<td rowspan = “병합할 행 개수“></td>
<td colspan = “병합할 열 개수“></td>
전체 열/행의 수는 병합 후의 열/행 수와 일치해야 한다.
▶ 추가 관련 태그2
| <thead></thead> | 시멘틱(의미)태그 테이블 구조를 나누는 태그 |
테이블에 하나만 존재 가능 |
| <tbody></tbody> | 몸체로 테이블에 여러 개 존재 가능 |
|
| <tfoot></tfoot> | <thead>태그 뒤에 있어야 하며 하나만 존재 가능 |
|
| <col> | 열에 대한 스타일을 적용할 때 사용 <caption>태그 뒤, <tr><td>태그 전에 위치 //<span>태그를 사용하여 열을 묶을 수 있음 |
|
| <colgroup></colgroup> | 열을 그룹으로 묶어서 스타일 적용할 때 사용 <caption>태그 뒤, <tr><td>태그 전 위치 |
|
영역 관련 태그
▶ 페이지 영역 분할
▷ <div></div> : block형식의 공간을 수직으로 분할
▷ <span></span> : inline형식의 공간을 수평으로 분할
▶ HTML4 페이지 구조
<div>, <span> 태그를 이용하여 구역을 설정하고 거기에 id 값을 넣어 구분하지만 사용자마다 id 값을 다르게 부여하여 구조 이해와 차후 유지보수에 어려움이 생기고 검색엔진이 웹소스를 확인할 때도 메뉴, 본문을 구별하기 힘듦
또한 다양한 기기에서 이해하기에 구조가 복잡함
▷ <iframe></iframe>
웹 문서 안에 다른 웹 페이지를 추가하는 태그
<div class=“content”>
<iframe width=“크기” height=“크기” src=“경로”></iframe>
</div>
▷ 시맨틱 태그(semantic)
페이지 구조를 특정 기능에 맞는 태그를 사용하여 구분
페이지 구조를 쉽게 파악 가능하고 좀 더 정확한 정보를 검색 가능
▷ <header></header>
특정 부분의 머리말로 주로 검색어(form), 메뉴(nav)를 넣음
▷ <nav></nav>
다른 사이트나 페이지로 이동하는 태그를 모아놓은 태그(네비게이션)
특정 태그에 종속되지 않고 어느 곳에서나 사용 가능
주로 메뉴, footer의 사이트 링크 모음에 많이 쓰임
▷ <section></section>
웹 문서에서 콘텐츠가 들어가는 영역으로 콘텐츠를 주제 별로 묶을 때
사용, <section> 태그 안에 <section>태그를 넣을 수 있음
주제 별로 article을 묶어주는 태그
▷ <article></article>
웹 페이지 내용이 들어가는 영역으로 이 태그 영역은 다른 곳으로
배포하거나 재 사용 가능, 검색 로봇은 이 태그가 사용된 콘텐츠는
배포할 수 있는 콘텐츠로 인식
▷ <aside></aside>
사이드 바라고 불리며 본문 외의 기타 내용을 담고 있는 영역
주로 광고를 달거나 링크 모음 등을 표현
▷ <footer></footer>
웹 페이지의 맨 아래쪽에 위치하며 회사 소개, 저작권,
연락처(<address>태그) 등의 정보 표시, <footer>에 <header>,
<section>, <article> 등 다른 레이아웃 사용 가능
영역태그 실습
| <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title>Document</title> </head> <body> <div style="background-color: lightsteelblue; border: 1px solid black;"> div 영역 1 </div> <div style="background-color: lightsteelblue; border: 1px solid black;"> div 영역 2 </div> <div style="background-color: lightsteelblue; border: 1px solid black;"> div 영역 3 </div> <div style="background-color: lightsteelblue; border: 1px solid black;"> div 영역 4 </div> <hr> <span style="background-color: lightsalmon; border: 1px solid black;"> span 영역 1 </span> <span style="background-color: lightsalmon; border: 1px solid black;"> span 영역 2 </span> <span style="background-color: lightsalmon; border: 1px solid black;"> span 영역 3 </span> <span style="background-color: lightsalmon; border: 1px solid black;"> span 영역 4 </span> <hr> <div style="background-color: lightsteelblue; border: 1px solid black;"> <span style="background-color: lightsalmon; border: 1px solid black;"> span 영역 1 </span> <span style="background-color: lightsalmon; border: 1px solid black;"> span 영역 2 </span> <span style="background-color: lightsalmon; border: 1px solid black;"> span 영역 3 </span> <span style="background-color: lightsalmon; border: 1px solid black;"> span 영역 4 </span> </div> <hr> <h2>시멘틱 영역 태그</h2> <header style="background-color: lavender; padding: 12px;"> <nav style="background-color: lavenderblush; margin: 6px">상단 메뉴</nav> <div style="background-color: lightblue; margin: 6px">검색창 영역</div> </header> <section style="background-color: lightcyan; padding: 6px"> <article style="background-color: lightsteelblue; margin: 6px">컨텐츠 영역 A</article> <article style="background-color: lightsteelblue; margin: 6px">컨텐츠 영역 B</article> <article style="background-color: lightsteelblue; margin: 6px">컨텐츠 영역 C</article> </section> <aside style="background-color: lightsalmon; padding: 6px"> <nav style="background-color: mistyrose; margin: 6px">사이드 메뉴</nav> <div style="background-color: mistyrose; margin: 6px">배너/광고</div> </aside> <footer style="background-color: paleturquoise; padding: 6px"> <address style="background-color: powderblue; margin: 6px">사업자 정보/제작자 정보</address> <div style="background-color: powderblue; margin: 6px">사이트 맵</div> </footer> <hr> <h2>iframe 영역</h2><!-- 추천하지는 않음 --> <div> <iframe src="/chap01/example4.html" frameborder="0" width="100%" height="500px" scrolling="auto"></iframe> <iframe src="https://ko.wikipedia.org/wiki/" frameborder="0" width="100%" height="200px" scrolling="auto"></iframe> <!--유튜브 공유 퍼가기 -> <iframe>태그 복사--> <iframe width="560" height="315" src="https://www.youtube.com/embed/OGFgdro160I" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> </body> </html> |
멀티미디어 태그
▶ 이미지 태그
▷ <img>
웹 페이지에 사진이나 그림을 삽입할 때 사용하는 태그
<img src=“경로” alt=“설명 문구“ width=“너비” height=“길이”>
▷ 웹 페이지 사용 가능한 확장자
GIF : 파일 크기가 작아 아이콘이나 블릿 기호에 많이 사용, 투명한 배경이나 움직이는 이미지를 만들 수 있음
JPG/JPEG : 사진을 위해 개발, 저장을 반복하다 보면 화질이 떨어질 수 있음.
PNG : 네트워크용으로 개발되어 요즘 많이 이용
▶ 이미지 맵
▷ <map></map>, <area>
이미지를 구역 별로 나누어 링크를 걸어주는 태그로 <img>태그에 usemap속성을 지정해야 함
| <img src=“경로” usemap=“#tt”> <!-- 반드시 # --> <map name=“tt”> <area shape=“모양” coords=“시작위치, 끝위치“ href=“링크경로” target=“위치”> <!-- 위치 : _blank (새창), _self (기존)--> <area shape=“모양” coords=“시작위치, 끝위치“ href=“링크경로” target=“위치”> </map> |
▷ 속성
| alt | 대체 텍스트지정 |
| coords | 분할할 지역 좌표 지정(시작, 끝) |
| href | 링크 페이지 경로 지정 |
| media | 링크 페이지 최적화 미디어 지정 |
| rel | 현재 페이지, 링크페이지 관계지정 |
| shape | 링크로 사용할 영역 형태 지정(default, rect, circle, poly) |
| target | 링크페이지가 열릴 위치(새창, 현재창, 부모창, 최상위창) |
| type | 링크 페이지의 미디어 유형 지정 |
alt 태그
: 모종의 이유로 이미지가 정상 로드되지 않을 때 아래와 같이 대체 텍스트로 출력 되게 하기 위함
▶ 오디오 태그
▷ <audio></audio>
웹 브라우저에서 플러그인의 도움 없이 음악을 재생할 수 있게 만들어주는 태그
| <audio src=“경로“ controls=“controls” or “” or – autoplay=“autoplay” or “” or – loop=“loop” or “” or – preload=“none” or “metadata” or “auto”> </audio> |
▷ 속성
| src | 음악 파일의 경로 지정 | |
| controls | “controls”, “”, - | 재생 도구 출력 지정 |
| autoplay | “autoplay”, “”, - | 자동 재생 여부 지정 (모바일에서 적용X) |
| loop | “loop”, “”, - | 반복 여부 지정 |
| preload | “none”, “metadata”, “auto” |
none : 미리 다운로드 하지 않음 metadata : 기본 정보는 가져옴 (크기, 첫 프레임, 오디오 길이 등) auto : 미리 다운로드 함 |
▷ 브라우저 별 사용 가능한 파일
https://www.w3schools.com/html/html5_video.asp
| 형식 | IE | 크롬 | 파이어폭스 | 사파리 | 오페라 |
| MP3 | O | O | X | O | X |
| OGG | X | O | O | O | O |
| WAV | X | O | O | X | O |
▶ 비디오 태그
▷ <video></video>
웹 브라우저에서 플러그인의 도움 없이 미디어 재생을 할 수 있게
만들어주는 태그
| <video src=“경로” controls=“controls” or “” or – autoplay=“autoplay” or “” or – loop=“loop” or “” or – preload=“none” or “metadata” or “auto” poster=“이미지 경로“ width=“너비” height=“높이” </video> |
▷ 속성
| src | 미디어 파일의 경로 지정 |
| controls | 재생 도구 출력 지정 |
| autoplay | 자동 재생 여부 지정(모바일에서 적용X) |
| loop | 반복 여부 지정 |
| preload | 재생 시 모두 불러올 지 지정 |
| poster | 재생 전 출력할 이미지 출력 / 경로 입력 (실제 영상과 관련 없는 이미지를 넣을 수 있음) |
| width, height | 너비, 높이 지정 |
하이퍼링크 태그
▶ 하이퍼 텍스트
▷ <a></a>
페이지에서 해당 부분을 클릭하면 지정된 페이지로 이동하는 태그로 외부 사이트 연결, 문서 내부에서 이동 가능
| href | 링크한 페이지의 id값이나 사이트 주소 지정 |
| target | 링크 페이지가 표시될 위치(새 창, 현재 창) 지정 |
| download | 링크한 페이지를 표시하지 않고 다운로드 하는 것 |
| rel | 현재 페이지와의 관계 지정 |
| hreflang | 링크한 페이지의 언어 지정 |
| type | 페이지의 파일 유형 지정 |
▶ 기본 작성
| 문자 <a href=“주소”> 링크표시 문구 </a> |
| 이미지 <a href=“주소”> <img src=“이미지 경로“/> </a> |
▶ 내부 이동 및 target이용
| 내부에서 이동하기 <p id=“p1”></p> <a href=“#p1”> 링크 표시 문구 </a> |
| target 이용하기 <a href=“주소“ target=“_blank(새 창)” or “_self(현재)” or “_parent(상위 창)” or “_top(최상위창)”> </a> |
'HTML & CSS' 카테고리의 다른 글
| [211019~20] CSS 텍스트 & 색상 & 레이아웃 스타일 (0) | 2021.10.19 |
|---|---|
| [211018] CSS 적용, CSS 선택자 (0) | 2021.10.18 |
| [211015] 폼 관련 태그 (Input) (0) | 2021.10.15 |
| [211013] HEAD & 글자 태그, 목록 태그 (0) | 2021.10.13 |
| [211012] 웹 통신 기초 (0) | 2021.10.12 |
