홈>컴퓨터이야기
logo_01.gif


TOTAL ARTICLE : 91, TOTAL PAGE : 1 / 5
구분 웹일반 | 태그-소스 | 제로보드 | 그누보드 |
태그-소스 : Style sheet 사용법
 오예    | 2006·04·15 16:05 | HIT : 1,687 | VOTE : 66
스타일 시트(style sheet)란 HTML 문서내에 서체의 종류, 크기, 색, 여백 등을 지정해 주어, 사용자의 web browser환경에 상관없이 일정한 화면을 보여주는 기능을 말합니다. 스타일 시트는 MS internet explorer 3.0이상, Netscape 4.0 이상의 web browser에서 지원됩니다.

스타일 시트를 HTML 문서내에 삽입하는 방법



Style Sheet 사용법






............
............


스타일 시트 화일을 HTML 문서와 연결하는 방법



Style Sheet 사용법




............
............



폰트 관련 속성

font-family
fonts 폴더에 있는 폰트 이름
설명 화면에 나타나는 글씨의 종류를 설정할 때 쓰인다. 시스템에 있는 폰트 이름 중 하나를 사용하면 된다.
예제 P {font-family: Courier New}
기타 만일 윈도우 시스템에 굴림체가 없다면 Arial로 대체하라는 의미로 다음과 같이 사용할 수도 있다. 참고로, 이것은 제작자의 시스템에는 해당 폰트가 있으나, 다른 사람들의 컴퓨터에는 폰트가 없을 때 아주 유용하게 쓰인다.
P {font-family: 굴림, Arial}

font-style
normal, italic, oblique
설명 화면에 나타나는 글씨의 모양을 설정한다.
예제 H1 {font-style: italic}

font-weight
normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900
설명 글씨의 굵기를 설정한다. 일반적인 폰트는 normal 또는 bold만을 지원한다고 생각하면 된다.
예제 H2 {font-weight: bold}

font-size
절대값: 포인트(pt), 센티미터(cm), 픽셀(px), 인치(in)
상대값: larger, smaller, 퍼센트값 등
설명 글씨의 크기를 설정한다.
예제 H3 {font-size: 9pt}


색깔과 백그라운드 관련 속성

color
색깔 이름, RGB값
설명 글씨의 색깔을 설정한다. RGB값을 그대로 사용할 수도 있고, 십진수로도 사용할 수 있다. 또는 색깔의 고유 이름으로도 사용할 수 있다.
예제 EM {color: red}
EM {color: rgb(256,0,0)}

background
transparent, 색깔 이름, URL, RGB값 등
설명 백그라운드 색깔 또는 백그라운드 이미지를 설정한다.
예제 P {background: transparent}
BODY {background: red}
BODY {background: url(pcline.gif)}


텍스트 문자 관련 속성

word-spacing
normal, 길이
설명 단어와 단어 사이의 공간을 설정한다.
예제 H1 {word-spacing: 0.4cm}

letter-spacing
normal, 길이
설명 글자와 글자 사이의 공간을 설정한다.
예제 H1 {letter-spacing: 0.4cm}

text-decoration
none, underline, overline, line-through, blink
설명 글자 또는 문자열의 속성을 설정한다.
예제 A:link {text-decoration: none}

text-indent
길이, 퍼센트값
설명 들여쓰기를 설정한다.
예제 P {text-indent: 3cm}

line-height
숫자, 길이, 퍼센트값
설명 행간을 설정한다.
예제 DIV {line-height: 1.2cm}


박스(레이아웃) 관련 속성

margin-top, margin-right, margin-bottom, margin-left, margin
길이, 퍼센트값, auto
설명 해당하는 내용의 위, 오른쪽, 아래쪽, 왼쪽 등의 여백을 설정한다.
예제 BODY {margin-left: 3cm}
기타 여백 속성을 상하좌우로 설정해 줄 수도 있지만, 위의 예제처럼 margin이라는 하나의 이름으로 묶어서 설정할 수 있다. 이때 속성값은 네개를 가지는데, 순서는 top, right, bottom, left의 순서이다. 만일 속성값이 하나라면 상하좌우를 모두 해당 값으로 설정하고, 속성값이 두개라면 첫번째 값은 top과 bottom, 두번째 값은 right와 left의 값이 된다.
BODY {margin: 1cm 2cm 3cm 4cm}
샬롬~
난! 자유인...
  
91 태그-소스   태그가 적용되지 않게 하는 태그  오예 18·01·10 198 17
90 그누보드   그누보드 최고관리자 추가  오예 18·12·11 319 13
89 제로보드   mysql 4.1에서 제로보드의 호환성 문제 해결  오예 16·01·15 344 26
88 그누보드   그누보드 이미지 리사이즈  오예 15·07·30 458 33
87 그누보드   DHTML 에디터 이미지 새창으로 안뜨게 하려면  오예 15·05·17 462 48
86 태그-소스   video 태그  오예 14·06·19 745 29
85 웹일반   해상도에 따라 변하는 레이어 위치 고정하기  오예 12·08·16 884 33
84 그누보드   코멘트 줄간격 조정  오예 12·09·03 895 39
83 그누보드   그누보드 이미지 클릭시 팝업창 뜨는 문제  오예 13·04·24 1042 47
82 태그-소스   플래시에 레이어창 위로 올라오게 하기  오예 11·10·04 1075 43
81 웹일반   플래시 위에 레이어 팝업창 띄우기  오예 12·11·09 1162 39
80 웹일반   onfocus="this.blur()"  오예 11·08·22 1281 58
79 태그-소스   플래시 object태그(배경 투명)  오예 11·08·22 1320 43
78 태그-소스   이미지맵에서 롤오버 만들기  오예 11·07·31 1483 46
77 제로보드   특정 회원사진 출력 안되는 문제  오예 06·05·01 1668 58
태그-소스   Style sheet 사용법  오예 06·04·15 1687 66
75 제로보드   [PHP]게시판에서 문자열 자르기 함수  오예 05·11·16 1803 66
74 제로보드   최근 게시물을 나타내는 원리와 방법  오예 06·05·27 1805 77
73 제로보드   회원사진 리사이즈  오예 05·09·14 1825 89
72 웹일반   자신의 홈페이지 트래픽 알아내기  오예 06·04·05 1839 78
12345
Copyright 1999-2020 Zeroboard / skin by GGAMBO