홈으로 홈으로 | 무료회원가입 | 아이디/비번찾기 | 즐겨찾기
추천음악방송메인홈1대1상담음악방송청취
아리랑가요(무료음악채널)
뽕짝아가씨(무료음악채널)
okTrot(무료음악채널)
전통가요(무료음악채널)
미스트롯(무료음악채널)

온라이브스토어(앱다운로드)

환상의뽕짝파티 무료음악
명작트로트메들리 무료음악
트로트메들리관광 무료음악
동영상노래방
가사검색

POP Player
신나는 고스톱
컴퓨터 오목
작은 음악다방
자동러시 웹플레이어신청

보안∵서버∵쿠키
윈도우∵프레임
이미지∵배경
시간∵달력∵계산
상태바∵타이틀바
음악∵영상
폼∵전송∵테이블
키보드∵마우스
효과∵링크∵메뉴
Script∵php
기타
PHP 강좌
윈도우관련팁
웹관련팁
홈페이지제작팁
기본강좌
레지스트리
윈도우서버
리눅스서버
Android
CSS (Cascading Style Sheets) 완벽 마스터
8년 전
HTML 은 하나의 프로그램 언어입니다. CSS 엮시 마찬가지로 하나의 프로그램 언어입니다.

프로그램 언어라고 해서 무지 어려울거란 생각은 버립시다. HTML 은 비교적 쉬우면서도 만만한 프로그래밍 언어입니다. CSS 는 HTML 보다 약간 어렵지만, 엮시나 만만합니다.

도대체 왜 CSS 를 배워야하는 걸까요? HTML, FTP, 홈페이지 계정, 등등... 골치아픈게 한두가지가 아닌데, 꼭 이 만만하면서도 만만하지 않은 CSS 까지 해야하는걸까요?

CSS 를 익혀야 제대로된 디자인을 할 수 있습니다. 라고 여러분께 사상 주입을 하지 않겠습니다. 뿐만아니라 CSS 익히라고 여러분께 권하지도 않습니다. 다만 CSS 의 학습이 필요한 경우, 본 문서를 통해서 적은 시간투자로 많은 것을 얻을 수 있기를 바랍니다.



자 어디 한번 해 볼까요?

본 문서에서 스타일 시트에 대한 완벽한 내용을 담지는 않습니다. 그러나 스타일 시트를 이해하기 위한 기본 적인 지식을 전달하고 이를 바탕으로 응용하며 실전에 사용할 수 있는 기법들을 충분히 설명을 할 것입니다.

본 문서를 숙지하지고 필요할 때마다 반복해서 학습하시면 많은 도움이 되리라 확신합니다.

Cascading Style Sheets 언어는 CSS 로 표현을 하며 W3C 에서 제정하고 있습니다. HTML 과 함께 어떻게 CSS 를 사용하는지에 대해서 여러분께 보여드리겠습니다.

HTML 은 대충 아무렇게나 작성해도 웹브라우저에서는 대충 보입니다. 그러나 CSS 는 틀립니다. CSS 에서는 에러의 발생 빈도가 높으며 또 에러가 있으면 웹브라우저에 잘 표현되지 않습니다.

에러를 체크하는 프로그램으로 대표적인 HTML Tidy 가 있습니다. 관심이 있으시면 살펴보시기 바랍니다.



[*] 시작

우선 글자의 색깔과 배경의 색깔을 변경하는 것으로 부터 시작을 해 볼까요?

이를 위해서 STYLE 태그를 사용할 수 있습니다. 아래와 같습니다.

<style type="text/css">
body { color: black; background: white; }
</style>

style 태그는 시작태그와 끝태그가 있으며 그 사이에 스타일을 지정하는 문장이 들어갑니다.

그래고 대부분의 경우 style 태그는 HTML 문서의 HEAD 부분에 기록을 합니다. 가능한한 HEAD 부분에 기록을 해야합니다. 그것이 표준입니다. 어쩔 수 없는 경우, BODY 안에 넣어도 대부분의 경우 잘 동작합니다.

따라서 다음과 같이 할 수 있습니다.

<html>
<head>
<title> replace with your document's title </title>
<style type="text/css"> body { color: black; background: white; } </style>
</head>
<body>

replace with your document's content

</body>
</html>

