시작페이지로 즐겨찾기추가
로그인
회원가입 l 출석체크 l 마이페이지 l CGIMALL
자료실 사이트등록 랭킹100 프로그램리뷰 관리자추천자료 초보가이드
커뮤니티
전체 펼쳐보기
퀵메뉴링크 jquery , CSS , PHP , Javascript , 무료폰트 , ASP
상세검색
> 커뮤니티 > 골드팁 상세보기
커뮤니티 구인구직
사이트등록
현재접속자 새로고침
게시판타이틀 골드팁 / 상세보기
트위터로 보내기 미투데이로 보내기 싸이월드 공감
추천수 439 | 조회수 7,032 | 등록일 2004-06-19 16:29:22

닉네임

HappyCGI

제목

기본적인 스타일 쉬트 태그
내용
 background-attachment : 배경을 그림으로 할 경우 배경그림의 고정방법을 말합니다.
scroll | fixed 두가지가 있으며 fixed로 속성을 주면 배경그림이 scrollbar의 움직임과
상관없이 항상 그 자리에 고정이 됩니다. 많이들 쓰는 방법이지요.
코딩예제 : <객체명 style="background-attachment:fixed">
 
 background-color : 배경색을 지정합니다.
코딩예제 : <객체명 style="background-color:#ffcc33">
 
 background-image : 배경으로 사용할 이미지를 지정해줍니다.
코딩예제 : <객체명 style="background-image:url(이미지주소)">
 
 background-position : 배경으로 사용할 이미지의 위치를 조정합니다
코딩예제 : <객체명 style="width:400;height:250;background:url(sample-01.jpg);border:1x solid black;background-repeat:no-repeat;background-position:center center">
 
 background-positionX : 배경이미지의 위치고정을 가로축으로 지정할때 사용합니다.
left | center | right 중 하나입니다.
위의 background-position 내용에 포함된 내용입니다. 참고만 하세요
코딩예제 : <객체명 style="background-positionX:left">
 
 background-positionY : 배경이미지의 위치고정을 세로축으로 지정할때 사용합니다.
top | center | bottom 중 하나입니다.
위의 background-position 내용에 포함된 내용입니다. 참고만 하세요
코딩예제 : <객체명 style="background-positionY:top">
 
 background-repeat : 배경이미지를 반복해서 넣을것인지 아닌지를 지정해줍니다.
repeat | no-repeat | repeat-x | repeat-y 중 하나입니다.
이미지보다 큰 배경에 하나만 넣고 싶을때는 no-repeat를 사용하시면 됩니다.
나머지는 한번씩 해보세요
코딩예제 : <객체명 style="background-repeat:no-repeat">
 
 border-bottom : 객체의 하단 테두리선의 속성을 지정합니다.
border-left:선의두께 선의스타일 선의색상
코딩예제 : <객체명 style="border-bottom:1x dotted black">
 
 border-bottom-style : 객체 하단의 테두리선의 모양을 정합니다.
none | dotted | dashed | solid | double | groove | ridge | inset | ouset
테두리선의 타입을 정해주는것으로 8가지의 타입이 있습니다.
코딩예제 : <객체명 style="border-bottom-style:dotted">
 
 border-left : 객체의 왼쪽테두리선의 속성을 지정합니다.
border-left:선의두께 선의스타일 선의색상
코딩예제 : <객체명 style="border-left:1x dotted black">
 
 border-left-style : 객체 좌측의 테두리선의 모양을 정합니다.
none | dotted | dashed | solid | double | groove | ridge | inset | ouset
테두리선의 타입을 정해주는것으로 8가지의 타입이 있습니다.
코딩예제 : <객체명 style="border-left-style:dotted">
 
 border-right : 객체의 오른쪽테두리선의 속성을 지정합니다.
border-left:선의두께 선의스타일 선의색상
코딩예제 : <객체명 style="border-right:1x dotted black">
 
 border-right-style : 객체 우측의 테두리선의 모양을 정합니다.
none | dotted | dashed | solid | double | groove | ridge | inset | ouset
테두리선의 타입을 정해주는것으로 8가지의 타입이 있습니다.
코딩예제 : <객체명 style="border-right-style:dotted">
 
 border-top : 객체 상단의 테두리선의 속성을 지정합니다.
border-left:선의두께 선의스타일 선의색상
코딩예제 : <객체명 style="border-top:1x dotted black">
 
 border-top-style : 객체 상단의 테두리선의 모양을 정합니다.
