'공부방/CSS' 카테고리의 글 목록 (2 Page)

1)Anchor 태그에 스타일 시트

<style>
a:link { ... }//기본적인 링크
a:visited { ... }//가봤던 링크
a:hover { ..; }// 마우스가 올라갔을때
</style>

<style>
a:link {text-decoration: none;color:blue}
a:visited {text-decoration: none;color:blue}
a:hover {text-decoration: underline ;color:red}
</style>

2) 글자 스타일 시트

font-size : n
color : #RGB
font-weight : nomal / bold
font-style : normal / italic

3) 크기 스타일 시트

width : n
height : n

4) 여백에 관한 스타일 시트

문단의 외부 여백을 지정할 수 있다.

키워드	설 명
margin	문단 상/하/좌/우 의 여백 동시 지정
margin-top	문단의 위쪽 여백 지정
margin-bottom	문단의 아래쪽 여백 지정
margin-left	문단의 왼쪽 여백 지정
margin-right	문단의 오른쪽 여백 지정

5) 경계선의 스타일 시트

문단의 경계선의 두께나 폼의 경계선의 두께를 조절할 수 있다.

border : [두께 색상 선의 종류] 로 값을 주며 순서는 상관 없다. 이부분은

border:n(두께)
border-color:n
border-style:n(선의 종류)

와 같이 각각 값을 지정할 수도 있다.

(1) 세부지정

키워드	설 명
border : 두께 색상 선의 종류	문단 상/하/좌/우 동시 지정
border-top : 두께 색상 선의 종류	문단의 위쪽 지정
border-bottom : 두께 색상 선의 종류	문단의 아래쪽 지정
border-left : 두께 색상 선의 종류	문단의 왼쪽 지정
border-right : 두께 색상 선의 종류	문단의 오른쪽 지정
border-width : n	선의 두께
border-color : #RGB	선색

(2) 선의 형태

키워드	설명	키워드	설명
none	선 없음	double	이중선
hidden	감춤	groove	움푹 들어간 입체선
dotted	점선	ridge	튀어나온 입체선
dashed	대쉬선	inset	내용이 잠긴 느낌의 입체선
solid	실선	outset	내용이 튀어나온 느낌의 입체선

6) padding 스타일 시트

경계선과 본문 내용과의 간격 조정

키워드	설 명
padding	상/하/좌/우 의 여백 동시 지정
padding-top	위쪽 여백 지정
padding-bottom	아래쪽 여백 지정
padding-left	왼쪽 여백 지정
padding-right	오른쪽 여백 지정

7) 바탕 스타일 시트

키워드	설 명
background-color : #RGB	바탕색
background-image : url(url)	바탕 이미지
background-repeat : repeat / repeat-x / repeat-y / no-repeat	반복 위치
background-attachment : scroll / fixed	바탕 이미지의 스크롤 여부
background-position : [top / center / bottom ] [ left / center / right ] background-position : [x y] [ x% y% ]	이미지의 위치

8) list 스타일 시트

키워드	설 명
list-style-image : url(url)	리스트의 기호 대신 사용할 이미지
list-style-position: inside / outside	줄이 분리되었을 때 분리된 문자의 위치

출처 : http://blog.naver.com/valianty/130003480753

저작자표시 비영리

'공부방 > CSS' 카테고리의 다른 글

[CSS] z-index IE버그 (0)	2009.09.05
[CSS] 배경이미지에 관련된 속성 (0)	2009.09.04
[CSS] 정의와 3가지 적용방법 (0)	2009.09.04
[CSS] 테두리 스타일 (0)	2009.09.04
[CSS] Style을 이용해서 input 한글/영어 제한 (0)	2009.09.04

CSS [cascading style sheets]

기존의 HTML은 웹 문서를 다양하게 설계하고 수시로 변경하는데 많은 제약이 따르는데, 이를 보완하기 위해 만들어진 것이 스타일 시트이고 스타일 시트의 표준안이 바로 CSS 이다. 간단히 스타일시트라고도 한다.

HTML을 이용해서 웹 페이지를 제작할 경우 전반적인 틀에서 세세한 글꼴 하나 하나를 일일이 지정해주어야 하지만, 웹 페이지의 스타일(작성형식)을 미리 저장해 두면 웹 페이지의 한 가지 요소만 변경해도 관련되는 전체 페이지의 내용이 한꺼번에 변경되므로, 문서 전체의 일관성을 유지할 수 있고 작업 시간도 단축된다.

따라서 웹 개발자들은 보다 풍부한 디자인으로 웹을 설계할 수 있고, 글자의 크기, 글자체, 줄간격, 배경 색상, 배열위치 등을 자유롭게 선택하거나 변경할 수 있으며 유지·보수도 간편하게 할 수 있다.

각기 다른 사용자 환경에서 동일한 형태의 문서를 제공한다는 이점도 있다. CSS로 만들어진 문서는 사용자들의 브라우저 환경에 따라 홈페이지가 다르게 나타나는 일이 없고 어느 환경에서나 제작자가 의도한대로 그 효과가 전달된다. [네이버 백과사전]

