국비 33일차 Html
2021. 2. 23. 18:14
2021.02.23 국비교육 33일차
[TOC]
base
- 경로 지정
<!DOCTYPE html>
<html>
<head>
<base href = "http://localhost:8081/01HTML_CSS/images/" target = "_blank">
<meta charset="UTF-8">
<title>base 태그 실습</title>
</head>
<body>
<img src = "001.png" width = "100" height = "100">
<a href = "http://www.daum.net">다음</a>
</body>
</html>Link
- 외부 파일 지정
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 외부 css 파일의 사용 -->
<link rel ="stylesheet" type ="text/css" href ="../css/mystyle.css">
<title>link 태그 실습</title>
</head>
<body>
<p>Hello</p>
</body>
</html>style
- css 적용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>style 태그 실습</title>
<style type = "text/css">
p{
color:red;
}
</style>
</head>
<body>
<p>Hello</p>
</body>
</html>script
- javascript 적용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>script 태그 실습</title><!-- 동적 처리를 위한 javascript 코드 -->
<script type ="text/javascript">
document.write("Hello World");
document.write(" <h1> Hello World </h1>");
</script>
</head>
<body>
<p>Hello</p>
</body>
</html>header, hr
- header : 말머리
- hr : 절취선
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>header hr 태그 실습</title>
</head>
<body>
<h1>This is header1</h1>
<hr />
<h2>This is header2</h2>
<h3>This is header3</h3>
<hr size = "10" noshade/>
<h4>This is header4</h4>
<h5>This is header5</h5>
<hr size = "3" width = "500" noshade = "noshade"/>
<h6>This is header6</h6>
</body>
</html>P
- 문단 나누는 태그
Br
- 개행문자
각종 포맷
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>텍스트 포맷 태그 실습</title>
</head>
<body>
<b> 문자열을 진하게 </b><br>
<strong>문자열 강조</strong><br>
<i>문자열을 이탤릭체로</i><br>
HTML5<sub>아래첨자로</sub><br>
HTML5<sup>위 첨자로</sup><br>
<address>
서울시 강남구 역삼동 34-21번지
</address>
<del>20000원</del>1000원<br>
<ins>밑줄</ins>
</body>
</html>a (anchor)
- 서로 다른 웹 페이지 또는 하나의 웹 페이지 내부에서 특정한 위치로 이동 가능
- unvisited = underline + blue
- visited = underline + purple
- active = underline + red
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>a 태그 실습</title>
</head>
<body>
<a href = "target.html" title = "target.html 로컬페이지">로컬페이지 이동</a><br>
<a href = "http:www.daum.net" > 외부페이지 이동</a>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>a 태그 실습</title>
</head>
<body>
<a href = "#Java"> java행으로 이동</a><br>
<a href = "#Oracle">Oracle행으로 이동</a><br>
<a href = "target2.html#Java">다른 페이지의 html행으로 이동</a><br>
<p>
test test test test test test test test test test test test test test
test test <br> test test test test test test test test test test
test test test test test test<br> test test test test test test
test test test test test test test test test test<br> test test
test test test test test test test test test test test test test test<br>
test test test test test test test test test test test test test test
test test <br> test test test test test test test test test test
test test test test test test<br> test test test test test test
test test test test test test test test test test<br> test test
test test test test test test test test test test test test test test<br>
test test test test test test test test test test test test test test
test test <br> test test test test test test test test test test
test test test test test test<br> test test test test test test
test test test test test test test test test test<br> test test
test test test test test test test test test test test test test test<br>
test test test test test test test test test test test test test test
test test <br> test test test test test test test test test test
test test test test test test<br> test test test test test test
test test test test test test test test test test<br> test test
test test test test test test test test test test test test test test<br>
test test test test test test test test test test test test test test
test test <br> test test test test test test test test test test
test test test test test test<br> test test test test test test
test test test test test test test test test test<br> test test
test test test test test test test test test test test test test test<br>
test test test test test test test test test test test test test test
test test <br> test test test test test test test test test test
test test test test test test<br> test test test test test test
test test test test test test test test test test<br> test test
test test test test test test test test test test test test test test<br>
test test test test test test test test test test test test test test
test test <br> test test test test test test test test test test
test test test test test test<br> test test test test test test
test test test test test test test test test test<br> test test
test test test test test test test test test test test test test test<br>
test test test test test test test test test test test test test test
test test <br> test test test test test test test test test test
test test test test test test<br> test test test test test test
test test test test test test test test test test<br> test test
test test test test test test test test test test test test test test<br>
test test test test test test test test test test test test test test
test test <br> test test test test test test test test test test
test test test test test test<br> test test test test test test
test test test test test test test test test test<br> test test
test test test test test test test test test test test test test test<br>
test test test test test test test test test test test test test test
test test <br> test test test test test test test test test test
test test test test test test<br> test test test test test test
test test test test test test test test test test<br> test test
test test test test test test test test test test test test test test<br>
test test test test test test test test test test test test test test
test test <br> test test test test test test test test test test
test test test test test test<br> test test test test test test
test test test test test test test test test test<br> test test
test test test test test test test test test test test test test test<br>
test test test test test test test test test test test test test test
test test <br> test test test test test test test test test test
test test test test test test<br> test test test test test test
test test test test test test test test test test<br> test test
test test test test test test test test test test test test test test<br>
test test test test test test test test test test test test test test
test test <br> test test test test test test test test test test
test test test test test test<br> test test test test test test
test test test test test test test test test test<br> test test
test test test test test test test test test test test test test test<br>
test test test test test test test test test test test test test test
test test <br> test test test test test test test test test test
test test test test test test<br> test test test test test test
test test test test test test test test test test<br> test test
test test test test test test test test test test test test test test<br>
</p>
<a id = "Java"> 여기서 부터는 자바행</a> <!-- #id값으로 링크 걸어서 찾아올수 있게 함 -->
JavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJava
<br>
JavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJava
<br>
JavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJavaJava
<br>
<a id = "Oracle">여기서 부터는 오라클행</a>
<p>
OracleOracleOracleOracleOracleOracleOracleOracleOracleOracleOracleOracleOracle<br>
OracleOracleOracleOracleOracleOracleOracleOracleOracleOracleOracleOracleOracle<br>
OracleOracleOracleOracleOracleOracleOracleOracleOracleOracleOracleOracleOracle<br>
OracleOracleOracleOracleOracleOracleOracleOracleOracleOracleOracleOracleOracle<br>
OracleOracleOracleOracleOracleOracleOracleOracleOracleOracleOracleOracleOracle<br>
OracleOracleOracleOracleOracleOracleOracleOracleOracleOracleOracleOracleOracle<br>
OracleOracleOracleOracleOracleOracleOracleOracleOracleOracleOracleOracleOracle<br>
</p>
</body>
</html>target
- 링크된 문서를 어디서 실행 시킬지를 지정
- _blank : 새로운 윈도우 창 또는 tab에 문서를 open
- _self : default로써 현재 클릭한 창 또는 tab에 문서를 open
- _parent : parent 프레임에 문서를 open
- _top :현재 윈도우에 전체화면으로 open
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>a 태그 실습</title>
</head>
<body>
<a href = "test/target.html" title = "target.html 로컬페이지" target="_top">로컬 페이지 이동</a><br>
<a href = "http://www.daum.net" target = "_blank">외부 페이지 이동</a>
</body>
</html>table
- 표
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>table 태그 실습</title>
</head>
<body>
<table border = "1">
<tr>
<th>1열 제목</th>
<th>2열 제목</th>
</tr>
<tr>
<td>1열 1행</td>
<td>2열 1행</td>
</tr>
<tr>
<td>1열 2행</td>
<td>2열 2행</td>
</tr>
</table>
</body>
</html>'ETC > 국비교육' 카테고리의 다른 글
| 국비 35일차 css 정리 (0) | 2021.02.25 |
|---|---|
| 국비 34일차 html(colspan, rowspan, ol, li, dl, div, span, form) (0) | 2021.02.24 |
| 국비 27~32일차 mybatis 정리 (0) | 2021.02.23 |
| 국비 26일차 JDBC(delete, update, 클래스 연동) (0) | 2021.02.10 |
| 국비 25일차 JDBC(DB접근, Select, insert) (0) | 2021.02.08 |