문단에 관련된 요소에 앞서 문단을 구성하는 블럭 요소(Block Level Element)와 인라인 요소(In-line Level Element)를 알아두면 좋을 듯 싶습니다.
블럭 요소라는 의미는 적용되는 요소가 가진 사각 박스 형태의 영역이라고 이해하시면 될 듯 합니다. 그리고 줄을 바꾸죠. 대표적인 녀석이 <div>, <p>, <h> 등이 있습니다.
인라인 요소는 블럭 요소처럼 박스 형태의 영역을 가지지 않으며, 줄도 바꾸지 않습니다. 블럭 요소 안에 위치하면서 특정 부위에 스타일을 적용한다고 이해하시면 될 듯 합니다. 대표적인 녀석이 <span>, <br>, <strong> 등이 있겠네요.
<div style="width: 200px; height: 30px; background-color: #000;"> </div><div style="width: 200px; height: 30px; background-color: #333;"> </div>
<span style="width: 200px; height: 30px; background-color: #000;"> </span><span style="width: 200px; height: 30px; background-color: #333;"> </span>
코딩 후에 비교해보세요.
일명 헤드라인 태그라 불리며, <hn>~</hn> 사이의 텍스트 부분은 본문에서 분리시켜 제목으로 취급하도록 합니다. 제목들의 크기와 두께를 문단(행) 단위로 적용시키므로 제목으로 사용된 텍스트의 앞·뒤에는 줄 바꾸기가 되고, 위와 아래에 공간이 생깁니다. 표현되는 문자는 굵은 글씨체로 표시됩니다.
h1부터 ~ h6까지 사용할 수 있으며, 숫자가 작을수록 가장 큰 사이즈의 문단 제목을 설정합니다. 문자의 크기는 절대적인 것이 아니고 구체적인 수치가 정해져 있지 않습니다. 브라우저의 종류나 환경 스타일시트의 지정에 따라 달라질 수 있습니다.
<h> 태그 속성에는 문단(행)의 속성이 포함되어 있으므로 정렬(align)속성을 같이 사용할 수 있습니다.
paragraph(패러그라프)의 약자이며, 단락(문단:행)을 나눌 때 사용됩니다.
교재(page11 중간), "명령어가 끝나는 부분에서 </p>와 같은 종료태그를 사용할 필요는 없습니다."라고 되어있는 부분은 예전에 사용하던 쿼크모드(quarks mode)의 비표준 사용방법으로 표준에서 이렇게 사용하면 제대로 표현되지 못합니다.
문자를 나타내는 태그로서, 사용되는 속성은 size(크기), color(색), face(글꼴)가 있습니다.
+ 크기 <font size="n 혹은 +/-">
글자의 크기를 나타내는 속성으로, 적용되는 속성 값(n)은 1 ~ 7 까지 적용되고 숫자가 클수록 글자가 커집니다. 혹은 기존 크기에서 한단계씩 크거나 줄이는 경우 '+' 나 '-' 를 사용합니다.
+ 컬러 <font color="crimson or #2d45ff">
글자의 색상을 지정하는 속성이고, 색상명이나 16진수로 칼라로 표현합니다. 16진수 칼라의 코드 값은 포토샵이나 일러스트레이터 등 그래픽 툴의 Color Picker 에서 알 수 있습니다.
+ 글꼴 <font face="n1, n2, n3, …" >
글자의 서체(글꼴)를 지정하는 속성이고, 속성 값 n~의 값은 글꼴의 종류를 미리 지정해 놓는 것으로, 처음 나온 글꼴이 없다면 그 다음 글꼴로 지정되고, 그도 없다면 그 다음에 지정한 글꼴로 지정하겠다는 의미입니다. 만약 지정된 글꼴이 모두 없다면 시스템의 기본글꼴로 자동 지정됩니다.
+ 베이스폰트 <basefont size="n" >
페이지에서 기준이 되는 문자의 크기를 일괄 지정하는 태그로 빈태그로 사용합니다. 문자의 크기는 'size'로 지정하며 필수 속성입니다. 폰트의 크기는 폰트태그와 같이 1 ~ 7까지의 숫자로 사용됩니다. <basefont>태그가 지정되어 있지 않으면 폰트 사이즈의 3정도가 기준 크기가 됩니다. W3C 비권장 태그입니다.
공백의 삽입
문서의 내용중에 한 칸 이상의 공백을 삽입해야 하는 경우는 "＆nbsp;"로 표현합니다.
카피라이트의 삽입
문서의 내용중에 저작권에 관련한 내용을 삽입해야 하는 경우는 "＆copy;"로 표현합니다.
순서가없는 리스트를 만들 때 사용하는 <ul>태그는 목록(항목)의 표시를 불릿이미지로 자동 삽입됩니다.
'type' 속성은 항목의 List-Type을 지정합니다. 1단계는 ‘disk’로 ●, 2단계는 ‘circle’로 ○, 3단계는 ‘square’로 ■, 4단계 이상은 무조건 ‘square’로 ■ 표시됩니다.
순서 있는 리스트를 만드는 <ol>태그는 <ul>태그와 사용법이 유사하지만 <ul>태그와는 달리 <li>태그만으로 순차적으로 번호를 자동으로 삽입 해줍니다.
'type' 속성은 항목의 List-Type을 지정하고 'start' 속성은 목록 시작의 위치 값을 표현합니다.
<li>태그 사용되는 속성으로는 'type'과 'value'가 있으며, <ol>태그의 속성과는 별개로 적용됩니다.
‘type’속성은 현재 적용되는 항목의 'type'만을 재설정하며, ‘value’ 속성은 <ol>태그속성 'start' 는 목록의 전체 항목의 시작 위치를 지정하고 'value' 는 현재 적용되는 목록의 항목부터 순서를 재설정합니다.
<ul>태그와 <ol>, <li>태그의 속성인 'type', 'strat', 'value'는 W3C 비권장 태그입니다.
정의형 요소는 정의형 리스트(사전적 형태)를 만들 때 사용하는 요소로 용어와 용어를 설명할 때 주로 사용됩니다.
<dl> 은 Definition List의 약자로 리스트 선언에, <dt> 는 Definition Term 의 약자로 리스트 제목에, <dd> 는 Definition Data 로 내용을 기술하는데에 사용합니다.
구분선을 표시하는 태그로서 Horizontal Rules의 약자로 가로구분선만 가능하며, 종료태그가 없는 빈태그입니다.
정렬 <hr align="left/center/right" />
가로줄을 정렬합니다.
가로폭 <hr width= "n or n%" />
선의 길이(%)는 브라우저의 창 크기에 비례합니다.
두께 <hr size= "n" />
선의 굵기(사이즈가 작을수록 가늘게 표시)
면처리 <hr noshade="noshade" />
선을 두껍게 표현할 때 사용되며 입체감을 없애줍니다.
컬러 <hr color="name or Hexa code" />
선의 컬러를 표현할 때 사용됩니다.
가운데 정렬 <center>~</center>
html에서 표현되는 모든 글자, 선, 표, 그림 등을 모두 중앙으로 정렬합니다.
<center /> 처럼 빈태그로도 사용 가능하며, 사용할 경우 열린 태그 이하 부분은 무조건 중앙정렬하게 되며, <center>~</center> 요소를 사용하면 태그가 삽입된 블럭의 지정한 부분만 웹 페이지의 컨텐츠를 가운데로 정렬합니다.
각 태그의 속성이나 CSS로 정의해서 사용하는 것을 추천하며, W3C 비권장 태그입니다.
프리태그 <pre>~</pre>
프리포멧티드(Preformatted)의 약자로, html 문서에서 줄 바꿈이나 띄어쓰기를 자유롭게 할 수 있게 합니다.
대부분의 브라우저에서는 가로와 세로가 같은 크기의 글자로 표시되며, <pre> 태그의 앞·뒤에는 줄이 바뀌고 1줄의 공백이 들어가며, 현재 사용하고 있는 기본폰트 크기보다 한 단계 작아지는 속성이 있습니다.
들여쓰기 <blockquote>~</blockquote>
일명 들여 쓰기태그로 문단을 시작할 때, 기존 문단보다 한 단계 들여 문단을 시작할 때 사용하는 태그입니다. 또한 중복해서 사용할 경우 2단 들여쓰기가 되며, 들여쓰기 할 경우 문단의 구분을 위해 <p>태그처럼 행을 구분합니다.
강조글자 <b>~</b>
굵은 글씨체를 나타내기 위한 스타일이며 기본글자보다 강조하기 위해 두껍게 할 때 쓰입니다.
약한 강조 <em>~</em>
브라우저의 해석에 의존하는데, 일반적으로 <em>은 약한 강조로 기울림체로 표현됩니다.
강한 강조 <strong>~</strong>
일반적으로 <em> 보다 훨씬 큰 강조에 사용하며, 굵은 글씨로 표현됩니다.
기울임 글꼴 <i>~</i>
주로 글자의 기울기를 사용하고자 할 때 많이 사용됩니다. 정확히 말하면 이텔릭체로 바꿔주는 것은 아니며, 이텔릭체 글꼴을 지원하지 않는 글꼴을 이텔릭체와 같이 보여주는 속성입니다.
<address>태그와 유사하지만 문단 중간에 삽입되어도 <address>와 달리 문단(행)을 바꾸지 않습니다.
주소표현 <address>~</address>
페이지 끝 부분에 메일주소나 연락처를 표시할 때 사용하며, <address> 태그로 지정된 텍스트는 이탤릭체로 표시됩니다. 한 문단 내에서 태그를 사용하면 자동으로 줄 바꿈 합니다.
가로선 <strike>~</strike>
글자에 가로선을 긋는 역할을 합니다. W3C 비권장 태그입니다.
삭제선 <del>~</del>
글자에 가로선을 긋는 역할을 합니다.
밑줄 표현 <u>~</u>
Under Line의 약자로 문자를 밑줄 문자로 바꾸어 줍니다. W3C 비권장 태그입니다.
한단계 크게 <big>~</big>
기존의 사용되는 크기보다 한단계 크게 표현합니다. 중복으로 사용하면 단계적인 크기표현 가능합니다. 폰트태그의 <font size="+1">처럼 지정한 것과 같습니다.
한단계 작게 <small>~</small>
기존의 사용되는 크기보다 한단계 작게 표현합니다. 중복으로 사용하면 단계적인 크기표현 가능합니다. 폰트태그의 <font size="-1">처럼 지정한 것과 같습니다.
위첨자 <sup>~</sup>
문자의 위치를 기준문자보다 위에 표시합니다.
아래첨자 <sub>~</sub>
문자의 위치를 기준문자보다 아래에 표시합니다.
copyright © 2011 두목. All rights Reserved.