input박스를 꾸며보세요.

스크랩 강좌/팁/HTML/CSS 2009/11/05 03:07

글자색 바꾸기
<input type="text" size="20" style="color:#ea0000;"  value="defaultText" disabled="disabled" />

배경색과 테두리색도 바꾸기
<input type="text" size="20" style="color:#ea0000; background-color:#fff7f7; border:1px solid #ea0000;" />


박스클릭시 테두리색 변하게
<input onfocus="this.style.borderColor='#fcc'" onblur="this.style.borderColor='#ccc'" />

'스크랩 강좌/팁 > HTML/CSS' 카테고리의 다른 글

input박스를 꾸며보세요.  (0) 2009/11/05
[HTML] 백그라운드 반복하기  (0) 2009/10/28
[HTML] 검색엔진최적화(SEO) - 메타태그 속성 정리  (0) 2009/10/28
[CSS] 테이블이나 셀에 배경 그림주고, 반복하지 않게 고정시키기  (0) 2009/10/28
Posted by ♡ 민군 ♡
TAG input
Trackback 0 , Comment 0

댓글을 달아 주세요

[HTML] 백그라운드 반복하기

스크랩 강좌/팁/HTML/CSS 2009/10/28 19:02

가로로만 반복하려면

------------------------------------------------------
<style>
body { background-image:url("/images/main_bg.gif");
background-repeat: repeat-x;
background-color:#fffff;
}
</style>

------------------------------------------------------
이소스를 head 사이에 넣어주시면 되구요..

세로로 반복하시려면

------------------------------------------------------
<style>
body { background-image:url("/images/main_bg.gif");
background-repeat: repeat-y;
background-color:#fffff;
}
</style>
------------------------------------------------------
repeat-x 를 y 로 바꿔주면 된답니다.^^

그리고 배경이미지가 끝나고 나올 색상을 #FFFFF 대신 넣어주시면 됩니다.^^

===============================================================================

<style type="text/css" media="screen">
body {background: #fff url("/images/main_bg.gif") repeat-x;
</style>

#fff는 #ffffff와 같은 역할을 합니다. 예를 들어 #367이면 #336677이 되지요.
저 세 가지 css 속성은 하나로 축약이 가능 합니다


'스크랩 강좌/팁 > HTML/CSS' 카테고리의 다른 글

input박스를 꾸며보세요.  (0) 2009/11/05
[HTML] 백그라운드 반복하기  (0) 2009/10/28
[HTML] 검색엔진최적화(SEO) - 메타태그 속성 정리  (0) 2009/10/28
[CSS] 테이블이나 셀에 배경 그림주고, 반복하지 않게 고정시키기  (0) 2009/10/28
Posted by ♡ 민군 ♡
TAG 백그라운드
Trackback 0 , Comment 0

댓글을 달아 주세요

[HTML] 검색엔진최적화(SEO) - 메타태그 속성 정리

스크랩 강좌/팁/HTML/CSS 2009/10/28 19:01
검색엔진최적화(SEO) - 메타태그 속성 정리

검색엔진최적화(SEO)를 위한 첫 걸음으로 중요한 요소인 메타태그(META TAG)의 속성을 나름대로 정리해 본다.

메타태그(meta tag)는 웹페이지(Web page)의 요약이므로 상당히 중요하다고 할 수 있다.
최근들어 검색엔진마케팅(Search Engine Marketing)이 인터넷 비지니스 아이템으로 각광받을 만큼 그 중요성이 나날이 상승되고 있는 시점에서 웹페이지나 블로그 스킨의 올바른  메타대그 적용은 가장 먼저 검토 되어야 할 부분이라고 생각을 하게된다.

그럼 여기서 메타태그의 정의 살펴보고 갖가지 메타태그의 속성을 정리해 보면 다음과 같다.

메타태그(meta tag)란?
하이퍼텍스트(Hyper text) 생성 언어 HTML 문서의 맨 위쪽에 위치하는 태크(tag)로 HEAD 태그 사이 또는 뒤에 있어도 되지만 반드시 BODY 태그 앞쪽에 위치해야 한다. 브라우저와 검색 엔진을 사용할 수 있도록 웹 문서의 정보를 포함하고 있다.
메타태그 속성 정리
<META HTTP-EQUIV="Expire" ConTENT="-1">
   :캐쉬 완료(파기)시간 정의.

<META HTTP-EQUIV="Last-Modified" ConTENT="Mon,20 Jul 2007 19:30:30">
   :최종수정일을 정의.

<META HTTP-EQUIV='Cache-Control' ConTENT='no-cache'>
<META HTTP-EQUIV='Pragma' ConTENT='no-cache'>
   :캐쉬가 되지 않게 하는 태그

<META HTTP-EQUIV="Content-type" content="text/html; charset=euc-kr">
   :웹문서의 언어 설정.

<META HTTP-EQUIV="Imagetoolbar" content="no">
   :그림위에 마우스 오버시 이미지 관련 툴바가 생기지 않음.

<META HTTP-EQUIV="Refresh" content="15;URL=http://galaxy.channeli.net/jakalky/sitemap.htm">
   :페이지이동
<META HTTP-EQUIV="Page-Enter" content="RevealTrans(Duration=5/시간 초단위, Transition=21) ">
  :페이지 로딩시 트랜지션 효과(장면 전환 효과)
<META name="Subject" content="홈페이지주제 입력">
<META name="Title" content="홈페이지이름 입력">
<META name="Description" content="설명문 입력">
<META name="Keywords" content="키워드 입력">
<META name="Author" content="만든사람 이름">
<META name="Publisher" content="만든단체나회사 이름">
<META name="Other Agent" content="웹책임자 이름">
<META name="Classification" content="카테고리위치(분류)">
<META name="Generator" content="생성프로그램(에디터)">
<META name="Reply-To(Email)" content="메일주소 입력">
<META name="Filename" content="파일이름 입력">
<META name="Author-Date(Date)" content="제작일">
<META name="Location" content="위치">
<META name="Distribution" content="배포자">
<META name="Copyright" content="저작권">
<META name="Robots" content="ALL">
<META name="robots" content="index,follow" />
   : 이 문서도 긁어가고 링크된 문서도 긁어감.

<META name="robots" content="noindex,follow" />
   : 이 문서는 긁어가지 말고 링크된 문서만 긁어감.

<META name="robots" content="index,nofollow" />
   : 이 문서는 긁어가되, 링크는 무시함.

<META name="robots" content="noindex,nofollow" />
   : 이 문서도 긁지 않고, 링크도 무시함.
※ charset 속성은 인터넷 익스플로러만 제공하는데 이 속성의 값은 문서에서 사용하는 문자셋의 이름이다. 되도록 이 속성대신에 http-equiv와 content 속성을 사용 할 것을 권장한다.
※ schame는 이 속성을 사용하여 속성의 값을 해석할때 사용할수 있는 방법을 명시할수 있다.

'스크랩 강좌/팁 > HTML/CSS' 카테고리의 다른 글

input박스를 꾸며보세요.  (0) 2009/11/05
[HTML] 백그라운드 반복하기  (0) 2009/10/28
[HTML] 검색엔진최적화(SEO) - 메타태그 속성 정리  (0) 2009/10/28
[CSS] 테이블이나 셀에 배경 그림주고, 반복하지 않게 고정시키기  (0) 2009/10/28
Posted by ♡ 민군 ♡
TAG meta, 메타테그
Trackback 0 , Comment 0

댓글을 달아 주세요

[CSS] 테이블이나 셀에 배경 그림주고, 반복하지 않게 고정시키기

스크랩 강좌/팁/HTML/CSS 2009/10/28 19:00

1) 직접 써주기

 

