반응형
[Html] 티스토리 꾸미기위한 Html 명령어 배우기 ◈ 가장 기본적인 태그들 HTML의 태그에 대해 살펴보기 전에 HTML 문서의 구조를 알아볼 필요가 있습니다. HTML 문서의 구조는 헤더(Header)와 본문(Body)의두 개 부분으로 구분할 수 있습니다. 물론 이 두 개의 부분을 구분하는것도 역시 태그의 역할입니다. 아래의 HTML 문서는 가장 단순한 문서를 예로 보여주고 있습니다.
▶ <HTML> </HTML> :현재 파일이 HTML 문서임을 브라우저에 알려주는 Tag로 HTML 문서 안에서 가장 처음과 끝에 써주어야 합니다. 그러나 대부분의 브라우저에서는 이 태그가 없어도 제대로 인식을 합니다. 그러나 표준을 지키는 의미에서 가급적 사용하도록 합시다. ▶ <HEAD> </HEAD> :HTML 문서에 대한 일반적인 정보를 표시하는 일종의 머리말로서 실제 브라우저 화면에는 출력되지 않습니다. (이 부분에 자바스크립트, 스타일시트 등의 소스를 넣을 수도 있다.) ▶ <TITLE> </TITLE> : HTML 문서의 제목을 정의하는 곳으로 여기서 쓴 제목은 브라우저의 제목 표시줄에 출력됩니다. (head 속에 포함된다.) ▶ <BODY> </BODY> : HTML 문서의 실제적인 내용이 들어가는 곳으로, 브라우저 화면에 곧바로 나타나게 됩니다. 이 태그에는 6개의 속성이 있습니다. (아래의 표를 참조하세요.)
※ 주의사항 : 배경색을 지정할 때에는 위처럼 색의 이름으로 설정 할 수도 있지만 그렇게 할 경우 몇 가지 색밖에 지정할 수 없습니다. 그래서 나온 것이 RGB 코드입니다. RGB 코드란 RED-GREEN-BLUE 형식으로 색상을 조합한 것으로 16진수의 숫자로 표현되며 RRGGBB 형태로 표시됩니다. 예) RED = FF0000 , GREEN = 00FF00 , BLUE = 0000FF RGB 코드 변환 프로그램은 자료실에 올려 놓았습니다. ▶ <Hn> </Hn> : 문서의 제목을 위해 사용되는 것으로 n은 1에서 6까지 총 6가지의 종류가 있습니다.
속성 LEFT : <Hn align="left">제목<Hn> : 제목을 왼쪽으로 정열합니다. CENTER : <Hn align="center">제목<Hn> : 제목을 가운데 정열합니다. RIGHT : <Hn align="right">제목<Hn> : 제목을 오른쪽으로 정열합니다. ▶ <P> </P> :단락이 시작하는 곳이나 단락이 끝나는 곳에 넣어서 단락을 구분하는 역할을 합니다. <P>태그는 </P>태그를 사용하지 않아도 상관 없다.
속성 : LEFT : <p align="left">단락</p> : 단락을 왼쪽으로 정열한다. CENTER : <p align="center">단락</p> : 단락을 가운데 정열한다. RIGHT : <p align="right">단락</p> : 단락을 오른쪽으로 정열한다. ▶ <BR> :문서의 줄을 바꿀 때 이용하는 태그입니다.. (한 줄을 바꿀 때 사용합니다. 두 줄 이상 바꿀 때는 <p>태그를 사용하도록 하세요.) ▶ <CENTER> </CENTER> :문단을 가운데로 정렬시키는 기능을 합니다. </CENTER>태그를 만날 때까지 모두 가운데로 정렬됩니다 ▶ <HR> :수평선을 만들어 줍니다. 속성 : SIZE, WIDTH, ALIGN=LEFT, CENTER, RIGHT
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ◈ 표 만들기 앞서 설명한 리스트를 잘 활용하면 순서대로 표시해야 할 자료들을 깔끔하고 보기 좋게 출력할 수 있습니다. 하지만 때로는 도표나 목록의 형태로 자료들을 보여 줄 필요가 있습니다. 이럴 때 사용하는 것이 바로 테이블입니다. 테이블을 이용하는 것이 정보를 훨씬 효과적으로 강조하여 표현할 수 있습니다. 또한 테이블로 레이아웃을 잡는다 던지 여러 가지 용도로 사용할 수 있습니다. 웹페이지를 만드는데 가장 중요한 요소는 테이블입니다. 테이블에 대한 내용을 배우기 전에 이 사실을 명심하시길 바랍니다. ▶ <TABLE></TABLE> 이 태그들은 테이블의 영역을 선언하는 태그로서 테이블의 처음과 끝을 지정합니다. 실제로 테이블의 모양을 만드는 태그들은 이 블록의 내부에 포함되어야 합니다.
이 태그가 나오지 않으면 모든 셀이 한 줄로 나타나게 됩니다.
※ 표의 빈칸 처리방법 : <p> 을 셀의 빈칸에 넣어주면 됩니다. ▶ <TH></TH> :거의 모든 면에서 <TD></TD> 태그와 동일하지만 이 태그로 만들어진 셀은 텍스트가 볼드체로,중앙 정렬해서 보여준다는 것이 다릅니다..
|
||||||||||||||||||||||||||||||||||||||||||||||||
| ◈ 이미지 넣기 여러분들은 이제 텍스트로 이루어진 웹 페이지는 별 어려움 없이 만들 수가 있을 것입니다. 저는 이쯤에서 여러분이 알고 싶은 것이 무엇인지를 쉽게 짐작할 수 있습니다.여러분들도 아마도 단조로운 텍스트만으로 이루어진 웹 페이지가 아니라 깔끔한 이미지와 텍스트가 적절히 조화된 웹 페이지를 만들고 싶을 것입니다. 여러분들은 <img> 태그를 이용하여 웹 페이지에 이미지를 넣을 수 있습니다. ▶ <IMG> :이미지를 넣기 위한 태그입니다.
|
||||||||||||||||||||||||||||||||||||||
반응형
'................ 생활정보 메모' 카테고리의 다른 글
| 커피 한 잔의 행복: 하인리히 하이네의 시를 통해 본 일상의 기쁨 (3) | 2009.10.19 |
|---|---|
| [생각] 당신은 한국인이 맞나요? (2) | 2009.10.18 |
| [일상] 싸이블로그를 떠나며..저 이사가요... (0) | 2009.10.17 |
| [기념] 티스토리 믹시 Mixsh 인증하기 (0) | 2009.10.17 |
| [생각] 딸을위한 의로운 살인이 범죄인가? (0) | 2009.10.16 |