사용 방법
1. 외부 스타일 (External Style Sheet)
: css를 자주 많이 사용할 경우 css를 별도의 파일로 만들어(*.css) 저장한 후 끌어와 사용하는 것이다.
style 태그는 HTML 문서의 HEAD 부분에 기록
link 태그 rel 속성: "stylesheet" 라고 표기 href 속성: 스타일 시트 파일의 URL 주소를 기록.
<head>
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
2. 내부 스타일 (Internal Style Sheet)
: css를 지원하지 않는브라우저는 그냥 무시하고 넘어가라는 의미
만약 를 안해줄 경우 브라우저에 css 소스가 그대로 표시된다.
3. 인라인 스타일 (Inline Styles)
html태그에 그냥 꼽사리 끼는 것. 어떤 태그안에서든지 style속성을 이용
기본지식 - Cascading Style Sheets
------------------------------------------------------------------------------------------------------------------------------------------------------
CSS Comments
/* ,*/
ex) /* 주석 */
p { text-align: center; /* 주석 */ color: black; font-family: arial
-------------------------------------------------------------------------------------------------------------------------------------------------------
Tag, class, ID
1. 기본 Selector
: Tag 또는 지 맘대로 지은 이름
selector {property: value} 셀렉터 {속성:속성값}
- 기본모양
body {color: black} --> 바탕색을 검정
- 여러개 속성을 ;로 연결
p { text-align: center; color: black; font-family: arial} --> p태그는 가운데 정렬에 arial이라는 폰트에 색은 검정
- 여러개의 셀렉터에 같은 효과
1,h2,h3,h4,h5,h6 { color: green } --> h1,h2,h3,h4,h5,h6 태그는 몽땅 녹색
2. class Selector
: 한 태그를 여러 클래스로 나누어 각각에 속성 부여하거나
여러 태그가 한 클래스를 공유 (스타일을 통해서 일관성을 주기 위해서)
.class {property: value} 셀렉터.클래스 {속성:속성값}
- 기본모양 css에서 다른 속성을 지정
p.yellow {color:yellow}
p.blue {color:blue}
- html에서 클래스 지정. p태그에 yellow,blue로 클래스 이름 짓고
<p class="yellow"> This paragraph will be colored yellow. </p>
<p class="blue"> This paragraph will be colored blue. </p>
- p태그를 생략하고 .찍고 클래스 이름만 써도 된다.
.blue {color:blue}
- 클래스를 여러 태그가 공유
<h1 class="center"> This heading will be center-aligned </h1>
<p class="center"> This paragraph will also be center-aligned. </p>
단, 클래스 이름 숫자로 짓지 마라. 모질라/화이어폭스는 못 알아본다.
3. id Selector
오직 유일한 하나의 이름을 가진 id 만이 존재할 수 있습니다
class를 좀 더 세분화 하는 이유도 있지만, 본문내에 동일한 이름을 가진 id 중복사용이 불가능함.
(보통 id는 자바스크립트를 사용해서 DHTML 을 적용하기 위해 사용)
----------------------------------------------------------------------------------------------------------------------------------------------------------
selector < Class < ID
ex) style.css에서는
/*Selector*/ p {color: yellow}
/*Class*/ .center {text-align: center}
/*id */ #green {color: green}
skim.html에서는
<p> not center-aligned and colored yellow. </p>
<p class="center"> center-aligned and colored yellow. </p>
<p class="center" id="green"> center-aligned and color is green. </p>
-----------------------------------------------------------------------------------------------------------------------------------------------------
* 글색 배경색 지정
ex) 검은색 글씨에 흰 바탕을 표현하는 규칙을 정한 것입니다.
body { color: black;
background: white; }
ex) strong 태그는 붉은 색으로 글씨를 표현합니다.
strong { color: red }
* 보더와 백그라운드 지정
H1~H6, P 태그 뿐만아니라 DIV 등 각종 태그에 보더를 나타낼 수 있습니다.
ex) div 태그에 사용할 box 라는 이름의 규칙을 만든 것
div.box { border: solid;
border-width: thin;
width: 100% }
보더의 타입에는 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 링크에 여러분이 원하는 칼라를 지정하는 것.
하이퍼 텍스트 링크(hypertext links)를 만들때 각 동작별로 색깔을 다르게 지정할 수 있습니다.
이미 방문한 링크의 경우 색깔, 또는 마우스가 링크를 가르킬때의 색깔 등을 표현할 수 있습니다. 다음을 보십시오.
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 */
링크에 나타나는 언더라(밑줄)인을 없애고 싶다면 아래와 같이 하시면됩니다.
a.plain { text-decoration: none }
다음과 같이 사용하시면됩니다.
This is not underlined
* 페이지 여백
margin-left속성
margin-right 속성
margin-top 속성
margin-bottom 속성
* 공용선택자 ; 모든 엘리먼트를 선택한다.
페이지 내의 모든 <h1> <h2> <p> <form><blockquote> 등의 브라우져 기본 마진과 패딩을 갖고 있는 엘리먼트들의 여백이 없어진다.
* display는 block, none, inline 세가지를 가지고 있다
display 스타일 속성은 block element --> inline element
또는 inline element--> block element로 변환.
- block level의 element는 <div> <h1~6>, <p>, <ul>, <ol>, <li> 등
- Inline level의 element는 <br/>, <img/>, <span> 등
1. word-break:break-all;
하나의 문장을 띄어쓰기할 때 (공백 기준이 아닌) 문자 단위로 끊어주는 역할을 하는 스타일 속성입니다.
기본적으로 <td></td> 안에서 문장은 띄어쓰기 공백을 기준으로 잘리기
때문에 width크기를 지정해 주더라도 width 크기를 무시하고 늘어나게 됩니다.
이런 경우, 문자 단위로 끊어주면 자동으로 width에 맞춰 줄바꿈이 됩니다.
2. white-space:nowrap;
1번과 반대로 셀의 너비를 지정했다 하더라도 자동으로 줄바꿈이 되지 않게 하는 속성입니다.
-------------------------------------------------
속성들의 관련 자료 (참고하세요)
이미지와 텍스트의 위치를 지정하기 위해서는 img 태그의 속성중 align 속성을 사용합니다.
img 태그를 쓰고 그 뒤에 문장을 쓰면 속성값 대로 문장과 이미지가 정렬됩니다.
기본 형식은 ' <img sre="파일명" align="속성값"> 문자열 ' 입니다.
align 속성을 생략하면 기본값인 top 이 적용됩니다. (align 의 속성값은 아래와 같습니다. )
left 이미지의 왼쪽에 문자열을 정렬합니다.
right 이미지의 오른쪽에 문자열을 정렬합니다.
center 이미지의 중간에 문자열을 정렬합니다.
top 이미지의 제일 상단과 문자의 상단을 맞춥니다.
texttop 영문에서 g 보다 f 가 더 위로 튀어나온 것을 볼수 있는데
위로 올리간 문자의 맨위와 이미지의 상단을 맞춥니다.
middle 문자열의 밑선을 이미지의 가운데에 맞춥니다.
absmiddle 문자열의 가운데를 이미지의 가운데에 맞춥니다.
bottom 이미지의 하단과 문자열의 하단을 맞춥니다.
baseline bottom과 같은 역할을 합니다.
absbottom 영문문자열에서 해당되며, fight 라는 단어를 쓸때
f 보다 g 가 더 밑으로 내려와 있으므로 g 의 밑선과 그림의 하단을 맞춥니다.
----------------------------------------------------------------
핵이 아닌 부분으로써 핵으로 많이 간주되고 쓰이고 있습니다.
이 important, 중요 부분은 특정한 값이 반복적으로 적용되었을 경우 어떤것에 우선순위를 주는지 정할수 있습니다.
해더의 폰트색상을 빨강으로 정해 놓고 혹시나 다른곳에서 정해줄때 바뀌지 않도록 !import 를 넣어주면 어떻게 되던간에 그 값이 지정값이 됩니다.
------------------------------------------------------
font 스타일 속성은 글자에 대한 스타일을 지정해주는 것이다.
속성에는 글자체, 글자굵기, 글자스타일, 줄간격 등인데
- font-weight, font-style, font-variant
- font-size
- line-height (줄간격)
- font-family
처럼 따로 따로 입력해 줄 수 있고
한꺼번에 grouping해서 입력해 줄 수 있는데 그룹화 선언은
- font: 1순위 2순위 3순위 4순위 (위의 속성부터 차례대로 1,2,3,4순위이다.)
예) font:bold italic 1em /2em "굴림체" ;
처럼 순위별로 한 줄에 입력해 주면 된다. 왠만하면 순위를 지켜줘야 스타일 속성이 제대로 나타나게 된다.
1. font-family
페이지에 있는 폰트를 커스터마이징 합니다.
일반적으로 대부분의 컴퓨터는 특정한 폰트만 설치됩니다.
그렇기때문에 개발자의 컴퓨터에서 사용가능한 폰트와 사용자의 컴퓨터가 사용가능한
폰트가 다를 수 있습니다.
1) 각각의 fong-family는 일반적인 특성을 공유하는 폰트의 집합체를 담고있습니다.
1 - Sans-serif : Verdana, Arial Black, Trebuchet MS, Arial, Geneva
세리프가없는 폰트들이 포함되어있고 포통 세리프 폰트보다 컴퓨터에서
읽기 쉽다고 알려져있습니다.
2 - Serif : Times, Times New Roman, Georiga
문자 끝부분에 신문기사에서 볼수있는 장식적인가시와 고리모양이
있는 폰트입니다.
3 - Monospace: Courier , Courier New, Andale Mono
일정한 폭의 문자를 가진 폰트로 구성되어 있습니다.
예를 들면 "i" 와 "m"이 차지하는 넓이가 같고 주로 프로그램의
소스코드를 보여주는데 사용됩니다.
4 - Cursive: Comic Sans, Apple Chanery
손으로 쓴것같은 폰트를 포함하고 있습니다.
5 - Fantasy: LAST NINJA
화려한 양식의 폰트를 포함하고 있습니다.
주로 웹디자인을 하는데 사용됩니다.
body{
font-family: Verdana , Geneva, Arial, sans-serif;
}
2) font-family 속성을 사용해서 하나이상의 폰트를 ","를 구분자로하여
입력하고 마지막에 페밀리 이름을 넣습니다.
적용되는 폰트는 우선순위는 명시된 순서이며, 폰트가 없다면 다음
폰트가 순서로 적용됩니다.
만약 적용할 수 있는 폰트가 없다면 페밀리의 폰트중 브라우져가 지원하는
기본 폰트를 적용합니다.
3) font-family 속성을 지정하지 않았다면 Sarif 페밀리의 기본 폰트가 적용됩니다.
4) 여러개의 단어를 사용하는 폰트는 이름 주위에 큰 따옴표를 붙입니다.
폰트의 이름은 대소문자를 구분합니다.
font-family: "Courier New"
5) 개발자는 사용자들의 컴퓨터에 어떤 폰트가 사용가능한지 알 수 없기때문에
여러 플래폼에서 사용하는 폰트를 포함하는 페밀리를 선언해야 합니다.
2. font-size
폰트의 크기를 제어합니다.
1) 폰트의 크기는 픽셀로 명시할 수 있습니다.
font-size : 14px;
문자의 가장 밑에서 가장 위까지 사이의 거리를 나타냅니다.
2) 폰트의 크기를 다른 폰트 크기에 비해서 얼마나 커야하는지 비율로 명시 할 수 있습니다.
font-size: 150%
기준이 되는 폰트는 부모 폰트의 크기입니다.
3) em을 통해서 척도를 통하여 폰트의 크기를 명시할 수 있습니다.
font-size: 1.2em;
기준이 되는 폰트는 부모폰트의 크기이며 여기서는 보모 폰트의 1.2배 크기를 나타냅니다.
4) xx-small, x-small, small, medium, large, x-large, xx-large와 같은 키워드를 통해
프라우저에 정의된 디폴트 값을 사용하여 크기를 정할 수 있습니다.
font-size : small;
5) 대부분의 브라우져에서 일관적인 결과를 얻는 방법은 body에 디폴트 폰트 사이즈를
정한후 키워드나 비율를 사용하여 크기를 지정하는 방법입니다.
body 폰트를 변경함으로써 전체 페이지의 폰트 크기를 변경할 수 있습니다.
6) 폰트의 크기를 지정하지 않는다면 브라우져의 디폴트 값을 정합니다.
3. font-weight
폰트의 굵기를 조절합니다.
1) bold 속성을 통하여 일반 텍스트보다 더 어둡고 굵게 보이게 할 수 있습니다.
font-weight: bold;
2) bold로 지정된 속성은 normal로 지정함으로써 해지가 가능합니다.
font-weight: normal;
3) 보모의 크기를 통한 상대적 크기 지정이 가능합니다.
font-weight: bolder , lighter
폰트의 굵은 정도에 대해 차이가 별루 없어 실제로 많이 사용되지는 않습니다.
4) 100 - 900 사이의 값을 통해 굵기를 설정할 수 있습니다.
폰트의 크기를 절대값으로 지정하는 것은 브라우저에서 잘 지원대지 않기때문에
잘 사용되지 않습니다.
4. text-decoration
text에 스타일을 추가합니다.
1) text-decoration을 위해서는 오직 한 가지 규칙만 선택되면 분리되어 있는
규칙들은 한꺼번에 적용되지 않습니다.
같이 적용하기 위해선 선언부에 두가지 모두를 명시해야 합니다.
body{
text-decoration: underline overline;
}
1. display
block Element 를 정렬할때 display: inline; 이나 float를 사용한다고 알고계시는 퍼블리셔들이 몇명이있다.
하지만 display경우에는 말그대로 디스플레이될 상태를 설정하는것이다.
즉 ! inline 레벨로 할것이냐 block레벨로 할것이냐 아니면 숨길것이냐를 설정하는것이다.
(http://msdn.microsoft.com/en-us/library/ms530751(VS.85).aspx)
예전에 어딘가에서 display: inline; 과 float:left;를 같은 용도로 정렬로 사용하는데 차이점을 묻는 글을 본적이 있다.
block을 inline으로 하면 자연스럽게 인라인의 특징인 left정렬이 되는것이 당연하다.
예를 들어 span도 inline요소이다 이녀석을 <span>aaa</span><span>aaa</span> 당연히 left정렬이 된다.
하지만 block요소들은 float로 설정하지않은이상은 떨어져서 한줄씩나온다.
고로 결론은
block의 정렬은 float ! ! !
inline의 요소의 정렬은 text-align인것이다.
ps. block의 중앙정렬은 정렬을 원하는 block요소에서 margin: 0 auto;를 해주면 중앙 정렬이 된다
단 block의 특성상 width값을 줘야중앙정렬이 된다.
(DTD설정은 당연 해줘야함)
2. float
float는 위에서 언급한 바와 같이 object 즉 block의 정렬을 담당하고있는 녀석이다.
float Attribute
| -none | Default. Object displays where it appears in the text. |
-left |
Text flows to the right of the object. |
-right |
Text flows to the left of the object. |
위의 Attribute 를 보다싶이 총 3가지의 정렬이 존재 한다.
float는 자석과도 같다 서로서로 왼쪽으로 붙을지 오른쪽으로 붙을지 결정만해주면
float해준 다음 Element 녀석들은 무조껀 그 효과로 인해서 붙어버린다.
이것을 미연에 방지하기위에서 clear을 해주는것이다.
다음은 clear에 관한 Attribute 이다.
clear Attribute
| -none | Default. Floating objects are allowed on both sides. |
-left |
Object is moved below any floating object on the left side. |
-right |
Object is moved below any floating object on the right side. |
-both |
Object is moved below any floating object. |
clear은 혼자 사용할때는 아무 효과가 없다 이녀석의 목적은 float된 녀석들을 초기화 시켜버리는 기능을 한다 .
즉
clear:left; : 왼쪽으로 붙은 녀석들만 원래대로 떨어져 ! !
clear:right; : 오른쪽으로 붙은 녀석들만 원래대로 떨어져! !
clear:both; 다 떨어져 !
ps.떨어져는 원래의 속성으로 돌아가란말이다 ㅡ_ㅜ 즉 block요소의 고유의 정렬인 한줄씩정렬
float:right; 와 float: left;를 같이 사용했는데
clear:left;를 해버리면 float:right;는 살아 있어서 후에 올 Element의 한놈은 오른쪽으로 붙어 버린다
잘생각해서 clear를 사용하자
그리고 하위 Element가 없어도 종료시점에는 가능하면 clear을 해주자
나중에 include로 불러들이거나 업데이트할때 또 오류가 발생할수있는걸 미연에 방지하기위해서이다.
DIV 레이아웃
* Div (=division)
- div를 사용하면 쉽게 문서의 구조를 만들 수 있다.
- 의미없이 div를 남용하지 말아야 한다.
- 문서의 특정 영역을 구조화하고 의미를 부여하는 것이다.
- tabel 구조를 그대로 div로 바꿔서는 안된다. (단지 테이블로 이미지를 잘라 쓰는것과는 다르다.)
* 순서
1. 하나의 웹페이지를 만드실 때 '디자인' 부터 생각하지 마시고 ( 포토샵에서 전체 디자인을 먼저 한 후, 그것을 웹페이지로 전환하는 식이 아니라)
문서의 '내용'을 어떻게 구성할지를 고민한다. 그리고 전체 사이트의 내용들을 제목, 목차, 내용 등등... 일반 문서 양식에 맞춰 '문서'로 작성
2. 해당 문서와 동일한 형태로 웹브라우저에서도 표현될 수 있게끔 HTML/XHTML 엘레멘트로 전환
3. 그런다음 문서의 각 내용들이 어떤 블럭으로 묶일 수 있는지를 판단한 후 각 블럭을 DIV로 감쌉니다.(이때부터가 디자인에 대한 구상을 해야되는 시점입니다.)
4. 이러한 DIV 블럭들을 CSS를 이용하여 원하는 곳에 위치 시킵니다. ==> 이것이 바로 DIV 레이아웃 작업입니다.
5. 포토샾을 열어 해당 블록들(배경, 아이콘, 제목 등등등....)에 필요한 이미지(디자인) 작업을 진행합니다.
6. 작업한 이미지(디자인)들을 CSS를 이용하여 각각의 HTML 엘레멘트들에 적용 시킵니다.
http://www.code-sucks.com
------------------기본 레이아웃 ; 2단 왼쪽고정------------------------------------------------------------------------------
■ 2단 구성 : 서브페이지에 많이 쓰이는 기본 레이아웃. float 사용.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Sixx layout</title>
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<div id="container">
<div id="header"> 10.header </div>
<div id="content"> 20.contents</div>
<div id="side"> 30.side </div>
<div id="footer"> 40. footer </div>
</div>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------------------------------------------
1. Head
1. body
2. container
| 10. header |
| 20. contensts mainshadow main mainInsideBox 4. Location 4. Tag list 4. guestbook (guest list) 4. Search list 4. Search reply 4. Notice 4. pretected entries 4. entries tag&label trackback comment, comment write 4. paging |
30. side 4. Notice 4. Category 4. Tags 4. Search 4. Calender 4. Recent entries 4. Recent Trackbacks 4. Archive 4. Link Site 4. Connect Statistics 4. DAISY, FEED --------- 4. My Picture 4. bgm player 4. Tistory |
| 40. Footer |
* {margin: 0; padding: 0; border: 0; }
body {font-family: 돋움; font-size: 100%; color: #333333; }
/* 레이아웃 */
@charset "utf-8";
#container {width: 800px; border: 1px solid #333333;}
#header {width: 800px; height: 100px; background-color: #d9d9d9; }
#content {width: 600px; height: 500px; background-color: #eeeeee; float: left;}
#side {width: 200px; height: 500px; background-color: #b7b7b7; float: right; }
#footer { width: 800px; height: 100px; background-color: #d9d9d9; clear: both;}
-----------------------------------------------------------------------------------------------------------------------------------------------------
1. position ; 위치를 지정하는 원하는 위치에 엘리먼트를 배치하는 속성.
static : 기본값
relative : static과 같지만 offset(top,right,bottom,left)을 지정할 수 있고, 하위 엘리먼트 offset의 기준점이 된다.
absolute : 화면상에서 다른 컨텐츠의 위치에 영향을 미치지 않고 위치 지정이 가능. 보통 레이어라고 불리우는 것.
- 임의 위치에 고정시킬때...
{position: absolute;
top: 100px;
left: 100px; }
2.float ; 대상 엘리먼트를 띄워서 현재의 위치에서 좌측이나 우측에 배치하는 속성.
left : 엘리먼트를 좌측으로 배치함.
right : 엘리먼트를 우측으로 배치함.
none : float시키지 않음.
- float이 끝난 위치 바로 다음에 오는 엘리먼트에서는 clear 시켜준다.
{clear: both; }
<참조>
http://blog.naver.com/wdig
http://blog.naver.com/epicuros25/140023165726
http://blog.naver.com/hood20/30024326969
http://blog.naver.com/wdig/140059688137
http://blog.naver.com/rusdudtn2/140047671761 - 강좌
http://ilmol.com/wp/2005/07/08/84/
http://blog.naver.com/celeves/130013890890
http://blog.naver.com/rediblue/120031448284
http://blog.naver.com/skell83/150022336737
'Tech > Blog_CSS' 카테고리의 다른 글
| Favicon 파비콘 만들어 주는 싸이트 (1) | 2008.01.17 |
|---|---|
| Tistory의 MP3 다운받기 (0) | 2008.01.08 |
| Adsense 가입하기 (0) | 2007.12.27 |
| Adsense 용어정리 (0) | 2007.12.24 |
| replacer (0) | 2007.12.08 |
| 태터툴즈 사이드바 치환자 #2 (0) | 2007.12.07 |