<td background="경로/bg01.gif" style="background-repeat:no-repeat; background-position:bottom;">
<table background="경로/bg02.gif" style="background-repeat:no-repeat; background-positon:top;">

 

2) 테이블에 클래스 명을 지정해주고 <head><style>태그안에 클래스 정의해주기

 

<style>

.left_bg {

  background-image: url(이미지경로/화일명);

  background-repeat: no-repeat;

}

</style>

 

그리고, 테이블에 적용하시려면 <table class="left_bg">

위처럼 해주시면 되구요..

 

아마 배경이 길어저도 좌측배경색상을 유지하시려면 계속유지하시려면, 위의 스타일시트에서빨간색으로 표시된 부분아래쪽으로 background-color : #C4F0F9 한줄 추가해주시면됩니다.

 

참고로

background-repeat :
 repeat       : 배경이미지 연속
 repeat-x     : 배경이미지 가로 방향 연속
 repeat-y     : 배경이미지 세로 방향 연속
 no-repeat    : 배경이미지 한번만 보여 줌

background-position : 

 left         : 배경이미지를 좌측에
 right        : 배경이미지를 우측에
 center       : 배경이미지를 중앙에
 top          : 배경이미지를 위에
 bottom       : 배경이미지를 아래에

background-attachment : 
 scroll       : 배경이미지가 텍스트와 함께 스크롤 
 fixed        : 배경이미지는 고정되고 텍스트만 스크롤


'스크랩 강좌/팁 > HTML/CSS' 카테고리의 다른 글

input박스를 꾸며보세요.  (0) 2009/11/05
[HTML] 백그라운드 반복하기  (0) 2009/10/28
[HTML] 검색엔진최적화(SEO) - 메타태그 속성 정리  (0) 2009/10/28
[CSS] 테이블이나 셀에 배경 그림주고, 반복하지 않게 고정시키기  (0) 2009/10/28
Posted by ♡ 민군 ♡
TAG 배경반복
Trackback 0 , Comment 0

댓글을 달아 주세요