html_종합

2018. 1. 24. 13:25

html

어디서 작성하여도 상관이 없다.

메모장으로 한번 실습을 진행해보도록 하겠다.

메모장으로 html을 만들기 위해서는 단순히 저장할때 모든파일 + 확장자를 html로 해주면 된다.

이때 한글을 쓸거면 인코딩을 utf-8로 해주도록 한다.

html 태그

문서의 시작과 끝을

<html>
</html>

이러한 방식으로 해주어 이문서가 html임을 알린다.

한번 실습을 해보자.

구글을 통한 분석

F12를 누르면 HTML코드를 볼 수 있다.

실제로 개발자들이 짠 코드를 볼 수 있게되는것이다.

DIV로 보통 파트를 구분하므로 마우스 커서를 대면 위의 그림과 같이 특정 부분이 보임을 알 수 있다.

이번에는 디버거를 보자

이내용을 내 HTML파일에 복붙해보자

잘은 안되지만 아무튼.. 이정도로 만족 하겠다.

HEAD

정의

<HEAD>
</HEAD>

예제
<html>
 <head>
  <title>html입니다.</title>
 </head>
</html>

이러한 방식이다.

헤드를 쓰면 위 그림에서 html입니다. 라는 부분이 작성된다.

br

엔터의 기능을 수행한다.

정의
문장뒤<br>

예제
<html>
 <body> 
html<br>
hi<br>
 </body>
</html>

p

단락을 구분지어 준다.

정의
<p>
문장들
</p>

예제
<html>
 <body> 
  <p>단락</p>
   단락보기
 </body>
</html>

div

영역을 나눌때 사용된다.

정의

<div>
영역
</div>

예제
<html>
 <body> 
  <div>default</div>
  <div align="center">center</div>
  <div align="right">right</div>
 </body>
</html>

스타일 넣어주기

정의
 <div style= "배경에대한설정-이때 각 설정끼리 구분은;로한다" 글에대한설정>
 내용
 </div>     

예제
<html>
 <body> 
  <div style= " background:red; height:100px;" align="center"><br>첫줄<br>123 / 456</div>   
  <div style= " background:orange; height:200px;" align="center"><br>둘째줄</div>   
  <div style= " background:yellow; height:300px ;" align="center"><br>셋째줄<br>789 | 123 </div>
 </body>
</html>

입력한 그대로 넣어주기

정의

<pre>
내용
</pre>

예제

<html>
 <body> 
 <pre>
  o o
   0 0
  o o
 </pre>
 </body>
</html>

선그어주기

정의

<hr 옵션>

예제

<html>
 <head>
  <title>html입니다.</title>
 </head>
 <body>
    1<hr color="red">
    2<hr color="orange" size="10">
    3<hr width="100">
    4<hr align="left" width="200">
    5<hr align="center" width="300">
    6<hr align="right" width="400">
 </body>
</html>

글씨 헤더<크기조정>

정의

<h숫자 옵션> </h숫자>

예제

<html>
 <head>
  <title>html입니다.</title>
 </head>
 <body>
    <h1>H1</h1>
    <h2 align="left">H2</h2>
    <h3 align="center">H3</h3>
    <h4 align="right">H4</h4>
    <h5>H5</h5>
    <h6>H6</h6>
 </body>
</html>

글자 모양 변경

정의

    <i>기울이기</i><br>
    <b>기울이기</b><br>
    <u>밑줄치기</u><br>
    <s>취소긋기</s><br>
    <q>따옴표~</q><br>

예제
<html>
 <head>
  <title>html입니다.</title>
 </head>
 <body>
    <i>기울이기</i><br>
    <b>기울이기</b><br>
    <u>밑줄치기</u><br>
    <s>취소긋기</s><br>
    <q>따옴표~</q><br>
 </body>
</html>

폰트

정의

<font 조건> </font>

예제

<html>
 <head>
  <title>html입니다.</title>
 </head>
 <body>
    <font size="3" face="궁서">궁서_크기3</font>
    <font size="4" face="굴림">굴림_크기4</font>
    <font size="5" color="red">기본_크기5</font>
 </body>
</html>

ul,ol

ul---unorder list 순서없이 처리

ol--order list 숫자순대로처리

정의

<ul>
<li> </li>
<li> </li>
.
.
.
</ul>

<ol>
<li> </li>
<li> </li>
.
.
.
</ol>

예제

<html>
 <head>
  <title>html입니다.</title>
 </head>
 <body>
    <ul>
    <li><font size="1">ul</font></li>
    <li><font size="2">ul</font></li>
    <li><font size="3" face="궁서">ul</font></li>
    </ul>

    <ol>
    <li><font size="1">ol</font></li>
    <li><font size="2">ol</font></li>
    <li><font size="3" face="궁서">ol</font></li>
    </ol>

 </body>
</html>

url 접속

글자를 통해 들어가기 - a tag

정의

내용

예제

html입니다. google google

-targe="_blank"는 옵션으로 클릭시 새 창으로 접속을 의미

사진을 통하여 들어가기

사진올리기

정의
<img src="경로\사진.jpg" 옵션>
이때 사진의 경로를쓰지 않으려면 html파일과 사진의 경로가 동일하면 된다.

예제

옵션으로 테두리,크기 넣기

<html>
 <head>
  <title>html입니다.</title>
 </head>
 <body>
    <img src="그림.jpg" border="3" width="10" height="10">
    <img src="그림.jpg"  border="10" width="20" height="20">
    <img src="그림.jpg"  border="20" width="30" height="30">
 </body>
</html>

배경

배경색넣기
정의
<body bgcolor = "green">

사진을 배경으로 넣기
정의
 <body background="사진.jpg">

예제
<html>
 <head>
  <title>html입니다.</title>
 </head>
 <body>
 <body background="그림.jpg">
 </body>
</html>

'언어 > jsp' 카테고리의 다른 글

jsp 프로그래밍 (0)	2018.02.01
jsp_css_html (0)	2018.01.24
UTF-8 vs EUC-KR 이용하기_<문자 치환>_지시자_java와html의 만남_표현식_주석처리_ (0)	2018.01.24
http_jsp_javascript_java_EclipseEE설정_hellowolrd_port_ (0)	2018.01.23

ITHouse