[Html] 기본 구조 - 태그와 엘리먼트 개념 Tag / Element

Html은

HyperTextMarkupLanguage 의 약자로

프로그래밍 언어가 아닌 웹 개발시 웹페이지의 구조를 

표현 하는 마크업 언어이다.

쉽게말해서, 웹개발자와 브라우저 사이에

의사 소통할수 있는 언어이다.

 

웹개발자 <- html을 이용한 의사소통 -> 브라우저

 

우선 html을 출력부터 해보자.

메모장을 새로 만들기 하여, 

다른 이름으로 저장하기를 누르고,

파일 이름을 index.html로 저장한다.

 

index.html 파일을 만들었다면,

아래 예제를 실행해보기를 권장한다.

 

샘플 예제 ↓

 

웹 개발자가 "메모를 메모하다"라는 문장을

브라우저에게 문장이라고 이야기해주려면,

아래와 같은 소스를 작성해야한다.

사용 태그 : p

<p>메모를 메모하다</p>

 

소스 작성을 완료 하였다면,

파일을 저장하고 더블클릭하여 실행하여,

웹페이지에서 출력 결과를 확인한다.

 

[출력 결과]

출력 결과

 

 

이번에는 해당 문장을 강조표시 해보자. 

강조표시에는 strong 또는 b 태그가 사용된다.

p태그 (문장표시) 내에 strong태그 (강조표시)의

중첩이 가능하니, 아래와 같이 소스를 작성해보자.

사용 태그 : strong 또는 b

<p>메모를 메모하다</p>
<p><strong>메모를 메모하다</strong></p>

 

[출력 결과]

이번에는 메모하다 라는 단어에

밑줄 표시 해보자

사용 태그 : u

<p>메모를 메모하다</p>
<p><strong>메모를 메모하다</strong></p>
<p><strong>메모를 <u>메모하다</u></strong></p>

 

[출력 결과]

마지막으로 메모를 이라는 단어는

이텔릭체로 출력해보자

사용 태그 : i

<p>메모를 메모하다</p>
<p><strong>메모를 메모하다</strong></p>
<p><strong>메모를 <u>메모하다</u></strong></p>
<p><strong><i>메모를</i> <u>메모하다</u></strong></p>

 

[출력 결과]

내용 정리 ↓

태그는 처음과 끝으로 나뉘며,

태그 시작점은 <태그명>

태그 끝점은 </태그명>

으로 작성한다.

 

또한 태그 사이에 있는 내용은

말그대로 text 또는 content 라고 부르며,

 

태그 시작부터 내용을 포함한

태그의 끝까지를 엘리먼트라고 부른다.