위 HTML 문장을 보시면 style 태그의 시작태그와 끝태그 사이에 스타일 문장이 기록되었습니다.

위 예제에서 <style type="text/css"> 에서 type="text/css" 는 없어도 됩니다 따라서 <style> 로 줄여서 쓸 수 있습니다.

<style> 과 </style> 사이에는 스타일 문장이 들어갑니다. 이 스타일 문장은 스타일 규격에 맞도록 기록이 되어야합니다. 그렇지 않으면 에러가 발생하여서 웹브라우저에 어떻게 보여질지 예측할 수가 없습니다.

규칙은 태그 이름으로 시작을 하며 { 와 } 사이에 속성이 기록됩니다.

위 예에서는 body 태그가 바로 스타일 문장에서 사용된 태그입니다. body 태그는 웹페이지의 전체적인 표현을 담당합니다.

body { ...속성값 ... }

위 와 같이 기록을 하는 것이죠.

속성을 지정할 때에는 속성 이름을 먼저 기록하고 콜론을 기록하며 그 다음에 속성의 값을 적어주면 됩니다.
예를 들면 "color: white" 와 같을 경우 color 가 속성이며 그 다음에 콜론이 왔습니다. 그리고 속성의 값인 white (칼라 값) 가 기록되었습니다. 이 것이 하나의 속성을 지정하는 것입니다.

속성을 지정하였으면 마무리는 세미콜론으로 합니다. 즉, "color: white;" 와 같이 끝에 세미콜론을 적어주는 것이죠.

하나의 태그에 속성은 여러개 지정할 수 있습니다.

body { color: white; }

이렇게 body 태그에 color 라는 하나의 속성을 지정한 다음 또 속성을 지정할 수 있습니다. 예를 들면 아래와 같습니다.

body { color:white; background: black; }

위 처럼 태그 이름을 적고 그 다음에 { 를 쓰고, 속성 이름 color 를 쓰고, 콜론을 쓰고, 속성 값 white 를 쓰고 속성의 끝을 나타내는 ; 를 쓰고, 다시 새로운 속성 이름 backgournd 를 쓰고 콜론을 찍고 속성값을 지정하고 세미콜론을 찌고... 속성을 다 지정했으면 } 를 쓰고.... 이와 같이 하나의 문장(규칙)을 만들 수가 있습니다.



[*] CSS 링크 연결

좋은 스타일 시트가 만들어졌다면 여러분을 이 스타일 시트를 다른 여러 페이지에서 쓰고자 할 것입니다. 이때 가장 좋은 방법이 바로 CSS 링크를 거는 것입니다.

아래의 코드를 보십시오.

<link type="text/css" rel="stylesheet" href="style.css">

위 링크와 같이 쉽게 사용할 수 있습니다. link 태그는 HEAD 부분(<head> 와 </head> 사이)에 기록되는 것이 좋습니다.

다음은 HTML 문서 예제입니다.

<html>
<head>
<title> replace with your document's title </title>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>

replace with your document's content

</body>
</html>


위 예제를 보면 알 수 있듯이 link 태그는 HEAD 부분에 기록이 되어 있습니다.


link 태그의 rel 속성은 반드시 "stylesheet" 라고 표기되어야합니다. 그래야 웹브라우저가 올바로 인식을 합니다.

href 속성에는 스타일 시트 파일의 URL 주소를 기록합니다.

스타일 시트 파일은 다음과 같습니다.

/* style.css - a simple style sheet */
body {
margin-left: 10%; margin-right: 10%;
color: black; background: white;
}

스타일 시트 파일은 다음과 같습니다.

[*] 페이지 여백

margin-left, margin-right 속성을 통해서 왼쪽 오른쪽 여백을 줄 수 있습니다.

다음과 같습니다.

<style type="text/css">
body { margin-left: 10%; margin-right: 10%; }
</style>

위 구문은 왼쪽, 오른쪽으로 10% 씩 여백을 주고 있습니다.




[*] 들여쓰기

제목과 헤더를 좀 더 잘 보이게 하려면 어떤식으로든 표현을 해야합니다. BODY 태그 뿐만 아니라 H1, H2 등에도 여백을 주어서 들여쓰기를 할 수 있습니다.

다음과 같습니다.

