고요한 강

♣ 아~ 보고 싶어라 · 보고 싶어라 · 내 여인이 보고 싶어라 · 꿈결에라도 보고 싶어라! ♣


웹 문서 짤 때 요긴한 태그 스타일 시트(CSS)를 배워보자! 가슴에

출처 : http://blog.naver.com/frees007/80046341779


 


웹 문서 짤 때 요긴한 태그 스타일 시트(CSS)를 배워보자!


스타일 시트 글꼴관련


 


글꼴 관련


1. font-family : 글꼴이름


지정한 옵션에 포함된 글꼴로 지정한 부분의 글자 모양이 바뀝니다.

Html에서의 <font>에서 face 옵션과 비슷한 거지요.


2. font-style : 스타일 종류


지정한 글꼴 스타일로 지정한 부분의 글자모양이 바뀝니다.


normal : 보통문자

italic : 이탤릭 문자

oblique : 이탤릭 문자체

3. font-variant : 글자 속성


지정한 글자 속성으로 지정한 부분의 글자모양이 지정된다.


normal : 보통문자

small-caps : 소문자를 대문자로 변경하여 표시

4. text-decoration : 표시 속성


지정한 표시 속성으로 글자 모양이 지정된다.


none : 아무런 속성도 지정하지 않는다.

underline : 밑줄이 그려진다.

overline : 글자 위에 줄이 그려진다.

5. font-weight : 글자두께 예약어/글자 두께


지정한 글자 두께로 글자 모양이 지정된다.


1) 글자두께 예약어


normal : 일반적인 글자 두께로 표시된다.

bold : 두꺼운 글자로 표시된다.

bolder : 가장 두꺼운 글자로 표시된다.

lighter : 가장 얇은 글자로 표시된다.

2) 글자 두께


지정하고자 하는 두께를 지정하는 것으로 100에서 900 사이의 수치를 100단위로 지정한다.


6. font-size : 글자크기 예약어/현재크기의 비율/상대크기/포인터


지정한 글자 크기로 글자 모양이 지정된다.


1) 글자크기 예약어


xx-small : 가장 작은 글자 크기로 출력된다.

x-small : small보다 150% 작은 글자 크기로 출력된다.

small : 보통 글자보다 150% 작은 글자로 출력된다.

midium : 보통 글자 크기로 출력된다.

large : 보통 글자보다 150% 큰 글자로 출력된다.

x-large : large보다 150% 큰 글자로 출력된다.

xx-large : 가장 큰 글자 크기로 출력된다.

2) 현재 크기의 비율


현재 크기(원래의 크기)에 대한 백분율로 지정한다.


3) 상대 크기


smaller : 현재크기보다 150% 작은 글자로 출력된다.

larger : 현재크기보다 150% 큰 글자로 출력된다.

4) 포인터


지정하고자 하는 크기를 포인터 방식으로 지정한다.


 


색상 관련


1. color : 색상코드/RGB코드


지정한 색상으로 글자가 출력된다.


2. background-color : 색상코드/RGB코드


지정한 색상으로 바탕 색상이 지정된다.


3. background-image : url(그림파일이름)


지정한 파일의 그림이 배경화면으로 출력된다.


4. background-repeat : 반복방식


지정한 방식으로 배경화면에 그림을 반복 출력한다.


repeat : 그림을 수평과 수직 방향으로 반복한다.

repeat x : 그림을 수평 방향으로 반복한다.

repeat y : 그림을 수직 방향으로 반복한다.

no-repeat : 그림을 반복하지 않는다.


5. background-attachment : 스크롤 형태


배경화면이 스크롤 될 때 지정한 형태로 행동한다.


1) 스크롤 형태


scroll : 화면이 스크롤 되면 배경그림도 같이 스크롤 된다.

fixed : 화면이 스크롤 되어도 배경그림은 그대로 고정된다.

 


문단 관련


1. letter-spacing : 크기


지정한 크기만큼 글자와 글자사이의 간격을 지정한다.


2. line-height : 크기/비율


지정한 크기만큼 줄과 줄 사이의 간격을 지정한다.


1) 크기 : 줄과 줄 사이의 간격을 지정하는 길이로 픽셀단위로 입력한다.


2) 비율 : 줄과 줄 사이의 간격을 지정하는 길이로 현재 글자크기의 비율로 입력한다.


3. margin-left, margin-right, margin-top, margin-bottom : 비율


