웹솔루션개발 22년 노하우! 해피CGI의 모든것

[해피CGI][cgimall] 기본적인 스타일 쉬트 태그 본문

웹프로그램밍 자료실/알짜자료 골드팁

[해피CGI][cgimall] 기본적인 스타일 쉬트 태그

해피CGI윤실장 2016. 12. 30. 08:54
■ 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">

 

홈페이지바로가기 

저작자표시

'웹프로그램밍 자료실 > 알짜자료 골드팁' 카테고리의 다른 글

[해피CGI][cgimall][Perl] CPAN을 이용한 편리한 모듈설치법  (0) 2017.01.05
[해피CGI][cgimall][PHP] XP publishing wizard를 이용한 업로딩 샘플 파일  (0) 2017.01.03
[해피CGI][cgimall][HTML] 이런 태그도 있었군요. 박스태그  (0) 2016.12.27
[해피CGI][cgimall] blank 이미지 대신에 쓰면 좋은 p 태그  (0) 2016.12.23
[해피CGI][cgimall] 자바스크립트 로딩속도 줄이기  (0) 2016.12.20
공유하기 링크
'웹프로그램밍 자료실/알짜자료 골드팁' Related Articles more
Comments