관리 메뉴

I LOVE EJ

태그 기초 요약 본문

Web publishing/HTML & CSS

태그 기초 요약

BeOne 2007. 10. 15. 14:32

- 문자 태그 -

* 글씨크기;<h1> 크다 </h1>  or  <font size=1> 작다 </font>
           <h6> 작다 </h6> 반대 <font size=6> 크다 </font> 

* 글씨굵게;<b> 문자 </b>   * 한줄 띄우기 ; <br>    * 두줄 띄우기 ; <p>

* 글씨에 밑줄긋기;<u> 문자 </u>     * 글씨를 가로질러 줄 긋기 ; <s> 문자 </s>

* 선 그리기 <hr> ==> 선에 색상넣기 ; <hr style=color:색;>

* 글꼴;<font face=바탕체> 문자 </font>  (ex)궁서체,돋음체,굴림체 外

* 글씨 배경에 색넣기 ; <font style=background-color:색> 내용 </font>

* 글씨위치;<div align=right> 오른쪽 </div>
           <div align=left>   왼쪽  </div>
           <center> 중앙 </center> 

* 주석 달기 ; <!-- 내용 -->

* 좌/우 문단 정렬 ; <p align=justify> 문단 </p>



- 마귀 태그 -

* <marquee direction=right> 문자 </marquee> ; 오른쪽에서 왼쪽으로 이동
* <marquee direction=up> 문자 </marquee> ; 아래에서 위로 이동
* <marquee direction=down> 문자 </mqrquee> ; 위에서 아래로 이동
* <marquee behavior=alternate> 문자 </marquee> ; 좌/우로 왕복
* <marquee behavior=alternate direction=up> 문자 </marquee> ; 위/아래로 왕복
* <marquee behavior=slide direction=up> 문자 </marquee>;글이 올라오다가 끝에서 멈추라명령
* <marquee> <marquee direction="up" scrollamount="5" behavior="alternate" width="350"  height="150"> 문자 </marquee> </marquee> ; 글이 지그재그로 이동
* <marquee scrollamount=30> 문자 </marquee> ; 이동 속도 조절
* <marquee bgcolor=색> 문자 </marquee> ; 마귀 태그에 색넣기



- 하이퍼 링크 -

* <a href=주소 target=_blank> 연결어 </a> ; 다른 창(웹)으로 이동
* <a href=주소 target=_blank> <img src=주소> </a> ; 이미지 클릭을 통한 웹 이동
* <a href=mailto:메일주소> 메일보내기(or 메일주소) </a> ; 메일(Outlook)보내기 링크걸기
* <a href="winzip.exe"> 다운받기 </a> ; 파일(동영상,프로그램) 링크걸기 <== 상대경로(같은공  간)일때
 


- 이미지 태그 -

* <img src=주소 width=가로크기 height=세로크기> ; 기본형식
* <img src=주소 alt=문자> ; 그림위에 마우스를 올려 놓으면 문자 표시
* <img src=주소 border=5> ; 테두리 굵기 표시
* <img src=주소 align=top/middle/bottom> ; 문장이 이미지 상/중/하단부분에 정렬
* <img src=주소 align=left/right> ; 문장이 이미지 좌/우 분분에 정렬
* <img src=주소 vspace=수(좌/우) hspace=수(상/하)> ; 문장을 이미지와 띄울 공간 설정
* <img src=주소 style="filter:alpha(opacity=100, style=2, finishopacity=0)"> ; (테두리)필터 효과



- 배경 태그 -

* <body bgcolor=색> ; 배경색 지정
* <body background=주소> ; 이미지로 배경 지정
* <body background=주소 bgproperties="fixed"> ; 이미지 바둑판식 고정
* <style TYPE="TEXT/CSS">
  BODY {background:url(http://pierload.x-y.net/img/bgimg2.jpg) white fixed no-repeat 100% 100%} </style> ; 이미지 특정 위치 고정(%가 클수록 우측 아래로)



- 동영상(음악) 태그 -

* <embed src=주소 width= height= > ; 기본형식
* 옵션  autoatart=true/false ; 자동실행/사용자실행
        loop=-1 ; 무한 반복실행  ,  loop=3 ; 3회반복
        showcontrols=false ; 플레이어 상태바 감추기(동영상일 경우)
        hidden=true/false  ; 플레이어 상태바 나타내기/감추기(음악일 경우)
        showstatusbar=1 ; 파일 정보 표시(용량,시간)
        enablecontextmenu=false ; 마우스 금지 Lock 걸기



- 테이블(표) 태그 -

* <table borer=수치><th>헤더내용</th><tr><td> ~ </td></tr></table> ; 기본형식
* <caption> 표제목 </caption> ; 표제목을 나타냄
* 옵션 rowspan=수치 ; 세로(행)방향 합칠때
       colspan=수치 ; 가로(열)방향 합칠때
       cellspacing=수치 ; 칸과 칸 사이의 간격
       cellpadding=수치 ; 칸과 내용 사이의 간격



- 아이 프레임 - 창안에 또 다른 창을 넣는 방식

* <iframe src=주소> </iframe> ; 기본형식
* <iframe src="http://www.naver.com" name="down" width="500" height="400" frameborder="2"
   marginwidth="0" marginheight="0" scrolling="auto" align=center></iframe> ; 응용




- 세로로 글쓰기 -

* 명령어 ; <DIV style="writing-mode:tb-rl; width:300;"> 내용 </DIV>
* 응용 ; <table width="400" height="450" border=10 cellpadding="20" cellspacing="0" bgcolor=black><tr><td>
         <DIV style="writing-mode:tb-rl; width:450; height:500; font-size: 12pt; font-weight:bold; font-family:궁서; line-height:200%; color:#ffffee; filter:Shadow(Color=#227744, Direction=135)">
         내용 </DIV></td></tr></table>

'Web publishing > HTML & CSS' 카테고리의 다른 글

[HTML]padding 과 margin의 차이...  (1) 2009.05.18
css 위치지정(position)  (0) 2009.05.13
RGB 색상표  (0) 2007.10.15
링크 속성  (0) 2007.10.15
태그의 기본  (0) 2007.10.15