회원가입      
I D
PW
ID저장 | ID/비밀번호찾기
서비스안내
안내말씀
서비스개괄
 스타일 시트 (CSS)에 대한 괜찮은 강좌
조회 : 675 등록 : 2006-02-25 18:01:52 작성 :홈마스타 홈페이지http://www.landmoa.net

CSS 란 Cascading Style Sheets의 약자로 일반적으로 스타일시트라고 부릅니다.
HTML을 이용하여 홈페이지를 작성하다 보면 특히 글자 하나하나를 일일이 크기, 색상 등을 지정해 주어야 할때, 귀찮고 힘들죠? 웹에디터를 쓰시는 분이라면 어느정도 편할수도 있겠지만 나중에 소스를 열고 직접 수정해야 할 일이 생길때 참 힘들껍니다. 그래서 이를 보완하기 위해 생긴 언어가 스타일시트이고요 정식 용어는 CSS 랍니다. 간단히 스타일시트라고 부르도록 하겠습니다.


스타일시트를 사용하는데 있어 장점은 무엇일까요?

첫째로, 웹페이지 제작시 글꼴, 표 등 스타일을 미리 저장해 두면 한 가지 정해둔 스타일로 해당 웹페이지 전체가 일관성을 유지 할수 있게 되고, 처음 말했듯이 세세이 하나하나 지정해줄 필요가 없기 때문에 작업시간도 단축 됩니다. 쉽게 이해할수 있도록 예제를 준비 했습니다.

직접 태그로 입력한 경우

스타일시트를 이용한 경우

<html>
<head><title>스타일시트 사용</title>
</head>
<body>
<font size=1 face=궁서체 color=red>태그나라는에는..</font><br>
<font size=2 face=굴림체 color=green>스타일시트 강좌도 있어요</font>
</body>
</html>


<html>
<head><title>스타일시트 사용</title>
<style>
.a{font-size:10px;font-family:궁서체;color:red}
.b{font-size:13px;font-family:굴림체;color:green}
</style>
</head>
<body>
<font class=a>태그나라는에는..</font><br>
<font class=b>스타일시트 강좌도 있어요</font>
</body>
</html>

위의 두 소스의 결과는 같습니다. 따라서 예제는 따로 준비 안했고요, 태그연습장에 복사하셔서 직접 해보세요. 어느정도 태그를 잘 아시는 분이라면 위에 소스만 보고도 스타일시트에 대해서 어느정도 파악이 되실 껍니다.

둘째로 웹페이지 제작시 좀더 풍부한하게 디자인 할수 있습니다.
예를 들어서 글자의 크기를 태그로 지정하면 <font size="값"> 를 이용하는데 값은 1부터 7까지로 7가지로 제한되어 있습니다. 하지만 스타일시트를 이용하면...<font style="font-size:값pt;"> 으로 값은 제한이 없습니다. 대략 값을 500 으로 해 보았는데 음.. 글자 한자가 화면 전체를 덮더라고요.^-^

그외에도 글자간격, 줄간격 등 자세히 하나하나 입력할수 있어 홈을 좀더 멋지게 디자인 할때 유용하게 쓰입니다.<br 또 각기 다른 사용자 환경에서 동일한 형태의 페이지를 보여준다는 이점도 있습니다. 예를 들어 브라우저에 따라서 같은 웹페이지가 다르게 보일수 있는데요, 스타일시트가 이것을 보완해 줍니다. 요즘 대개 마이크로소프트 인터넷 익스플로러를 이용하기 때문에 이 부분에 대해서는 이정도만 설명 하도록 하겠습니다.

스타일시트를 정의 하는 방식에는 3가지 방법이 있습니다.

<HEAD></HEAD> 태그 사이에 정의하기 (Embeded 방식)
<style> 이라는 태그를 이용하여 HTML의 <HEAD></HEAD> 사이에 정의 합니다. 예제는 다음과 같습니다.

<html>
<head>
<style type="text/css">
<!--
이곳에 스타일이 정의 됩니다.
//-->
</style>
</head>
<body>
.
.
</body>
</html>

편의상 type="text"/css" 는 생락하고 <style> 써도 상관 없습니다.


