html 기초

RuTel 2021. 1. 7. 15:33

2021. 1. 7. 15:33

728x90

0. 개발 환경 구축

https://rutel.tistory.com/309?category=605953

이클립스 웹(html+jsp) 개발환경 구축

JSP(Java Server Page) 설치 JAVA 개발을 할수 있는 자바개발툴 JDK https://www.oracle.com/java/technologies/ Top Downloads - Java SE - Java SE 8 https://www.oracle.com/java/technologies/javase-download..

rutel.tistory.com

1. 기초 소스 + 문단 나누기 등 기본태그

<!DOCTYPE html>
<html>
 <head>
  <title>html 첫 시간</title>
 </head>
 <body>
  <h1>html 첫 시간</h1>
  <h2>HTML이란?</h2>
  <p>
  Hyper Text Markup Language의 약자.<br>
  웹페이지를 만들어 주는(구조를 담당) 프로그램언어.<br>
  명령어(tag)로 구성된다.
  </p>
  <p>
  일반적으로는 tag는 각 괄호 안에 들어가고 시작 tag와 종료 tag 한 쌍으로 이루어지며<br>
  원칙적으로 대소문자 구별은 없으나 소문자로 쓴다.<br>
  소스상에서 공백처리는 줄바꿈 적용 불가하고<br>
  문자 사이 띄우기는 한 개만 가능하다.
  </p>
  
  <p>
  웹문서를 저장할 때 확장자는 .htm 또는 .html로 저장한다.<br>
  한글을 포함하여 영문 이외의 특수문자 등을 제대로 나타내려면 인코딩은 UTF-8로 지정한다.
  </p>

  <hr>
   <h2>웹문서를 구성하는 필수(기본) 태그들</h2>
  <hr>

  <pre>
   &lt;!DOCTYPE html&gt;		----- 웹문서 버전을 브라우저에 알림
   &lt;html&gt;			----- 웹문서 시작 선언
    &lt;head&gt;			----- 웹문서 머리말 영역 시작 선언 
					사용자에 보이지않으나 여러 태그들 추가됨
     &lt;title&gt; ... &lt;/title&gt; 	----- 웹문서 제목 지정 (브라우저 탭 부분)
    &lt;/head&gt;			----- 웹문서 머리말 영역 끝 선언
    &lt;body&gt;			
	...			----- 사용자에게 보여질 컨텐츠 등을 지정함
    &lt;/body&gt;
   &lt;/html&gt;			----- 웹문서 끝 선언
  </pre>

  <hr>
  hn(n=1~6)태그 - 제목글자 태그들
  <hr>
  <p>
   글자는 두껍게(볼드체)로 나타나며
   위아래에 한 줄 공백이 생긴다.
   글자의 크기는 h1일 떄 가장 크고 점점 작아지다가 h6일 떄 가장 작다.
  </p>
  <h1>제목글자 태그 h1입니다.</h1>
  <h2>제목글자 태그 h2입니다.</h2>
  <h3>제목글자 태그 h3입니다.</h3>
  <h4>제목글자 태그 h4입니다.</h4>
  <h5>제목글자 태그 h5입니다.</h5>
  <h6>제목글자 태그 h6입니다.</h6>
<!--   <h7>제목글자 태그 h7입니다.</h7> -->
<!--   <h8>제목글자 태그 h8입니다.</h8> -->
<!--   <h9>제목글자 태그 h9입니다.</h9> -->

 <hr>
  <h2>body(본문)을 구성하는 여러 태그들</h2>
 <hr>
 <p> <!-- 소스상의 공백은 브라우저에 영향을 못 미치나 작업자의 효율성을 위함임 -->
  문단을 구성 &lt;p&gt;<br>
  줄 바꿈을 지정 &lt;br&gt;<br>
  수평선을 지정 &lt;hr&gt;<br>
  공백을 소스 그대로 살려줌 (고정폭 글꼴로 나타남) &lt;pre&gt;
 </p>
 <!-- 주석 태그입니다. -->

 <h3>풀꽃</h3>

 <pre>		나태주</pre>
 <p>
 자세히 보아야 예쁘다<br>
 오래 보아야 사랑스럽다<br>
 너도 그렇다
 </p>
 </body>
