2018.11.29 테이블여백 & 하이퍼링크 & id링크
2018. 11. 29. 16:37ㆍHTML5&CSS
참고 :https://www.w3schools.com/
#1 테이블 여백 만들기
<!doctype html>
<html>
<head>
<meta charset="utf-9" />
<title>테이블</title>
</head>
<body>
<h3>기본 구조를 가진표</h3>
<hr />
<table border="1">
<caption>2017 1학기 성적</caption>
<tr>
<th>이름</th>
<th>HTML</th>
<th>CSS</th>
</tr>
<tr>
<!-- rowsapn="n" 행에서 n칸만큼 표에서 차지-->
<td rowspan="2">황기태</td>
<td colspan="2">60</td>
<!-- colsapn="n" 열 에서 n칸만큼 표에서 차지-->
</tr>
<tr>
<td colspan="2">60</td>
</tr>
</table>
</body>
</html>
#2 앵커,하이퍼링크, id변수 입력 삽입
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!--하이퍼링크: <a href="주소"></a> -->
<h2>포털사이트</h2>
<hr/>
<ul>
<li><a href="https://www.naver.com/">네이버</a></li>
<li><a href="https://www.google.com" target="_blank">구글</a></li>
<!-- 새로운 창으로 열림: <target="_blank"> -->
<li><a href="https://www.daum.net">다음</a></li>
<li><a href="#youtube1"> 유튜브 이동하기</a></li>
<!-- 아이디로 이동할 때 #이 쓰임 -->
</ul>
<hr />
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<sapn id="youtube1">Youtube Player</sapn>
<br>
<!-- ifrme : 유튜브 동영상 올리기 src : 동영상주소 webkitallowfullscreen="" allowfullscreen="" :풀 스크린 -->
<iframe width="90%" height="400px" id="player" webkitallowfullscreen="" allowfullscreen="" src="http://www.youtube.com/embed/6fJKlCUyhOs"></iframe>
<br><br>
<video src="bear.mp4" width="320px" height="400px" controls=true autoplay=true loop=true></video>
<br><br>
<audio src="EmbraceableYou.mp3" controls=true autoplay=true loop=true></audio>
</body>
</html>
#3 연습문제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>컴퓨터 기술 소개</title>
<header><h2>스마트폰</h2></header>
</head>
<body>
<p>스마트폰은 컴퓨터를 결합한 무선 휴대전화기이다. PC에서 실행되는 운영체제보다 작게 만든 모바일 운영체제를 탑재하여
인터네 검색,전자우편,간단한 문서 편집,카메라, 오디오 재생 등의 PC의 기능을 거의 모두 갖추고 있다.
</p>
<h3>목차</h3>
<ul>
<li><a href="#역사"><ins>역사</ins></a></li>
<li><a href="#안드로이드"><ins>안드로이드폰<ins></a></li>
<li><a href="#아이폰"><ins>아이폰</ins></a></li>
<li><a href="#샘플"><ins>샘플</ins></a></li>
</ul>
<span id="역사"><h3><ins><a href="https://ko.wikipedia.org/wiki/%EC%8A%A4%EB%A7%88%ED%8A%B8%ED%8F%B0"target="_blank">역사</a></ins></h3></span>
<p>최최의 스마트폰은 사이먼으로 추정된다.</p>
<span id="안드로이드"><h3><ins><a href="https://ko.wikipedia.org/wiki/%EC%95%88%EB%93%9C%EB%A1%9C%EC%9D%B4%EB%93%9C" target="_blank">안드로이드</a></ins></h3></span>
<p>안드로이드는</p>
<span id="아이폰"><h3><ins><a href="https://ko.wikipedia.org/wiki/%EC%95%84%EC%9D%B4%ED%8F%B0" target="_blank">아이폰</a></ins></h3></span>
<p>아이폰은 2007년 1월 9일</p>
<span id="샘플"><h3>샘플</h3></span>
<img width="100px" height="300px" src="galaxys7.png"/>
<img width="100px" height="300px" src="nokia.PNG"/>
<img width="100px" height="300px" src="iphone6.PNG"/>
<img width="100px" height="300px" src="windowphone.PNG"/>
<img width="100px" height="300px" src="tizen.png"/>
</body>
</html>
'HTML5&CSS' 카테고리의 다른 글
| .vscode 설정후 Ctrl + Shift + B 실행하기 (0) | 2018.12.04 |
|---|---|
| 2018.12.03 화면배치(overflow,margin사용) (0) | 2018.12.03 |
| 2018.11.30 시멘틱구조 , 화면배치 , 로그인폼 (0) | 2018.11.30 |
| 2018.11.28 글자배경/이미지삽입/표만들기/리스트만들기 (0) | 2018.11.28 |
| 2018.11.27 페이지의 기본 구조 (0) | 2018.11.27 |