Tag 익히기(1)

HTML 기본 Tag 익히기(1) Tag 익히기(2) Tag 익히기(3) HTML 활용

Up
heading
font
hr
list
실습예제

HEAD & TITLE

<head>
    <title>
여기 쓰여진 타이틀은 브라우저의 상단바에 나타납니다</title>
</head>

FONT & HEADING

HEADING

<h1>Heading1,  the largest size</h1>
<h2>Heading2,
두번째 큰사이즈</h2>
<h3>Heading3,
중간사이즈</h3>
<h4>Heading4,
보통 사이즈</h4>
<h5>Heading5,
약간 작은</h5>
<h6>Heading6,
제일 작은</h6>

</hx>의 태그는 다음줄을 자동으로 띄어주는 역할를 합니다.

h1 이 제일 큰 사이즈이고 숫자가 커질수록 글씨크기는 줄어듭니다.

 

FONT

<font size=1>font size=1, the smallest size</font>
<font size=2>font size=2,
약간 작은 사이즈</font>
<font size=3>font size=3,
보통 사이즈</font>
<font size=4>font size=4,
약간 큰 사이즈</font>
<font size=5>font size=5,
조금 더 큰</font>
<font size=6>font size=6,
두번째로 큰</font>
<font size=7>font size=7,
제일 큰</font>

<p>

<font size=1>font size=1, the smallest size</font><br>
<font size=2>font size=2,
약간 작은 사이즈</font><br>
<font size=3>font size=3,
보통 사이즈</font><br>
<font size=4>font size=4,
약간 큰 사이즈</font><br>
<font size=5>font size=5,
조금 더 큰</font><br>
<font size=6>font size=6,
두번째로 큰</font><br>
<font size=7>font size=7,
제일 큰</font><p>

<font face="굴림체" size=4>face를 사용하여 서체를 굴림체로 한경우</font><br>
<font face="
바탕체" size=4>face를 사용하여 서체를 바탕체로 한경우</font><br>
<font face="Arial" size=4>face
를 사용하여 서체를 Arial로 한경우- abcdefg...</font><br>

font size의 숫자가 클수록 글씨크기가 커지며, 7이상은 크기가 같습니다.

font face 태그를 사용해 서체를 지정해 줄 수 있으나, 유저의 브라우저에 특정 서체가 지정되어 있으면 무시될 수 있습니다.

또한 유저의 컴퓨터에 해당 서체가 없을 경우 기본 지정 서체로 나오게 됩니다.

bold를 적용하고 싶으면 <b>...</b>태그를, 이탤릭체를 적용하고 싶으면<i>...</i>태그를 해당문장의 처음과 끝에 넣으면 됩니다.

HR

<hr><p>
<hr width=20%><p>
<hr width=300><p>
<hr size=1><p>
<hr size=1 noshade><p>
<hr size=3 width=50%><p>
<hr size=3 width=50% noshade><p>
<hr size=6 width=80%><p>
<hr size=6 width=80% noshade><p>

 

List

Ordered List

컴퓨터선교회 MIR분과
<ol>
<li>인터넷 관리분과
<li>운영분과
<li>전문정보분과
<li>국가정보분과
<li>수집분과
<li>정보검색분과
</ol>

Unnumbered List

컴퓨터선교회 MIR분과
<ul>
<li>정보검색분과
<li>수집분과
<li>국가정보분과
<li>전문정보분과
<li>운영분과
<li>인터넷관리분과
</ul>

Definition List

My Favorite Web Sites:
<dl>
<dt>검색사이트
<dd>Altavista
<dd>Exite
<dd>Yahoo
<dt>디자인
<dd>Adobe
<dd>Macromedia
<dd>Fractal Design
</dl>

목록의 조합

My Favorite Web Sites:
<ul>
<li>검색사이트
<dl>
<dt>국내
<dd>까치네
<dd>심마니
<dd>네이버
<dt>국외
<dd>Altavista
<dd>Exite
<dd>Yahoo
</dl>
<li>디자인
<ol>
<li>Adobe
<li>Macromedia
<li>Fractal Design
</ol>
</ul>


실습예제 : Text Sample