</html>

결과 미리보기 :

html 첫 시간

HTML이란?

Hyper Text Markup Language의 약자.
웹페이지를 만들어 주는(구조를 담당) 프로그램언어.
명령어(tag)로 구성된다.

일반적으로는 tag는 각 괄호 안에 들어가고 시작 tag와 종료 tag 한 쌍으로 이루어지며
원칙적으로 대소문자 구별은 없으나 소문자로 쓴다.
소스상에서 공백처리는 줄바꿈 적용 불가하고
문자 사이 띄우기는 한 개만 가능하다.

웹문서를 저장할 때 확장자는 .htm 또는 .html로 저장한다.
한글을 포함하여 영문 이외의 특수문자 등을 제대로 나타내려면 인코딩은 UTF-8로 지정한다.

웹문서를 구성하는 필수(기본) 태그들

   <!DOCTYPE html>		----- 웹문서 버전을 브라우저에 알림
   <html>			----- 웹문서 시작 선언
    <head>			----- 웹문서 머리말 영역 시작 선언 
					사용자에 보이지않으나 여러 태그들 추가됨
     <title> ... </title> 	----- 웹문서 제목 지정 (브라우저 탭 부분)
    </head>			----- 웹문서 머리말 영역 끝 선언
    <body>			
	...			----- 사용자에게 보여질 컨텐츠 등을 지정함
    </body>
   </html>			----- 웹문서 끝 선언

hn(n=1~6)태그 - 제목글자 태그들

글자는 두껍게(볼드체)로 나타나며 위아래에 한 줄 공백이 생긴다. 글자의 크기는 h1일 떄 가장 크고 점점 작아지다가 h6일 떄 가장 작다.

제목글자 태그 h1입니다.

제목글자 태그 h2입니다.

제목글자 태그 h3입니다.

제목글자 태그 h4입니다.

제목글자 태그 h5입니다.

제목글자 태그 h6입니다.

body(본문)을 구성하는 여러 태그들

문단을 구성 
줄 바꿈을 지정 
수평선을 지정 <hr>
공백을 소스 그대로 살려줌 (고정폭 글꼴로 나타남) <pre>

풀꽃

		나태주

자세히 보아야 예쁘다
오래 보아야 사랑스럽다
너도 그렇다

2. 글자의 형태와 관련된 태그들

<!DOCTYPE html>
<!--html5버전 (현재 웹표준)의 문서임을 선언 -->
<html>
<head>
<meta charset="UTF-8">
    <title>html 두번째</title>
</head>
<body>
    <hr>
    <h1>글자의 형태와 관련된 태그들</h1>
    <hr>
    볼드체 <b>글자를 두껍게</b> -- &lt;b&gt;태그<br>
    볼드체 <strong>(중요한 내용) 글자 두껍게</strong> -- &lt;strong&gt;태그<br>
    이탤릭 <i>글자를 기울여서</i> -- &lt;i&gt;태그<br>
    이탤릭 <em>(강조의 의미) 글자를 기울여서</em> -- &lt;em&gt;태그<br>
    <small>작은 글자</small> -- &lt;small&gt;태그<br>
    2<sup>2</sup>&lt;sup&gt;태그<br>
    H<sub>2</sub>O&lt;sub&gt;태그<br>
    마크<mark>(형광펜)</mark> 효과<br>
<h3>동시 적용 시의 올바른 문법</h3>
<p>
	1. <mark><b>마크펜 효과 + 볼드체</b></mark> 동시 <br>
	2. <b><mark>마크펜 효과 + 볼드체</mark></b> 동시 <br> 	