외부파일(*.CSS)에 정의하기
<style></style> 태그는 생략하고 스타일 내용만 따로 확장명이 css 인 파일로 저장한 후 <link> 태그로 불러 드리는 방식입니다. 이 방식은 여러 페이지에 동일한 스타일을 적용시키고하 할 때 사용 됩니다. 똑같은 스타일시트를 페이지 마다 중복 해서 써주게 되면 작업 시간도 길어지고 나중에 수정할 때 정말 힘들겠죠? 불러 드릴 때는 <link> 태그를 이용한다고 그랬는데요. 예제는 다음과 같습니다. 같은 디렉토리 안에 있는 tagnara.css 라는 파일을 불러 드릴 경우 입니다.

<Link rel=stylesheet type="text/css" href="tagnara.css" title="제목">

태그 속성 값에 지정하기 (inline방식)
말 그대로 태그 하나하나에 속성값으로 지정해 주는 방식입니다. 예로 폰트태그에 글자크기를 지정할 경우

<font style="font-size:15pt;color:red">글자</font>

이전 강좌의 보충 설명과 기본형식을 자세히 알아보겠습니다.
Embeded 방식을 사용할 경우

<html>
<head>
<Style type="text/css">
태그{속성1:값;속성2:값}
</Style>

</head>
<body>
<태그>스타일이 적용될 부분</태그>
</body>
</html>

발간색 글자 태그라는 부분에 font 나 b 와 같은 태그를 입력하고 속성1에 color, size 와 같은 속성을 쓰고 속성값에는 해당 값을 씁니다. color 의 경우에는 색상코드를 size 의 경우에는 숫자값을 입력합니다. 이렇게 되면 해당 태그 사이에 있는 내용들은 위에 스타일시트에서 정의한 스타일로 나오게 됩니다. 이것이 스타일시트의 가장 기본적인 형식입니다. 이렇게 설명하니까 복잡하고 이해가 잘 안가시겠죠? 이해를 돕기 위해 예제를 준비했습니다.

<html>
<head>
<Style type="text/css">
font{color:red;font-size:25pt}
</Style>
</head>
<body>
<font>스타일이 적용되는 부분</font>
</body>
</html>

inline방식을 사용한 경우

<태그 style="속성:값;속성:값">

바로 예제를 보겠습니다.

<font style="color:red;font-size:25pt">스타일이 적용되는 부분</font>

결과는 다음과 같습니다.

스타일이 적용되는 부분

그런데, 첫 번째와 두 번째의 결과가 같죠? 다시 한번 반복 설명하는데요... 첫 번째 같은 경우에는 페이지 전체적인 디자인을 하기에 편리하겠죠? 이것이 스타일시트의 특성인 전체적인 일관성을 둘 수 있다는 점입니다. 두 번째 방법은 태그 하나하나 디자인을 풍부하게 사용하고자 할 때 그 특징을 발휘 하겠죠? 사용하기 편한 방식대로 쓰시기 바랍니다.

글자크기 지정하기

font-size:값

값에는 x-large, large, medium, small, x-small 등을 사용할 수 있는데요. 상대적인 값을 정하기 때문에 사용하는데 조금 불편한점이 있습니다. 대개 숫자 값으로 입력하는데요. 단위는 pt 값과 px 값이 있습니다. 각각 포인트와 픽셀 단위입니다.

inline 방식 : <태그 style="font-size:10pt"></태그>
embeded 방식 : 태그{font-size:10pt}

전 강좌부터 계속 강조하는 부분인데... 태그로 글자 크기를 정하는 방법 보다 더 글자크기를 자세히 다룰 수 있죠?

글자체 지정하기.

font-family:값

값에는 굴림체,궁서체,바탕체,돋움체를 넣을 수 있습니다.

inline 방식 : <태그 style="font-family:궁서체"></태그>
embeded 방식 : 태그{font-family:궁서체}

글자색 지정하기

color:값

값에는 RED, GREEN 과 같이 영문 이름으로 써도 됩니다. 주로 색상코드를 입력하죠. 여기서 주의해야 할 점은 첫 번째, 두 번째와 달리 font-color 가 아니라는 점입니다. 그냥 color 가 되겠습니다.

inline 방식 : <태그 style="color:green"></태그>
embeded 방식 : 태그{color:green}

글자두께 지정하기

font-weight:값

값은 bold 으로 글자를 두껍게 해줍니다. 태그에서의 <b> 와 결과가 같습니다. thin 도 있는데 이것은 보통 글자와 두께가 같습니다.