지정한 만큼 화면 너비에 대한 비율로 왼쪽, 오른쪽, 위쪽, 아래쪽 여백을 지정한다.


4. text-align : 정렬방식


지정한 정렬 방식으로 문단이 정렬된다.


1) 정렬방식


left : 왼쪽 정렬
right : 오른쪽 정렬
center : 가운데 정렬
justify : 양쪽 정렬


5. text-indent : 길이/비율


지정한 길이나 비율만큼 들여쓰기 해준다.


6. text-transform : 표시방식


지정한 표시방식으로 영문내용을 표시해준다.


1) 표시방식


capitalize : 각 단어의 첫 번째 문자를 대문자로 출력한다.

원래 대문자로 입력된 것은 그대로 출력.

uppercase : 모두 대문자로 변경하여 출력한다.

lowercase : 모두 소문자로 변경하여 출력한다.

none : 입력한 그대로 출력한다.


display의 속성에 대하여….


1. none는 뿌려주지 않는 것.


2. block와 inline는 뿌려주는 것.


3. block와 inline의 차이는 같은 줄에 뿌려주느냐, 아니면 다른 줄에 뿌려주느냐의 차이.


4. div와 span의 차이와 같다고 생각하면 된다.


디폴트는 inline.


 


테이블 관련


1. border-left-width, border-right-width, border-top-width, border-bottom-width : 두께 지정 예약어/크기


지정한 예약어나 크기로 경계선의 굵기를 지정한다.


1) 두께 지정 예약어


thin : 가장 얇은 테두리 선으로 그린다.

medium : 보통 테두리선으로 그린다.

thick : 가장 두꺼운 테두리 선으로 그린다.

2) 크기 : 경계선의 두께를 지정하는 것으로 픽셀단위로 지정한다.


2. border-color : 색상코드/RGB코드


지정한 색상으로 테이블의 테두리를 보여준다.


3. border-style : 경계선표시 예약어


지정한 예약어의 모양으로 테이블의 테두리를 표시해준다.


1) 경계선 표시 예약어


none : 일반적인 테두리선

dotted : 점선으로 테두리를 그려준다.

dashed : 쇄 선으로 테두리를 그려준다.

solid : 직선으로 테두리를 그려준다.(none과 비슷)

double : 두 줄로 테두리를 그려준다.

groove : 들어가는 모양의 3차원선으로 그려준다.

ridge : 나오는 모양의 3차원선으로 그려준다.

inset : 위쪽으로 음영을 주는 3차원 선으로 그려준다.

outset : 아래쪽으로 음영을 주는 3차원 선으로 그려준다.

4. padding-left, padding-right, padding-top, padding-bottom : 크기/비율


지정한 크기나 비율만큼 테이블의 테두리와 실제 내용의 간격을 지정해준다.


 


목록, 커서 모양 관련


1. list-style-type : 모양 지정 예약어


지정한 예약어로 목록의 부호를 만들어 준다.


1) 모양 지정 예약어


none : 부호를 표시하지 않는다.

disc : 속이 칠해진 동그라미로 표시한다.

circle : 속이 칠해지지 않는 동그라미로 표시한다.

square : 속이 칠해진 사각형으로 표시한다.

decimal : 아라비아 숫자로 표시한다.

lower-roman : 소문자 로마자로 표시한다.

upper-roman : 대문자 로마자로 표시한다.

lower-alpha : 소문자 알파벳으로 표시한다.

upper-alpha : 대문자 알파벳으로 표시한다.

2. list-style-image : url(그림파일이름)


지정한 그림을 목록의 부호로 만들어 준다.


3. cursor : 커서 모양 관련 예약어


지정한 예약어대로 커서 모양을 바꾸어 준다.


1) 모양 관련 예약어


hand : 보통의 링크 모양으로 나온다.(손모양)

help : 물음표가 나온다.

move : move모양으로 나온다.

text : 텍스트 위에 커서가 있는 것 같이 나온다.

wait : 모래시계 모양으로 나온다.

crosshair : 십자선 모양으로 나온다.

ne-resize : 커서의 화살표가 오른쪽 위로 본다.

nw-resize : 커서가 기본 모양과 같다. (왼쪽 위를 보는 형태)

sw-resize : 커서의 화살표가 왼쪽 아래를 본다.

se-resize : 커서의 화살표가 오른쪽 아래를 본다.

n-resize : 커서의 화살표가 위쪽을 본다.