<!-- 	3. <b><mark>마크펜 효과 + 볼드체</b></mark> 동시 = x<br> -->
<!-- 	4. <mark><b>마크펜 효과 + 볼드체</mark></b> 동시 = x<br> -->
<!-- 시작과 종료태그를 서로 감싸듯이 쓴다. 엇갈리게 쓰면 틀림 -->
</p>
<h3>특수문자를 나타내는 특수문자 태그들<sup>(&로 시작하고 ;로 끝남)</sup></h3>
1.예약어 관련 특수문자 태그들
	<small>(html문서에서 특별한 약속이 되어있는 문자를 예약이라 함)</small> <br>	
	&amp; = &amp;amp; <br>
	&lt; = &amp;lt; <br>
	&gt; = &amp;gt; <br>
	(공백)&nbsp; = &amp;nbsp; 
	 <hr>
	&copy; = &amp;copy; <br>
	&trade; = &amp;trade; <br>
	&reg; = &amp;reg; <br>
 </hr>
</body>

</html>

결과 미리보기 :

글자의 형태와 관련된 태그들

볼드체 글자를 두껍게 -- 태그
볼드체 (중요한 내용) 글자 두껍게 -- 태그
이탤릭 글자를 기울여서 -- 태그
이탤릭 (강조의 의미) 글자를 기울여서 -- 태그

작은 글자

-- 태그
2²태그
H₂O태그
마크

(형광펜)

효과

동시 적용 시의 올바른 문법

마크펜 효과 + 볼드체

동시
2. 마크펜 효과 + 볼드체 동시

특수문자를 나타내는 특수문자 태그들^{(&로 시작하고 ;로 끝남)}

1.예약어 관련 특수문자 태그들

(html문서에서 특별한 약속이 되어있는 문자를 예약이라 함)

& = &
< = <
> = >
(공백) =

결과 미리보기 :

3. 목록 만들기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>list - 목록 만들기</title>
</head>
<body>

<hr>
<h1>list - 목록 만들기</h1>
<hr>

<!-- 제목글자 2번째 크기 -->
<h2>목록의 종류</h2>

<p>
순서 있는 목록 &lt;ol&gt;<br>
순서 없는 목록 &lt;ul&gt;<br>
정의 목록 &lt;dl&gt;<br>
</p>
<hr>
<h2>ol - 순서 있는 목록</h2>
<!-- orderd list -->
<ol> 
	<li>coffee</li>
	<li>tea</li>
	<li>milk</li>
	<li>juice</li>
	<li>cocoa</li>
</ol>

<ol>
	<li>red</li>
	<li>green</li>
	<li>blue</li>
</ol>

<ol>
<li>html</li>
<li>css</li>
<li>JS</li>
</ol>

<!-- 순서 없는 목록 -->
<ul>
<li>coffee</li>
<li>tea</li>
<li>milk</li>
<li>juice</li>
<li>cocoa</li>
</ul>

<ul>
<li>red</li>
<li>green</li>
<li>blue</li>
</ul>

<ul>
<li>html</li>
<li>css</li>
<li>JS</li>
</ul>

<hr>
<h3>목록 앞의 모양을 지정하는 속성 - type</h3>
<h4>ol의 모양 지정 속성값들 ( type="<mark>1/a/A/i/I</mark>" )</h4>
<ol type="1">
<li>1 (기본값)</li>
<li>a</li>
<li>A</li>
<li>i</li>
<li>I</li>
</ol>

<ol type="a">
<li>1 (기본값)</li>
<li>a</li>
<li>A</li>
<li>i</li>
<li>I</li>
</ol>

<ol type="A">
<li>1 (기본값)</li>
<li>a</li>
<li>A</li>
<li>i</li>
<li>I</li>
</ol>

<ol type="i">
<li>1 (기본값)</li>
<li>a</li>
<li>A</li>
<li>i</li>
<li>I</li>
</ol>

<ol type="I">
<li>1 (기본값)</li>
<li>a</li>
<li>A</li>
<li>i</li>
<li>I</li>
</ol>

<h4>ul의 모양 지정 속성값들 ( type="<mark>disc/circle/square</mark>" )</h4>
<ul type="disc">
<li>disc</li>
<li>circle</li>
<li>square</li>
</ul>

