HTML 알아보기(1)

이제부터 HTML에 대해 알아보도록 합시다. HTML을 알고 있으면 자신의 쇼핑몰을 수정하고자 할 때 매우 편리합니다.

기본적인 HTML 태그에 대해 알아본 후 이미지와 앵커, 그리고 테이블 태그와 마퀴 및 멀티미디어 관련 태그를 살펴보겠습니다.

HTML 기본

HTML이란 Hyper Text MarkUp Language의 약어로 홈페이지를 작성할 때 사용하는 언어입니다.

HTML은 여러 가지 태그들로 구성되는데 이러한 태그들 중 몇 가지만 알고 있으면 쇼핑몰을 운영하면서 특정 부분을 수정하고자 할 때 매우 편리합니다.

태그(Tag)란 HTML의 명령어로 ‘<’와‘>’로 태그임을 표시하며 대문자와 소문자를 구별하지 않으며 HTML문서를 만든 후 저장할 때 확장자를 .html 또는 .htm으로 저장을 하여야 합니다.

HTML의 기본구조

HTML의 전체적인 구조는 다음과 같이 크게 HEAD와 BODY로 구분됩니다. BODY 사이에 내용을 얼마나 추가하느냐에 따라 HTML 코드가 복잡해지게 되는 것입니다.

소스	결과
<html> <head> <title> 타이틀 부분 </title> <head> <body> 본문에 해당하는 내용 ... </body> </html>

주석문

주석문은 설명문을 의미하는 것으로 HTML의 코드가 길어질 경우 설명문을 붙여 HTML 코드를 쉽게 이해하기 위해 사용합니다.

주석문은  로 끝납니다.

색상 표현 방법

홈페이지에서 색상을 표현할 때는 RGB코드를 사용합니다.

RGB란 색상을 나타내는 방법 중의 하나로 R은 빨강(Red), G는 초록색(Green), B는 파란색(Green)을 의미합니다.

RGB를 표시하는 방법

① #RRGGBB 형태

각각의 색상은 00~FF(16진수)까지 표시가능하며 00이 의미하는 것은 전혀 색상을 나타내지 않는 것이고 FF가 의미하는 것은 해당 색상을 아주 강하게 표시하는 것입니다.

예를 들어 깜깜한 밤에 빨강색, 초록색, 파란색 조명이 있다고 가정해봅시다.

이때 #000000이 의미하는 것은 빨강, 초록색, 파란색 조명을 전혀 비추지 않은 것이므로 검정색이 나타날 것이고 #FFFFFF가 의미하는 것은 3가지의 조명을 동시에 비추는 것이므로 대낮처럼 밝게 흰색으로 보일 것입니다.

② 색상에 상응하는 문자로 표현

색상을 RGB 형태 대신 영어로 표현하는 방법입니다. 그러나 이러한 방법은 다양한 색상은 표현하지 못할 것입니다.

RGB값	상응문자	RGB값	상응문자
#FFFFFF	White	#0000FF	Blue
#FF0000	Red	#FFFF00	Yellow
#00FF00	Green	#000000	Black

예)

RGB형태로 표시 
빨강색글자 
초록색글자 
파랑색글자 
검정색글자 
노란색글자<hr>

상응문자로 표시 
빨강색글자 
초록색글자 
파랑색글자 
검정색글자 
노란색글자<hr>

문자 관련 태그

문자모양을 지정하는 것으로 중요한 몇가지 태그들을 살펴보면 다음과 같습니다.

태그	설명
<B> ～ </B>	굵은 글자체로 표현합니다.
<I> ～ </I>	이탤릭체로 표현합니다.
<U> ～ </U>	밑줄체로 표현합니다.

예)

굵은 글자체 
이택릭체 
밑줄체

FONT 태그

글자의 크기, 색상 및 글꼴을 지정할 때 사용하는 태그입니다.

~

속성	설명
SIZE=숫자	글자의 크기를 나타내는 것으로 1에서 7까지 지정 가능하며 기본값은 3입니다.
COLOR = RGB형태	RGB형태로 글자의 색상을 표현합니다.
FACE=글꼴	글자의 글꼴을 지정합니다.

특수문자

특수문자를 표시하는 태그의 끝에는 󰡐;󰡑을 반드시 넣어야 합니다.

태그	설명	태그	설명
	공백를 타나냅니다.	©	ⓒ 기호를 타나냅니다.

BODY태그

문서 전체의 속성을 지정하고자 할 때 사용합니다.

속성	설명
TEXT=RGB	글자색을 지정합니다.
BGCOLOR=RGB	문서의 배경색을 지정합니다.
BACKGROUND="URL"	문서의 배경그림을 지정합니다.
LINK=RGB	링크되어 있는 내용의 색상을 지정합니다.
VLINK=RGB	이미 방문한 사이트나 내용의 색상을 지정합니다.
ALINK=RGB	클릭했을 경우 순간적으로 나타나는 색상을 지정합니다.

문단 관련 태그

태그	설명
<BR>	엔터키의 역할을 합니다.
<HR>	수평선을 이용 문단을 구분합니다.
<P> ～ </P>	<BR>과 같으나 공백이 추가됩니다.
<CENTER> ......</CENTER>	지정한 영역을 가운데 정렬합니다.

여기서 <HR> 태그의 세부적인 속성은 다음과 같습니다.

속성	의미
<hr size="픽셀수\|%“>	선의 두께를 지정합니다. n=픽셀수
<hr width="픽셀수\|%“>	선의 너비를 지정합니다.
<hr align=left \| center \| right>	선을 왼쪽, 가운데, 오른쪽으로 정렬합니다.
<hr noshade>	선의 그림자를 없애줍니다.

'카페24(Cafe24)' 카테고리의 다른 글

HTML 알아보기(3) (0)	2023.02.21
HTML 알아보기(2) (0)	2023.02.21
5분 만에 쇼핑몰 뚝딱 만들기 (0)	2023.02.21
쇼핑몰 창업 준비하기 (0)	2023.02.20
인터넷 창업 절차 한눈에 살펴보기 (0)	2023.02.20

부캐 활용 IT 도전하기

HTML 알아보기(1)

HTML 기본

HTML의 기본구조