inline 방식 : <태그 style="font-weight:bold"></태그>
embeded 방식 : 태그{font-weight:bold}

글자형태 지정하기

font-style:값

값에는 italic 가 있고 태그에서는 <i> 와 결과가 같은 이탤릭체로 만들어 줍니다.normal 값을 쓰면보통글자와 같은데요, 구지 쓸 필요는 없겠죠?

inline 방식 : <태그 style="font-style:italic">
embeded 방식 : 태그{font-style:italic}

글자에 줄긋기

text-decoration:값

값은 none, underline, overline, line-through 으로 순서대로 밑줄없이, 글자 아래 줄, 글자 위에 줄, 글자 가운데 줄 입니다.

inline 방식 : <태그 style="text-decoration:underline">
embeded 방식 : 태그{text-decoration:underline}

위에서 배운 여섯가지 속성을 혼합해서 사용한 예제를 보겠습니다.
10pt 크기의 빨간색 궁서체

<font style="font-size:10pt;color:red;font-family:궁서체">태그나라</font>

결과는 다음과 같습니다.

태그나라

embeded 방식으로 바꾸면 다음과 같습니다.

font{font-size:10pt;color:red;font-family:궁서체}

여기서 여러 가지 속성을 입력하게 되면 사이에 ; 가 들어 갑니다. 쉼표와 같은 기능을 합니다. 하지만 속성과 값 사이에는 : 가 들어간다는 걸 주의 하시고요. 또 여기서 태그를 꼭 font 로 해야하는 것은 아닙니다. 만약 문단 태그 p를 넣었다면 문단과 문단 사이에 해당 스타일이 적용됩니다. 이것 외에도 여러 가지 태그에 적용 됩니다. 아래 예제와 결과를 보고 이해 합시다.

<input type=button value="태그나라" style="font-size:10pt;color:red;font-family:궁서체">

<INPUT style="FONT-SIZE: 10pt; COLOR: red; FONT-FAMILY: 궁서체" type=button value=태그나라>

신기하죠? 태그에서 width 라는 가로길이 명령이 img, table 태그 등등에서도 같이 적용되듯이 스타일시트도 여러 곳에서 적용 됩니다.

내용출처 : http://tagnara.net/



글쓰기는 로그인하셔야 합니다.
폰트테그
페이지: 1 / 1       자료수 : 20
간단한 글이나 다녀간 흔적을 남기는 것은 사이트를 위해 큰 도움이 됩니다. ▶▶▶ 1
번호 제목 성명 작성일 조회
20     tag 자료 100 가지 푸른산11-07-20317
19     특수문자들 유니코드 홈마스타08-06-021653
18     도형문자코드표 (1) 홈마스타08-06-021007
17     특수문자 코드표 홈마스타08-06-02798
16     Windows에서 사용 가능한 특수문자 코드표 홈마스타08-06-02575
15     HTML 에서 쓸 수 있는 특수문자 코드 홈마스타08-06-01639
14     보이지 않는 특수문자 입력 홈마스타07-11-01701
13     텍스트필드 한/영 고정 지정 방법 홈마스타07-01-30598
12     Html 특수문자1 홈마스타07-01-29541
11     기호문자 및 특수문자 모음 홈마스타07-01-11830
10     HTML에서 점찍기 홈마스타06-11-26575
9     선그리기 홈마스타06-11-21578
8     본문내의 모든 글자들의 폰트종류와 글자 크기 정하기 홈마스타06-11-21646
7     하이퍼링크된 문장에 마우스가 올라갔을때 윗줄,밑줄 홈마스타06-11-21516
6     문자의 스타일[font-style] 이 적용된 예제 (1) 홈마스타06-11-21523
5      TD에서 한글이 위로 치우치는 문제 해결 트릭 홈마스타06-11-19528
4     각종 글자태그 홈마스타06-11-06505
3      편리하게 사용할수 있는 색상표입니다. 홈마스타06-05-122171
2 스타일 시트 (CSS)에 대한 괜찮은 강좌 홈마스타06-02-25676
1     폰트스타일 사용하기 홈마스타06-02-22681

[1] 글쓰기는 로그인하셔야 합니다. 1


복수단어 검색은 공백(space)로 구분해 주세요.
 

상호 (타이틀) : 랜드모아 (LandMoa)    
copyright : 랜드모아 제작진