스타일 시트를 웹 문서에 적용하는 방법에는 다음과 같은 3가지가 있다.

첫째, 인라인(Inline) 방식. 필요할때 즉흥적으로 사용.
<HEAD>~</HEAD>에 스타일에 대한 사전 정의없이 즉흥적으로 필요할 때 마다 <BODY>~</BODY>사이의 특정 태그 에 스타일시트 코드를 삽입하는 방법.

인라인(Inline) 방식 적용 예

결과화면

<TABLE BORDER="1">
<TR>
<TD STYLE="font-size:30px">나라디자인</TD>
</TR>
</TABLE>

나라디자인

드림위버 MX 2004 를 사용하면 소스보기 창에서 코드 자동완성 기능을 사용할 수 있으므로 스타일시트의 모든 속성을 외우고 있을 필요는 없다. 소스보기 창에서 TD따위의 기존 HTML태그 안에 커서를 놓은 다음 Space 키를 눌러 한칸 띄우기 하게 되면 해당 태그에 적용할 수 있는 HTML명령어 또는 CSS명령어가 나타나기 때문에 사용자는 ↓↑키 또는 마우스를 이용하여 원하는 속성과 값을 선택하기만 하면 된다. 즉, HTML태그의 속성 또는 CSS의 속성만 이해하고 있으면 된다.

둘째, 임베디드(Embeded) 방식. 현재 문서에서만 사용.
<HEAD>~</HEAD>사이에 특정 HTML태그(BODY, TABLE, TD, INPUT, SELECT.. 따위)에 대하여 사용자가 원하는 형태의 스타일로 태그 재 정의 해 놓으면 현재 문서의 본문 HTML태그는 사용자의 태그 재 정의에 따르게 된다. 만약 TD에 대하여 재 정의 하였다면 현재 문서의 모든 TD는 사용자가 정의한 형태 대로 나타난다. 이렇게 TD를 재 정의 하는 방법은 흔히 문서 내 모든 서체의 크기를 한가지 크기로 통일하기 위하여 자주 사용되는 방법으로서 대부분의 문자들이 TD태그 안에 포함되어 있다는 점을 이용한 것이다.

태그 재 정의 임베디드(Embede) 방식

결과화면

<HTML>

<HEAD>
<STYLE TYPE="text/css">

</STYLE>
</HEAD>

<BODY>
<TABLE BORDER="1">
<TR>
<TD>나라디자인</TD>
</TR>
</TABLE>
</BODY>

</HTML>

나라디자인

단, 이렇게 TD태그를 재 정의한 경우 현재 문서의 모든 TD태그에 대하여 영향을 미치게 되므로 예외를 허용할 수 있는 방법을 사용할 수 있다. 이것은 TD와 같은 HTML 태그를 재 정의하는 대신 CLASS(우리말로 굳이 번역하자면 집합)라는 형태의 스타일시트를 만들어 놓고 사용자가 지정하는 대상에 대하여만 스타일시트를 적용해 주는 것이다. 사용자는 문서의 <HEAD>~</HEAD>에 CLASS 라는 것을 정의해 놓고 본문의 특정 태그안에 CLASS="***" 이라는 코드를 삽입하여 문서 전체에 스타일이 적용되는 것을 방지하고 필요한 곳에만 스타일을 적용할 수 있게 된다.

CLASS 정의 임베디드(Embede) 방식

결과화면

<HTML>

<HEAD>
<STYLE TYPE="text/css">

</STYLE>
</HEAD>

<BODY>
<TABLE BORDER="1">
<TR>
<TD CLASS="title">나라디자인</TD>
</TR>
</TABLE>
</BODY>

</HTML>

나라디자인

<HEAD>~</HEAD>에서 정의내린 title 이라는 CLASS 이름은 사용자 임의로 만들어내는 것으로서 영문, 숫자 만 사용 가능하며 대소문자를 구분하지 않고 띄어쓰기 할 수 없으며 TD, TABLE 따위의 HTML 태그와 동일한 이름은 사용할 수 없다. <HEAD>~</HEAD>에서 CLASS를 정의하는 방법은 CLASS이름 앞에 점을 찍어 주는 것으로서 HTML 태그 재 정의 방식과 구분되도록 한다.

만약 한가지 대상에 서로 충돌하는 태그 재 정의 스타일과 CLASS 정의 스타일이 동시에 적용되었다면 CLASS 방식의 스타일시트가 우선 적용될 것이다.

셋째, 링크(Link) 방식. 여러개의 문서에서 사용.
스타일시트 정의 파일(***.css)을 별도로 만들어 놓고 모든 문서에서 ***.css파일을 불러오기 하여 사용하는 방식으로 웹 브라우저는 문서가 로딩될 때 링크된 ***.css 파일을 사용자의 샘틀에 함께 내려받기 한다. 태그 재 정의 방식과 CLASS 방식으로 스타일을 사전 정의 해 놓을 수 있다는 것은 임베디드(Embeded)방식과 동일하다.