<PRE xml:space="preserve"><style type="text/css"> body { margin-left: 10%; margin-right: 10%; } h1 { margin-left: -8%;} h2,h3,h4,h5,h6 { margin-left: -4%; }</style></PRE>
위 예제는 body 와 h1, 그리고 h2 부터 h6 까지 총 3가지 규칙이 있습니다.

웹 페이지에서 body 부분은 10% 의 여백이 있습니다. 여기에 h1 태그에 음수로 여백 값을 지정하면 들여 쓰기 형태로 표현이 됩니다.


[*] 상, 하 여백

margin-top 속성은 위쪽 여백을 나타내며 margin-bottom 은 아래쪽 여백을 나타냅니다. H2 태그에 기본적인 여백을 지정하기 위해서는 아래와 같이 하면됩니다.

h2 { margin-top: 8em; margin-bottom: 3em; }

위 구문에서 em 은 font 의 크기를 지정하는데 사용됩니다. 1 em 은 폰트의 높이를 나타냅니다. 웹브라우저마다 pixels 이나 points 의 수치 계산이 틀립니다. 가장 안전한 방법은 em 의 사용입니다.


위 예제 처럼 규칙을 만들면 모든 H2 태그에 여백이 지정됩니다. 특정 H2 태그에만 여백이 지정되게 하려면 규칙에 이름을 지어야합니다. 다음과 같이 할 수 있습니다.

h2.subsection { margin-top: 8em; margin-bottom: 3em; }

규칙에 이름을 짓는 것은 먼저 태그 이름으로 시작을 합니다. 그리고 점을 찍고 규칙의 이름을 기록합니다.

위 처럼 규칙을 만들면 h2 태그에 subsection 이라는 규칙을 만든 것입니다. 그리고 이의 사용은 다음과 같이 합니다.

<PRE xml:space="preserve"><h2 class="subsection">Getting started</h2></PRE>


[*] 칼라 지정

칼라를 지정하는 예제는 처음의 body 태그에 나타나 있습니다.

다음과 같습니다.

body {
color: black;
background: white;
}
strong { color: red }

위 예제를 보시면 검색 글씨에 흰 바탕을 표현하는 규칙을 정한 것입니다. strong 태그는 붉은 색으로 글씨를 표현합니다.



[*] 보더와 백그라운드 지정

위 보더를 지정하는 것은 쉽습니다. H1~H6, P 태그 뿐만아니라 DIV 등 각종 태그에 보더를 나타낼 수 있습니다. 다음의 예를 보십시오.

div.box { border: solid; border-width: thin; width: 100% }

위 예제는 div 태그에 사용할 box 라는 이름의 규칙을 만든 것입니다. 다음과 같이 사용될 수 있습니다.

<div class="box">
The content within this DIV element will be enclosed
in a box with a thin line around it.
</div>

보더의 타입에는 dotted, dashed, solid, groove, ridge, insert, outset 등이 있습니다. border-width 속성은 보더를 그릴 너비를 나타냅니다. 두깨는 thin, medium, thick 등이 있으며 0.1em 과 같이 직접 지정할 수 있습니다.

백그라운드 지정에 대해서는 많은 예제를 보여드렸습니다.'

다음과 같이 background 속성을 지정하기만 하면됩니다.

div.box { border: solid; border-width: thin; width: 100%; background: white; }




[*] 링크에 칼라 표현

URL 링크에 여러분이 원하는 칼라를 지정하는 것으로 CSS 설명을 마치고자 합니다.

하이퍼 텍스트 링크(hypertext links)를 만들때 각 동작별로 색깔을 다르게 지정할 수 있습니다. 이미 방문한 링크의 경우 색깔, 또는 마우스가 링크를 가르킬때의 색깔 등을 표현할 수 있습니다. 다음을 보십시오.



<PRE xml:space="preserve"> :link { color: rgb(0, 0, 153) } /* for unvisited links */ :visited { color: rgb(153, 0, 153) } /* for visited links */ a:active { color: rgb(255, 0, 102) } /* when link is clicked */ a:hover { color: rgb(0, 96, 255) } /* when mouse is over link */</PRE>
링크에 나타나는 언더라(밑줄)인을 없애고 싶다면 아래와 같이 하시면됩니다.

<PRE xml:space="preserve"> a.plain { text-decoration: none }</PRE>
다음과 같이 사용하시면됩니다.