<ul type="circle">
<li>disc</li>
<li>circle</li>
<li>square</li>
</ul>

<ul type="square">
<li>disc</li>
<li>circle</li>
<li>square</li>
</ul>

<hr>
<h4>start속성으로 시작 기호(숫자) 값 바꾸기</h4>
<ol type="I" start="11">
<li>html</li>	<!-- 로마자 11부터 시작 -->
<li>css</li>
<li>JS</li>
</ol>

<hr>
 <h2>하위 목록 지정하기</h2>
<hr>

<ul>
 <li>html
  <ol>
   <li>tag</li>
   <li>속성</li>
   <li>속성값</li>
  </ol>
 </li>
 <li>css
  <ul>
   <li>selector</li>
   <li>속성</li>
   <li>속성값</li>
  </ul>
 </li>
 <li>JS</li>
</ul>

<h5>문제, 하위목록 만들기</h5>
<ol>
 <li>coffee
	<ul type="square">
  		<li> 아메리카노 </li>
  		<li> 카페라떼 </li>
  		<li> 카푸치노 </li>
	</ul>
 </li>

 <li>tea
	<ul>
  		<li> 녹차 </li>
  		<li> 홍차 </li>
	</ul>
 </li>
</ol>

<hr>
<h2>dl (Description List) - 정의 목록</h2>
<dl>
	<dt>dl</dt>
	<dd>정의 목록</dd>
</dl>

<dl>
	<dt>ol</dt> 
	<dd>순서가 있는 목록</dd>
</dl>

<pre>
 정의목록(dl)은 li를 쓰지 않고
 &lt;dt&gt; - 정의 내릴 대상
 &lt;dd&gt; - 정의 내용
                     를 쓴다.
</pre>

<dl>
<dt>ol</dt>
<dd>순서 있는 목록</dd>
<dt>ul</dt>
<dd>순서 없는 목록</dd>
</dl>

<dl>
<dt>HTML</dt>
<dd>Hyper Text Markup Language의 약자.</dd>
   <dd>웹페이지를 만들어 주는 프로그램언어.</dd>
   <dd>웹페이지 구조를 담당</dd>
</dl>

</body>
</html>

결과 미리보기 :

list - 목록 만들기

목록의 종류

순서 있는 목록 <ol>
순서 없는 목록 <ul>
정의 목록 <dl>

ol - 순서 있는 목록

coffee
tea
milk
juice
cocoa

red
green
blue

html
css
JS

coffee
tea
milk
juice
cocoa

red
green
blue

html
css
JS

목록 앞의 모양을 지정하는 속성 - type

ol의 모양 지정 속성값들 ( type="1/a/A/i/I" )

1 (기본값)
a
A
i
I

1 (기본값)
a
A
i
I

1 (기본값)
a
A
i
I

1 (기본값)
a
A
i
I

1 (기본값)
a
A
i
I

ul의 모양 지정 속성값들 ( type="disc/circle/square" )

disc
circle
square

disc
circle
square

disc
circle
square

start속성으로 시작 기호(숫자) 값 바꾸기

html
css
JS

하위 목록 지정하기

html
1. tag
2. 속성
3. 속성값
css
- selector
- 속성
- 속성값
JS

문제, 하위목록 만들기

coffee
- 아메리카노
- 카페라떼
- 카푸치노
tea
- 녹차
- 홍차

dl (Description List) - 정의 목록

dl: 정의 목록

ol: 순서가 있는 목록

 정의목록(dl)은 li를 쓰지 않고
 <dt> - 정의 내릴 대상
 <dd> - 정의 내용
                     를 쓴다.

ol: 순서 있는 목록
ul: 순서 없는 목록

HTML: Hyper Text Markup Language의 약자.; 웹페이지를 만들어 주는 프로그램언어.; 웹페이지 구조를 담당