style.css 파일의 소스 코드

td {font-size: 12px;} /* td 태그를 재 정의 하였음 */
.title {font-size: 30px;} /* title 이라는 이름으로 CLASS 를 정의 하였음 */

링크(Link) 방식으로 스타일을 적용한 예

결과화면

제목

내용

style.css파일에는 TD에 대한 태그 재 정의와 title이라는 CLASS가 사전 정의되어 있다. 이렇게 스타일시트 정의로만 이루어진 CSS문서는 HTML문서와 달라서 웹 브라우저가 출력하지 않고 HTML 문서를 장식하는 용도로만 사용된다. 또한 CSS문서는 오직 스타일시트에 대한 사전 정의만 있을 뿐 다른 태그나 명령어는 필요치 않고 주석이 필요한 경우  대신 /*...*/ 으로 주석처리 할 수 있다.

CSS문서를 HTML문서에 링크하여 적용하는 방법은 예제와 같이 문서의 <HEAD>~</HEAD>에 <LINK HREF="style.css" REL="stylesheet" TYPE="text/css">라고 적어주어 style.css파일을 현재의 문서에 링크한 다음 본문인 <BODY>~</BODY>에서 필요한 부분에 CLASS를 적용 하기만 하면 된다. CSS문서의 파일명은 사용자가 임의로 정하는 것으로 숫자와 영문만 사용 가능하며 대소문자를 구분한다.

만약 한가지 대상에 서로 충돌하는 링크(Link) 스타일과 임베디드(Embede) 스타일이 동시에 적용되었다면 임베디드(Embede) 방식의 스타일시트가 우선 적용될 것이다.

출처 : http://bbs.freecount.net/bbs/bbs.php?m=view&bid=study_3&id=9&page=2&cate=&q

저작자표시 비영리

'공부방 > CSS' 카테고리의 다른 글

[CSS] 배경이미지에 관련된 속성 (0)	2009.09.04
[CSS] 각종 속성 (0)	2009.09.04
[CSS] 테두리 스타일 (0)	2009.09.04
[CSS] Style을 이용해서 input 한글/영어 제한 (0)	2009.09.04
[CSS] 글에 마우스 올리면 점선이.. (0)	2009.09.04

border-style

border-style:none

border-style:dotted

border-style:dashed

border-style:solid

border-style:double

border-style:groove

border-style:ridge

border-style:inset

border-style:outset

*	4개의 태드리선을 모두 다르게 적용하려면 border-top-style border-bottom-style border-left-style border-right-style 를 따로 따로 지정해야한다.

■ border-color

border-color:#006699
border-style:dotted

border-color:tomato
border-style:dashed

border-color:orange
border-style:solid

*	4개의 태드리선을 모두 다르게 적용하려면 border-top-color border-bottom-color border-left-color border-right-color 를 따로 따로 지정해야한다.

■ border-width

border-width:1px
border-color:#006699
border-style:dotted

1px

3px

border-width:1px
border-color:tomato
border-style:dashed

1px

3px

border-width:1px
border-color:orange
border-style:solid

1px

3px

*	4개의 태드리선을 모두 다르게 적용하려면 border-top-width border-bottom-width border-left-width border-right-width 를 따로 따로 지정해야한다.

■ margin (바깥쪽 여백)

margin:3px
border-width:1px
border-color:#006699
border-style:dotted

margin 없이

margin:3px

margin:10px

*	4개의 태드리선을 모두 다르게 적용하려면 margin- top margin-bottom margin-left margin-right 를 따로 따로 지정해야한다.

■ width, height

width=300
height=40
border-width:1px
border-color:#006699
border-style:dotted

width=300
height=40

■ padding (안쪽 여백)

padding:5px
width=300px
border-width:1px
border-color:#006699
border-style:dotted

내용물 주위로 여백이...

*	4개의 태드리선을 모두 다르게 적용하려면 padding-top padding-bottom padding-left padding-right 를 따로 따로 지정해야한다. 원본 링크 : http://www.webmadang.net/script/script.do?action=read&boardid=3002&page=2&seq=11

저작자표시 비영리

'공부방 > CSS' 카테고리의 다른 글

[CSS] 배경이미지에 관련된 속성 (0)	2009.09.04
[CSS] 각종 속성 (0)	2009.09.04
[CSS] 정의와 3가지 적용방법 (0)	2009.09.04
[CSS] Style을 이용해서 input 한글/영어 제한 (0)	2009.09.04
[CSS] 글에 마우스 올리면 점선이.. (0)	2009.09.04

래채'sTory

공부방/CSS

[CSS] 각종 속성

'공부방 > CSS' 카테고리의 다른 글

[CSS] 정의와 3가지 적용방법

'공부방 > CSS' 카테고리의 다른 글

[CSS] 테두리 스타일

'공부방 > CSS' 카테고리의 다른 글

+ Recent posts

티스토리툴바