<PRE xml:space="preserve">This is <a class="plain" href="what.html">not underlined</a></PRE>



이상으로 CSS 에 대한 설명을 마칠까합니다.

초보자가 처음에 익혀야할 것 중 중요한 것은 CSS 를 규칙을 작성하는 문법과 LINK 를 거는 방법 그리고 실제로 태그에 응용을 하는 것입니다.



CSS 와 함께 더욱 뛰어난 웹페이지를 작성하기를 바랍니다.
추천추천 : 234 추천 목록
번호 제목
3,016
 우클릭 완벽차단 스크립트
3,015
 iframe 높이 100% 맞추기
3,014
 curl 함수를 이용한 HTTP REFERER 변경
3,013
 윈도우10 시스템 파일 및 Dism 검사
3,012
 텍스트 줄바꿈, 글자자르기 CSS
3,011
 jQuery Mobile에서 유용한 코드 10가지.
3,010
 [PHP] dirname()함수와 $_SERVER 관련 상수들
3,009
 [PHP] 파일 크기, 사이즈 불러오는 함수, filesize()
3,008
 [jQuery] jQuery Quick API
3,007
 [ transition ] 링크 hover 색상 변화 속도 조절
3,006
 PHP 5.3.0 에서 사라진 함수들 대체
3,005
 어떤 파일들이 include 나 require 되었는지 확인하는 함수(get_included_files)
3,004
 PHP 날짜 형식 및 계산하기(날짜 더하고 빼기)
3,003
 jQuery Mobile에서 유용한 코드 10가지.
3,002
 값이 배열 안에 존재하는지 확인하는 in_array함수
3,001
 사용자가 웹브라우저에서 뒤로가기를 했을때 감지하는 방법
3,000
 [jQuery]버튼 활성화, 비활성화
2,999
 jQuery show() / hide() / toggle() 사용법
2,998
 jquery 여러가지 이벤트
2,997
 border-radius 속성
2,996
 네이버 오픈API 음성합성 API 사용하는 PHP 샘플코드
2,995
 UTF8 한글 자르기..
2,994
 iconv 에러 발생시 계속 처리하기 옵션
2,993
 [PHP] 현재 페이지의 도메인 , URL 정보 알아내기.
2,992
 [PHP] 막강 기능 배열..
2,991
 [CSS] - Input clear `X ` 버튼 제거 ( IE, Chrome, Firefox )
2,990
 [Mobile] - 모바일웹 Href 태그속성들
2,989
 [JqueryMobile] - 현재화면의 가로세로 사이즈 구하기
2,988
 [JqueryMobile] - 화면의 가로, 세로 사이즈 구하는 방법
2,987
 jquery로 가로 넓이(width), 세로 높이(height) 자동 조절
2,986
 iframe 높이 jquery로 자동조절하기
2,985
 jQuery 오른쪽 영역의 높이를 왼쪽 영역의 높이와 동일하게 하기
2,984
 jquery에서 테이블 짝수, 홀수 번째 TR 배경색 변경하기
2,983
 jquery에서 테이블에 마우스 오버시 해당 행의 배경색상 변경하기
2,982
 jquery 스크립트내 특정값 확인하기 (디버깅)
목록
추억의가요방(가사포함)
인기절정뽕짝파티
인기트로트모음
지루박디스코메들리
밤무대애창곡
전자올겐경음악
세월따라노래따라
가슴시린트로트
트로트쌍쌍파티
7080추억속으로
종합성인가요방
못잊을옛날노래
카바레 음악
트롯디스코팡팡
관광 메들리
트롯카페
가요감상실
추억의옛노래
스페셜가요광장
BillBoard Free
추천가요모음
경음악.전자올겐
스페셜음악여행
WOLRD POPs
K-POP\BillBoard
POP TOP BEST

최신인기가요특집
추천가요\인기
F뮤직 인기\발라드
F뮤직 애창\트로트
트로트성인가요
인기가요
프리미엄 POP
경음악\기타
프리미엄 최신가요
프리미엄 성인가요
가요축제\트롯1번지
댄스\메들리\리믹스
카페\명상\경음악\기타
뮤직트로트 부산광역시부산진구 가야동 ㅣ 개인정보취급방침
Copyright (C) musictrot All rights reserved.