e-resize : 커서의 화살표가 오른쪽을 본다.

s-resize : 커서의 화살표가 아래쪽을 본다.

w-resize : 커서의 화살표가 왼쪽을 본다.


 


링크, 스크롤 바 관련


1. A:link, A:active, A:vistied, A:hover{color:색상값;text-decoration:표시속성}


위의 앵커의 속성(Defines an anchor)은 다른 낱낱의 선택자와 마찬가지로 여러 선택자가 속성이나 속성값 여러 개를 하나로 묶어 선언할 수도 있지만, 각자를 따로 설정할 수도 있습니다.


A:link - 사이트 연결고리의 일반적인 설정.
(예) A:link{color:글꼴 색상;font-size:글꼴 크기;...;}


A:hover - 사이트 연결고리에 마우스 올렸을 때 설정.
(예) A:hover{color:글꼴 색상;font-size:글꼴 크기;...;}


A:visited - 사이트 연결고리를 눌러 방문한 흔적이 있을 때 설정.
(예) A:visited{color:글꼴 색상;font-size:글꼴 크기;...;}


A:active - 사이트 연결고리를 눌렀을 때 설정.
(예) A:active{color:글꼴 색상;font-size:글꼴 크기;...;}


링크걸린 곳, 움직일 동안, 방문했던 곳, 커서를 올렸을 경우 등 링크부분의 색상및 표시될 형태를 지정해 준다.


1) color : 색상값


지정해준 색상으로 링크관련 색상이 바뀐다.


2) text-decoration : 표시속성


밑줄등을 없애줄 때 사용하지요.

text-decoration : none 요렇게요.


2. 스크롤 바


스크롤 바의 색상 바꾸기는 익스플로러 5.5이상에서 적용이 됩니다.

그렇기 때문에 낮은 버전의 익스플로러에서는 적용이 않되고요.


요즘은 거의 익스플로러 5.5이상을 사용들하고 계시잖아요. ^^**


1) scrollbar-3dlight-color : 스크롤 박스와 화살표의 왼쪽과 위쪽 가장자리에 해당 색상을 적용


2) scrollbar-arrow-color : 화살표 부분의 색상 적용


3) scrollbar-base-color : 스크롤 바의 기본적인 색상 적용(scroll box, track, scroll arrows)


4) scrollbar-darkshadow-color : 스크롤 바의 홈에 색상 적용


5) scrollbar-face-color : 스크롤 박스와 화살표박스에 색상 적용


6) scrollbar-highlight-color : scrollbar-3dlight-color 와 적용되는 곳은 같지만 약간 다르게 나타나요.


7) scrollbar-shadow-color : 스크롤 박스와 화살표의 오른쪽과 아래쪽 가장자리에 색상 적용


8) scrollbar-track-color : 스크롤 트랙에 색상 적용


*. scrollbar-base=scroll arrows + scroll box + scroll track


필터란 포토샵의 필터 기능들을 실제로 스타일 시트에서 적용할 수 있게 만든 태그입니다.

그림에 작업할 내용이 간단한 경우에는 이렇게 스타일 시트를 쓰는 것이


훨씬 간단하게 작업할 수 있고요.

기본적인 형태는 다음과 같습니다.


이미지

<img src="이미지 파일" style="filter : 필터속성">

글씨

<태그 style="width:글자넓이;height:글자폭;font-size:글자크기pt;filter:필터속성">


태그라고 적혀있는 부분에는 body, div, img, input, marquee, table, td, textarea, th등의 태그명령어가 들어갈 수 있습니다.


1. alpha


그림이나 글자에 투명도를 조절할 수 있는 명령어입니다.


1) 옵션


opacity(불투명도) : 기본값은 100이며 0~100까지 수치조절을 하고요.

숫자가 작을수록 투명해집니다.

style(모양) : 0~3까지 선택.

0은 단일, 1은 선형, 2는 타원형, 3은 직사각형.

finishopacity : style 1, 2, 3의 경우 불투명도에 영향을 줍니다.

0~100까지 수치조절이 가능하고요.

2. blur


그림을 약간 흐리게 하고요.

빛이 들어오는 방향등을 지정해 줍니다.

일명 번지는 효과쯤 될까요.


1) 옵션


add : 원본이미지를 합칠 것인가 결정하고요. 합칠 경우는 1, 그렇지 않으면 2.

direction : 빛이 들어오는 각도.