4. 표 만들기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>table - 표 만들기</title>
<style type="text/css">
	talbe, th, td { border:1px solid #69f; }
</style>
</head>
<body>
<hr>
<h1>table - 표 만들기</h1>
<table>
<tr>
	<th>태그</th>
	<th>설명</th>
</tr>
<tr>
	<td>table</td>
	<td>표 전체를 구성하는 태그</td>
</tr>

<tr>
	<td>tr</td>
	<td>줄을 구성하는 태그</td>
</tr>

<tr>
	<td>th</td>
	<td>제목칸 구성하는 태그</td>
</tr>

<tr>
	<td>td</td>
	<td>(일반)칸 구성하는 태그</td>
</tr>
</table>

</body>

</html>

표에 관한 스타일은 head태그내에서 css를 통해 지정한다.

결과 미리보기 :

table - 표 만들기

태그	설명
table	표 전체를 구성하는 태그
tr	줄을 구성하는 태그
th	제목칸 구성하는 태그
td	(일반)칸 구성하는 태그

저작자표시 비영리 변경금지

'Web Develop > Web Programming' 카테고리의 다른 글

WebRTC 및 Node 등 스터디 (0)	2022.02.25
Spring Boot시작하기 (0)	2021.08.10
반응형 웹 만들기 (0)	2017.03.23
HTML 5 미지원 브라우저 고려하기 (0)	2017.03.21
윈도우 웹서버 설치 및 HTML 실습기초 (0)	2017.03.09

Roopretelcham

html 기초

0. 개발 환경 구축

1. 기초 소스 + 문단 나누기 등 기본태그

html 첫 시간

HTML이란?

웹문서를 구성하는 필수(기본) 태그들

제목글자 태그 h1입니다.

제목글자 태그 h2입니다.

제목글자 태그 h3입니다.

제목글자 태그 h4입니다.

제목글자 태그 h5입니다.

제목글자 태그 h6입니다.

body(본문)을 구성하는 여러 태그들

풀꽃

2. 글자의 형태와 관련된 태그들

글자의 형태와 관련된 태그들

동시 적용 시의 올바른 문법

특수문자를 나타내는 특수문자 태그들^{(&로 시작하고 ;로 끝남)}

3. 목록 만들기

list - 목록 만들기

목록의 종류

ol - 순서 있는 목록

목록 앞의 모양을 지정하는 속성 - type

ol의 모양 지정 속성값들 ( type="1/a/A/i/I" )

ul의 모양 지정 속성값들 ( type="disc/circle/square" )

start속성으로 시작 기호(숫자) 값 바꾸기

하위 목록 지정하기

문제, 하위목록 만들기

dl (Description List) - 정의 목록

4. 표 만들기

table - 표 만들기

'Web Develop > Web Programming' 카테고리의 다른 글

+ Recent posts

티스토리툴바

Roopretelcham

html 기초

0. 개발 환경 구축

1. 기초 소스 + 문단 나누기 등 기본태그

html 첫 시간

HTML이란?

웹문서를 구성하는 필수(기본) 태그들

제목글자 태그 h1입니다.

제목글자 태그 h2입니다.

제목글자 태그 h3입니다.

제목글자 태그 h4입니다.

제목글자 태그 h5입니다.

제목글자 태그 h6입니다.

body(본문)을 구성하는 여러 태그들

풀꽃

2. 글자의 형태와 관련된 태그들

글자의 형태와 관련된 태그들

동시 적용 시의 올바른 문법

특수문자를 나타내는 특수문자 태그들(&로 시작하고 ;로 끝남)

3. 목록 만들기

list - 목록 만들기

목록의 종류

ol - 순서 있는 목록

목록 앞의 모양을 지정하는 속성 - type

ol의 모양 지정 속성값들 ( type="1/a/A/i/I" )

ul의 모양 지정 속성값들 ( type="disc/circle/square" )

start속성으로 시작 기호(숫자) 값 바꾸기

하위 목록 지정하기

문제, 하위목록 만들기

dl (Description List) - 정의 목록

4. 표 만들기

table - 표 만들기

'Web Develop > Web Programming' 카테고리의 다른 글

+ Recent posts

티스토리툴바

특수문자를 나타내는 특수문자 태그들^{(&로 시작하고 ;로 끝남)}