@CSS : Cascading Style Sheet
완전기초
#id 명 {property(프로퍼티) : property 값}
.class 명 {property(프로퍼티) : property 값}
부르는 방법
<LINK REL=stylesheet TYPE="text/css" HREF="/폴더명/css/defult.css">
//////////////////////////////////////////////////////////////////////////////////////////
@색상과 배경
1.color :
{color:red} | {color:#ff0000} | {color:rgb(255,0,0}
2.background :
background-color:#ff0000 ==> 배경색 [transparent(투명도)]
background-image:url("ma.jpg") ==> 배경이미지[none(이미지없음)]
background-repeat:url("ma.jpg") ==> 이미지 반복 [repeat-x(수평반복),repeat-y(수직반복),no-repeat(없음)]
background-attachment: fixed ==> 이미지 고정 [scroll(고정안함)]
background-position:0% 0% ==> 이미지 위치(퍼센트)[3cm 3cm(길이), top|bottom|center|right|left(키워드)]
==>background: url("ma.jpg") center no-repeat fixed (한번에 설정가능)
//////////////////////////////////////////////////////////////////////////////////////////
@글자 스타일(글꼴, 텍스트, 목록)
1.font :
font-family:'송성훈 동화체' ==> 글꼴 종류 지정(공백이 있을땐 따옴표로)
font-style:italic ==> 이탤릭체 지정[normal(사용안함)|oblique(이탤릭체)]
font-variant:small-caps ==>소문자를 작은대문자로 표시[normal(사용안함)]
font-weight:bold ==> 글꼴 굵기 지정[normal(기본값400),bolder(굵게),lighter(가늘게),100~900(숫자로 지정)]
font-stretch:normal ==> 글꼴 크기 지정[wider(부모보다 상대적 확대),narrow(부모보다 상대적 축소),
ultra-condensed(완전 축소),extra-condensed(많이 축소),condensed(축소),
semi-condensed(반 축소),normal(정상),semi-expanded(반 확대),
expanded(확대),extra-expanded(많이 확대),ultra-expanded(완전 확대)]
font-size:12px ==> 글꼴 크기 지정[키워드(xx-small, x-small, small, medium, large, x-large, xx-large)
길이(12px | 10pt) , 백분율(150% | 1.5em)]
==> font: 12pt/14pt굴림 80% bold(한번에 설정 가능)
2.text :
text-indent:3em ==> 단락 첫번째줄 들여쓰기[길이(12px | 10pt),백분율(150% | 1.5em)]
text-align:center ==> 정렬방법[left, right, center, justify(왼쪽 오른쪽 맞게 정렬)]
text-decoration:underline ==> 장식효과[none(링크 텍스트의 밑줄 없앰), underline(밑줄), overline(윗줄),
line-through(가운데줄),blink(깜빡임,익스플로러 지원안함)]
line-height:1.2 ==> 줄간격(원래 크기12px * 1.2 = 24px) [normal,숫자,길이,백분율]
letter-spacing:3px ==> 글자사이 간격 [normal,길이]
word-spacing:0.5cm ==> 단어사이 간격 [normal,길이]
text-transform:capitalize ==> 영문 대소문자 전환 [capitalize(첫번째 글자만 대문자로),
uppercase(대문자로),lowercase(소문자로),none(안바꿈)]
**<a>태그 장식효과 A:hover {color:red} ==> 링크위로 마우스커서를 올려놓았을때 스타일
A:link {text-decoration:none} 또는 A{text-decoration:none} ==>링크자체의 스타일
A:active {color:blue} ==>링크 클릭하는 순간의 스타일
A:visited {color:purple} ==>방문했던 링크에 대한 스타일
3.목록(<UL><OL><LI>) : list-style
OL {list-style-type:lower-roman} ==> 블릿이미지가 표시없을때[decimal(십진수),
decimal-leading-zero(01,02~),lower-roman(로마소문자),
upper-roman(로마대문자),hebrew(히랍어 번호),georgian(조지시대),
armenian(아르메니아), cjk-ideographic(단순 표의문자),
hiragana/hiragana-iroha(히라가나),
katakana/katakana-iroha(가타카나),
lower-latin/lower-alpha(영문소문자),
upper-latin/upper-alpha(영문대문자), lower-greek(그리스문자)]
UL {list-style-image:url("ma.jpg")} ==> 블릿이미지[none,이미지 경로]
UL {list-style-position:inside} ==> 목록항목 표시위치[inside,outside]
==>UL{list-style: lower-roman inside} ==>한번에 설정가능
//////////////////////////////////////////////////////////////////////////////////////////
@상자 스타일
1.여백
margin-top, margin-right, margin-bottom, margin-left ==>텍스트 단락의 여백
[길이, 백분율,auto(자동으로)]
==>margin(한번에 설정가능)
padding-top, padding-right, padding-bottom, padding-left ==>안쪽의 여백
[길이, 백분율,auto(자동으로)]
==>padding(한번에 설정가능)
**한번에 설정할때 순서에 따른 속성값
body {margin:1cm,2cm}(상하=1cm 좌우=2cm)
body {padding:1cm 2cm 3cm}(상=1cm 우=2cm 하=3cm 좌=1cm)
2.테두리
border-top-width, border-right-width, border-bottom-width, border-left-width ==>테두리 굵기
[thin(가늘게),medium(보통),thick(굵게),길이값]
==>border-width(한번에 설정가능)
border-top-color, border-right-color, border-bottom-color, border-left-color ==>테두리 색상
[색상]
==>border-color(한번에 설정가능)
border-top-style, border-right-style, border-bottom-style, border-left-style ==>테두리 스타일
[none(테두리없음),dotted(원으로 점선),dashed(직선으로 점선),solid(실선),double(두줄짜리 실선),
groove(홈이 파인것처럼),ridge(봉우리 생긴것처럼),inset(박스가 들어간것처럼),outset(박스 튀어나온거처럼)]
==>border-style(한번에 설정가능)
border-top, border-right, border-bottom, border-left ==>방향별로 한번에 지정가능
[테두리선 굵기(width), 테두리선 스타일(style),테두리 색상(color)]
==>border (한번에 설정가능)
**링크에서 테두리선 한번에 없애기
IMG {border:0}
A {border:0}
//////////////////////////////////////////////////////////////////////////////////////////
@레이어
특징 : 투명하다, 겹쳐 쌓을수있다, 어느위치든 갖다놓을수있다, 가시성을 조절할수있다
레이어 만들때 사용되는 태그 : <DIV></DIV> , <SPAN></SPAN>
1. <DIV>태그 안에서 직접 스타일 정의 :
<DIV ID="test" STYLE="position:
<DIV ID ="test">....</DIV>
2.스타일 시트에서 미리 스타일 정의 :
<STYLE TYPE="text/css">
#test {position:
</STYLE>
<DIV ID="test">....</DIV>
레이어 속성 :
left ==>레이어의 왼쪽좌표 설정 ,top ==>레이어의 상단좌표 설정(right, bottom는 없음)
width ==> 레이어의 너비 ,height ==>레이어의 높이
background-color(익스플로러)/layer-background-color(넷스케이프) ==>배경색
background-image:url(익스플로러)/layer-background-image:url(넷스케이프) ==>배경이미지
visibility ==>가시성
z-index ==>레이어 쌓기순서(클수록 위로)
clip ==>레이어의 클리핑
position ==>레이어의 위치(static, absolute, relative)
//////////////////////////////////////////////////////////////////////////////////////////
@레이어 포지셔닝(Positioning)
position:static ==>정상흐름에 따라 배치(left,top은 있더라도 반영하지 안음)
position:relative; top:0; right:0; bottom:0; left:2; ==>객체의 상대적인 위치
position:
**top, right, bottom, left 속성은 relative, absolute일때만 먹힘[길이값, 백분율,auto]
document.all[obj].style.visibility = "visible" ==>가시성설정[visible, hidden, collapse]
<DIV ID="text1" CLASS="pile1" STYLE="z-index:2">...</DIV>
<DIV ID="text2" CLASS="pile2" STYLE="z-index:1">...</DIV>
==>z-index : 쌓이는 순서 설정(클수록 위로)
//////////////////////////////////////////////////////////////////////////////////////////