즉 흐려지는 방향이 되겠죠.

시계각도로 0, 45, 90, 135, 180, 225, 270, 315값을 설정합니다.

strength : 강도 조절.

0~100까지 설정.

수치가 클수록 강도가 높아집니다.

3. chroma


지정한 부분을 투명하게 해주는 필터 태그로 이미지에만 적용됩니다.


1) 옵션


color=색상명/RGB색상코드 : 투명하게 하고자 하는 색을 지정

4. dropshadow


특정위치에 그림자를 만들어 줍니다.

글씨에만 적용이 되고요.


1) 옵션


color=색상/RGB색상코드 : 그림자의 색상을 지정

offx=수치 offy=수치 : 대상으로부터 그림자의 x, y 좌표

positive=0/1 : 0이면 투명픽셀로, 1이면 불투명픽셀로부터 그림자를 만들어줍니다.

그림자의 투명한 정도랄까요?

5. glow, gray


글자나 이미지에 색상효과를 나타내는 명령어입니다.


1) 옵션


glow : 글자나 색상에 지정된 색을 번지게 하는 효과를 나타냅니다.

color=색상/RGB색상코드, strength=1~100 : 번지는 강도를 조절

gray : 이미지를 흑백으로 나타내주고요.

당연 이미지에만 적용 됩니다.

6. wave


물결모양으로 효과를 주는 역할을 합니다.


1) 옵션


add=0/1 : 원본이미지를 합칠 경우 0, 그렇지 않으면 1.

freq=수치 : wave의 개수를 지정

lightstrength=0~100 : wave에서 빛의 강도 %

phase=0~100 : 웨이비의 시작위치를 지정합니다.

strength=1~100 : 웨이브의 강도를 지정합니다.

7. xray


엑스레이 화면처럼 이미지를 나타나게 해줍니다.


1) 옵션


xray : 이미지를 흑백으로


----------------------------------------------------------


익스플로러에 보이는 스크롤 바가 보기 싫기에 '스크롤 가능하면서도 크기를 최소로 줄이거나 아예 안 보이게 하는 방법이 없을까?'를 예전부터 찾아다녔지요.


그런 방법이 없다는 걸 여러 번 보았지만, 그렇다고 그 꿈을 완전히 접은 건 아닙니다.


그러다가 오늘 문득 '몽유병'에나 걸린 양 그걸 찾아 인터넷을 마구 검색했네요.


역시나 정답은 없습니다.


위에 적은 '스타일 시트' 정보는 뒤적거린 사이트 중의 한 페이지인데 내용이 무척 알차더군요.


그래서 복사하였습니다.


가능한 원본을 그대로 유지하려 애썼지만, 제가 아는 선에서 미묘한 수정 또는 덧붙여진 내용이 포함되었음도 밝힙니다.


저도 배우고, 여러분도 배우고 겸사겸사….


출처 사이트에 가면 더 많이 배울 것이 많았는데 일일이 살필 여가가 없어 그냥 왔습니다.


궁금하거든 들러보십시오.


이와 비슷한 소스로 월드와이드웹 전반(HTML, CSS, XML, JAVASCRIPT, ASP, PHP, SQL 등등)을 배울 곳에는 'W3Schools.com'이란 곳이 있습니다.


기초적인 내용으로 알차게 꾸며진 것 같긴 한데, 영문으로 되어 있어서 그것이 아무리 초급 영문이라 할지라도 저에겐 '그림의 떡'이나 진배없습니다.


어느 바둑 TV 해설자가 언젠가 그러더군요.


'지금보고 계시는 시청자의 바둑실력이 아마추어 12급일지라도 보는 눈은 프로급 수준입니다.'라고 말씀하셨듯이 저도 가끔은 들립니다.


뭘 알아서 찾는다기보다는 물에 빠져 허우적대면서 주위 지푸라기라도 잡아보는 심경에 들리는 거지요.


구경삼아 한 번 가보세요.


여기입니다.


http://www.w3schools.com/default.asp



 


또 'MSDN'이라는 마이크로소프트의 개발자 센터가 있기는 한데 저로선 도통 뭐가 뭔지 모르겠더군요.


거기도 필요한 분들은 들러보십시오.



 


출처 : http://blog.naver.com/frees007/80046341779


 




라이프로그


그리운 그 사람

노동당(중앙당)

천문우주지식포털

다음카페들(?)

방문현황

통계 위젯 (블랙)

1516
87
1026525