none | dotted | dashed | solid | double | groove | ridge | inset | ouset
테두리선의 타입을 정해주는것으로 8가지의 타입이 있습니다.
코딩예제 : <객체명 style="border-top-style:dotted">
 
 color : 객체안에 쓰여질 텍스트의 색상을 지정합니다.
black | color
코딩예제 : <객체명 style="color:navy">
 
 cursor : 마우스 포인터의 모양을 표현합니다
마우스포인터의 타입을 정해주는 스타일시트입니다.
코딩예제 : <객체명 style="cursor:hand
 
 display : 현재 보이는 객체의 유무상태를 지정합니다.
이거와 비슷한것으로 visibility가 있으나 분명히 틀립니다.
visibility는 hidden으로 했을경우 보이지는 않아도 브라우져에 표시가 되는 상태지만 display는 none으로 했을경우 브라우져 자체에서 사라집니다. 없다고 인식한다는 얘기이지요.
block | none | inline 이외에도 종류가 4가지가 더 있지만 별 필요성을 못느낍니다.
머리만 아프지요! ^^
하지만 "난 머리가 아파도 할수있다!"고 하시는 분을 위해서.....
inline-block | list-item | table-header-group | table-footer-group
코딩예제 : <객체명 style="display:none">
 
 font-family : 객체안에 쓰여질 글꼴을 정합니다.
font-family:글꼴타입
코딩예제 : <객체명 style="font-family:돋움,궁서,바탕">
 
 font-size : 글꼴의 크기를 지정합니다.
font-size:글꼴크기
코딩예제 : <객체명 style="font-size:9pt">
 
 font-style : 글꼴 자체의 속성을 정합니다.
font-style:normal | italic | oblique
코딩예제 : <객체명 style="font-style:normal">
 
 font-weight : 글꼴의 두께를 정해줍니다. 그냥 <b></b>랑 같은거라 생각하시면 됩니다.
font-weight:normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
코딩예제 : <객체명 style="font-weight:bold">
 
 ime-mode : 폼문의 텍스트박스안에 들어갈 문장이 한글인지 영문인지 지정해줍니다
<input type=text style="ime-mode:inactive"> 영문
<input type=text style="ime-mode:active"> 한글

 
 letter-spacing : 글자와 글자 사이의 간격을 지정합니다.
letter-spacing:normal | 글자간격
코딩예제 : <객체명 style="letter-spacing:3pt">
 
 line-height : 글자행과 행간의 간격을 조정합니다
단위는 cm, mm, in, pt, pc 또는 px 단위입니다.
line-height:행과 행사이의 간격
코딩예제 : <객체명 style="line-height:15pt">
 
 text-align : 객체의 X축 정렬상태를 지정합니다.
이름같이 단순히 글자라기보다는 객체로 아시는게 좋습니다. DIV나 SPAN, TABLE등 모든 객체의 정렬방법입니다.객체의 X축 정렬이라고 생각하심 됩니다.
이것과 반대되는 것이 vertical-align입니다.
코딩예제 : <객체명 style="text-align:left | center | right">
 
 vertical-align : 객체의 Y축 정렬방식을 지정합니다.
이름같이 단순히 글자라기보다는 객체로 아시는게 좋습니다. DIV나 SPAN, TABLE등 모든 객체의 정렬방법입니다.객체의 Y축 정렬이라고 생각하심 됩니다.
이것과 반대되는 것이 text-align입니다.
코딩예제 : <객체명 style="vertical-align:top | center | bottom">
 
 visibility : 객체를 보여줄것인지 아닌지 조정합니다.
즉 DHTML필터중 alpha값이 100 인지 0 인지 둘중 하나를 택일하는것입니다.
어떻게 보면 display와 비슷한거 같지만 완전히 틀립니다. display는 객체 자체를 없애는거지요. display와 자세히 비교해 보면 아실겁니다. visibility는 웹페이지 제작시 무척 많이 사용하는것이기 때문에 반드시 숙지하시면 많은 도움이 될것입니다.
visibility:inherit | visible | hidden
코딩예제 : <객체명 style="visiblity:hidden">
추천스크랩소스보기 목록
kukuboy 2007-04-16 20:47:22
답글

참 좋은팁이네요꼭 필요한거였는데 감사합니다.

이전게시글 [PHP] XP publishing wizard를 이용한 업로딩 샘플 파일 2004-06-17 16:52:21
다음게시글 [HTML] 이런 태그도 있었군요. 박스태그 2004-06-19 16:57:34