[HTML] 기본지식 + 태그모음

Notice

Recent Posts

Recent Comments

Link

수빈의 GitHub

250x250

« 2025/04 »
일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

Tags more

Archives

Today

Total

관리 메뉴

[JAVA_Back-End]

[HTML] 기본지식 + 태그모음 본문

Programming/HTML+ CSS + JAVASCRIPT

[HTML] 기본지식 + 태그모음

너굴위 2023. 8. 3. 22:53

728x90

HTML(Hyper Text Markup Language)

- Hyper text : 링크
- Markup Language : 태그를 이용해서 내용을 표현

- 웹 화면을 구성하는 언어 / 팀 버너스리 invented

1. html - 구조표현
2. css - 디자인
3. javascript - 기능표현

기본 구조
* 태그: <태그>내용</태그>

w3c - world wide consortium
https://www.w3.org
- 웹에 대한 표준을 정함
- 문법이 아닌 권고안이기 때문에 브라우저 제작업체 별로 다른 해석(MS)이 가능함.
- 따라서 같은 태그에 다른 디자인이 나오게 되는 것
- 크로스 브라우징(Cross Browsing): 적어도 표준 웹 기술을 채용하여 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 비슷하게 만듦과 동시에 어느 한쪽에 최적화되어 치우지지 않도록 공통 요소를 사용하여 웹페이지를 제작하는 기법

- 버전이 지속적으로 향상된다. (html1.0 => html 5) (굉장히 빠르게,,)
- https://www.w3schools.com/ : html/css/javascript관련 정보나 예제를 얻을 수 있다.

(태그 관련 내용 담은 사이트) (다른 언어 내용들도 포함되어있음,,JAVA,,PHP등,,) (이 사이트 좋은듯;;)

*HTML Introduction
- https://html5test.com
html이 만들어지게 된 계기 -> 팀 버너스리가 논문을 표현하는 방법을 찾다 만들게 됨 (메모장/워드같은 역할)

*중요
HTML stands for Hyper Text Markup Language
HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page

브라우저

- 원격에 있는 html문서를 요청
- html을 해석해서 디자인화 (랜더링)

html문서
1. 일반문서에 확장자 html 또는 htm으로 지정
2. html기술
*대소문자 구별안함
*잘못써도 에러없음(디자인 표현이 안됨)

기본 골격
<!doctype html> --> html5 버전임을 기술
<html>
<head>문서 전체 규정 </head>
<body> 내용 </body>
</html>

==> html은 감싸는 형태로 룰을 정해서 작성하도록 한다.

HTML 태그

ex1) - 기본골격

<!DOCTYPE html>

<html>

<head>

</head>

<body>

Hello html

</body>

</html>

ex2) - 타이틀 생성

<!DOCTYPE html>

<html>

<head>

</head>

<body>

안녕 html

</body>

</html>

ex3) - 주석처리

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<!--주석입니다: comment

1. 소스코드 해설

2. 팀간의 소통-->

<!--안녕 html<br /><br />

안녕 html1<br /><br />

안녕 html2<br /><br />

안녕 html3<br /><br /> 여러 줄 주석입니다-->

안녕 html4<br /><br />

안녕 html5<br /><br />

</body>

</html>

ex4) - 엔터키와 스페이스바 적용법

<!DOCTYPE html>

<html>

<head>

</head>

<body>

안녕 h t m l 4 <br /><br />

안녕 h t m l 5<br /><br />

안녕 h  t  m  l  6<br/><br/>

</body>

</html>

ex5) - 글자크기 조정

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<!--

제목글

h1...h6

h숫자 -> 글자의 크기를 조절할 수 있도록 한다.

if h7을 적으면 -> 존재하지 않는 태그는 무시당하게 된다. (기본글씨크기로 나옴)

-->

<h1>Hello html</h1>

<h2>Hello html</h2>

<h3>Hello html</h3>

<h4>Hello html</h4>

<h5>Hello html</h5>

<h6>Hello html</h6>

<hx>Hello htmlhx</hx>

</body>

</html>

ex6) - 중간선 생성 <hr />

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<!--

중간선

-->

Hello html<br />

<hr />

Hello html<br />

</body>

</html>

ex7) - 문단 나누기 <p>, <div>, <span>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<!--

문단(블록)- 문단의 형식에 관련한 태그

-->

<span>또다른문단</span>

<span>또다른문단</span>

</body>

</html>

ex8) 인용태그 <blockquote>, <pre>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<!--

문단(블록) - 인용할 때 쓰이는 태그

엔터키

<pre>

-->

<p>

새문단

</p>

새문단

</blockquote>

새문단

새 문 단

</pre>

</body>

</html>

ex9) - 글씨테마적용

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>This Text is normal</p>

<p><b>This Text is normal</b></p>

<p><i>This Text is normal</i></p>

<p>This <sub>Text</sub> is <sup> normal</sup></p>

</body>

</html>

ex10) - 목록생성 <ol>, <ul>, <dl>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<!-- 목록

1. 순서가 있는 목록

2. 순서가 없는 목록

3. 사전식 목록

-->

</ol>

</ul>

<dl>

</dl>

</body>

</html>

ex11) - 하위목록 생성

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<!-- 목록안에 하위목록 만들기

-->

<ul>

<li>Coffee</li>

<li>

<ul>

<li>Black Coffee</li>

<li>Latte</li>

</ul>

</li>

<li>Coffee

<ul>

<li>Black Coffee</li>

<li>Latte</li>

</ul>

</li>

</ul>

</body>

</html>

ex12) - 표만들기

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<!-- 표만들기

*표: table <table>

행<tr>

열<td>

-->

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

ex13) - 표 크기 정하기

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<!-- 표만들기

*표: table <table>

행<tr>

열<td>

-->

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

=> 상위 13개의 태그들로 기본적인 문서 작성이 가능하다.

728x90

'Programming > HTML+ CSS + JAVASCRIPT' 카테고리의 다른 글

[JAVASCRIPT] 제어문 (if, else, else if, switch, while, for) (0)	2023.08.09
[JAVASCRIPT] HTML 동작 구현 (0)	2023.08.08
[CSS]HTML 디자인2 (0)	2023.08.08
[CSS] 웹 서버 정리 + HTML 디자인 (0)	2023.08.04
[HTML] 웹 서버 구동 + HTML 태그/기능 (0)	2023.08.04

'Programming/HTML+ CSS + JAVASCRIPT' Related Articles

[JAVA_Back-End]

[HTML] 기본지식 + 태그모음 본문

[HTML] 기본지식 + 태그모음

HTML(Hyper Text Markup Language)

브라우저

HTML 태그

ex1) - 기본골격

ex2) - 타이틀 생성

ex3) - 주석처리

ex4) - 엔터키와 스페이스바 적용법

ex5) - 글자크기 조정

ex6) - 중간선 생성 <hr />

ex7) - 문단 나누기 <p>, <div>, <span>

ex8) 인용태그 <blockquote>, <pre>

ex9) - 글씨테마적용

ex10) - 목록생성 <ol>, <ul>, <dl>

ex11) - 하위목록 생성

ex12) - 표만들기

ex13) - 표 크기 정하기

'Programming > HTML+ CSS + JAVASCRIPT' 카테고리의 다른 글

티스토리툴바