CS/Network

[Chapter 13] 웹 WWW(HTML)

devrabbit22 2025. 2. 18. 09:36
  • HTML은 웹 브라우저의 어느 위치에 어떤 데이터를 어떤 모양으로 표시하는 지를 나타낸다. 즉, 화면의 출력 형식을 기술하는 언어이다.
  • HTML로 작성한 문서는 서버에 보관되고, 클라이언트는 이 문서의 내용을 회신받아 웹 브라우저에 출력한다.
  • 출력 결과는 HTML로 기술된 방식을 따라야 하므로 웹 브라우저는 HTML을 해석하는 프로그램이라 할 수 있다.

HTML 문서의 구조

  • HTML(HyperText Markup Language)은 웹 문서를 작성하는 언어이며, HTML 문서는 <HTML>태그로 시작하여</HTML> 태그로 종료한다.
  • 전체 내용은 크게 헤더의 두 부분으로 구성되며, 헤더는 <HEAD>와</HEAD> 태그를 사용하고, 바디는 <BODY>와</BODY>태그를 사용한다.
  • <TITLE>은 문서 제목으로 웹 브라우저 상단에 표시된다.
<HTML> <!-- 문서의 시작 -->
	<!-- 헤더 -->
	<HEAD>
		<TITLE> HTML의 예 </TITLE>
	</HEAD>

	<!-- 바디 -->
	<BODY>
		HTML 문서의 내용
	</BODY>
</HTML> <!-- 문서의 종료 -->

기본 태그

일반적으로 웹 문서에서 사용하는 태그는 특정 구역을 설정하여 시작과 종료 부분을 표시하며, 태그 이름 좌우에 '<'와'>' 문자를 표기한다. 시작 위치에는 태그 이름을 적고, 종료 위치에는 '/'문자와 태그 이름을 함께 표시한다. 

태그 설명
<Hn> 제목을 표시한다.
n(1~6)은 제목 크기로, H1이 가장 크고 H6이 가장 작다.
<HR> 수평선을 표시한다.
<P> 문단을 구분한다.
<BR> 다음 줄(행)로 넘어가는 줄 바꿈 기능을 수행한다.
<B> 글자를 굵게 한다.
<I> 글자를 이탤릭으로 처리한다.
<U> 글자에 밑줄을 긋는다.
<SUB> 글자를 아래 첨자로 만든다.
<FONT size='n' color="#ffffff"> 글자 크기와 색을 지정한다.
n(1~7)은 글자 크기이고, ffffff(16진수)는 글자 색이다.
<A HREF="URL"> URL로 지정한 다른 웹 문서와 링크할 때 사용한다.
<IMG src="그림 파일명"> 지정된 그림 파일을 화면에 표시한다.

HTML 태그로 간단한 HTML 문서를 작성할 수 있다. 각 단어를 정해진 형태로 출력하고,  '한국주식회사'에는 http://www.korea.co.kr 사이트를 링크하였다. 

출력 결과를 보면 <TITLE> 태그에 포함된 '기본 웹 문서'는 웹 브라우저의 제목 부분에 출력되고, '한국주식회사'에는 밑줄이 그어져 링크되어 있음을 알 수 있다. 물론, 링크된 단어를 표시하는 형식은 웹 문서 작성자가 다르게 변경할 수 있다.

HTML 기본 태그의 사용

<HTML>
	<HEAD>
		<TITLE>기본 웹 문서</TITLE>
	</HEAD>
	<BODY>
		<H2>기본 태그 연습</H2>
		<HR>
		<B>굵은 글자</B><BR>
		<I>이탤릭 글자</I><BR>
		<U>밑줄 글자</U><BR>
		<A HREF="http://www.korea.co.kr">한국주식회사</A>
	</BODY>
</HTML>

표 태그

HTML은 표 작업을 위한 태그도 지원한다. 표 내부에 또 다른 표를 만들 수 있고, 표 내부의 셀을 행이나 열 단위로 합칠 수도 있다.

태그 설명
<TABLE> 표 하나의 환경을 지정한다.
<TR> 표의 한 줄(행)을 지정한다.
<TD> 줄의 한 칸(열)을 지정한다.

HTML로 2x5의 표를 만든 예시이다. 표의 각 셀은 <TR> 태그로 특정 줄의 시작과 끝을 지정한 후에, 해당 줄에서 <TD> 태그를 사용한다. 실행 결과를 보면 <TR> 태그를 두 번 사용해 결과가 두 줄이고, 각 줄에 소속된 데이터는 <TD>로 구분됨을 알 수 있다.

<HTML>
	<HEAD>
		<TITLE>표 만들기</TITLE>
	</HEAD>
	<BODY>
		<TABLE>
		<TR>
			<TD>학년</TD>
			<TD>1</TD>
			<TD>2</TD>
			<TD>3</TD>
			<TD>4</TD>
		</TR>
		<TR>
			<TD>인원</TD>
			<TD>50</TD>
			<TD>52</TD>
			<TD>54</TD>
			<TD>46</TD>
		</TR>
	</BODY>
</HTML>

프레임 태그

  • HTML은 한 화면을 여러 프레임으로 나누는 기능을 제공한다. 
  • ex) <FRAMSET>태그를 사용해 전체 화면을 1:9의 비율로 하여 좌우로 나눌 수 있다.
  • 왼쪽 프레임에는 left.html 문서를 표시하고 오른쪽 프레임에는 right.html 문서를 표시한다. 이와 같은 구조에서는 보통 왼쪽 프레임에 목차를 표시한다.
  • 출력 결과와 같이 되기 위해서는 left.html과 right.html 문서도 작성해야 한다.
  • 화면을 위아래로 나눌 때는 <FRAMESET>태그의 속성을 cols를 rows로 변경하고, 비율을 적절히 지정하면 된다.

HTML 프레임 태그의 사용 예시

<HTML>
	<FRAMESET cols="10%,*" border=5>
	<FRAME name="left" src="left.html">
	<FRAME name="right" src="right.html">
	</FRAMESET>
</HTML>

Reference

쉽게 배우는 데이터 통신과 컴퓨터 네트워크

'CS > Network' 카테고리의 다른 글

[Chapter 13] 웹 WWW(CGI)  (0) 2025.02.18
[Chapter 13] 웹 WWW(HTTP)  (0) 2025.02.18
[Chapter 12] 소켓을 이용한 네트워크 프로그래밍 (서버-클라이언트 프로그래밍)  (0) 2025.02.17
[Chapter 12] 소켓을 이용한 네트워크 프로그래밍 (소켓 시스템 콜)  (0) 2025.02.17
[Chapter 12] 소켓을 이용한 네트워크 프로그래밍 (소켓의 주소 체계)  (0) 2025.02.17

'CS/Network'의 다른글

  • 현재글[Chapter 13] 웹 WWW(HTML)

관련글

티스토리툴바