css 기초
css 선언 방법
css는 우선순위에 따라서 3가지의 선언 방법이 있다.
외부 선언 (external css)
<link rel="stylesheet" type="text/css" href="common.css" />
html
<head>엘리먼트에 위와 같이 선언하여 외부에 별도의 파일로 되어 있는 css정의를 불러온다.
여러 html 파일이 하나의 css 파일을 공유할 수 있어서 표현에 일관성을 갖게 해 준다. 우선 순위는 가장 낮다.
문서 안에 포함 (embeded css)
<head>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
</style>
</head>
위와 같이 html <head> 엘리먼트 안에 <style> 엘리먼트를 사용하여 하나의 문서 안에서 css를 정의 한다.
엘리먼트에 직접 선언 (inline css)
<div style="padding: 10px; border: 1px solid #eee;">
<p>contents</p>
</div>
html 엘리먼트에 style 속성을 이용하여 직접 선언하는 방법이다.
사용자 정의 스타일 (user defined css)
가장 우선 순위가 높은 선언으로 웹페이지 제작자가 선언하는 것이 아니라 웹사이트를 이용하는 사용자가 직접 자신에게 맞는 스타일을 선언하는 방법이다.
스타일시트 css 정리
*css : cascading style sheet
1. 스타일시트의 문법구조.
<head>
<style type="text/css">
<!--
여기에 정의합니다…
-->
</style>
</head>
2. css를 따로 파일로 만든후 링크하기.
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
3. style속성을 사용하여 정의하기
html태그속에 바로 css를 정의하여사용할수 있다.
<font style=font-size:13pt;>우리나라만세</font>
4. 태그전체에 css적용하기
<head>
<style type="text/css">
b {font-size:20pt; color:red;}
</style>
</head>
<body>
<b>서울특별시</b>
</body>
b : 태그이름 font-size, color : 속성 20pt : css속성값
5. 동일한 태그라도 태그의 class라는 속성을 이용하여 서로 다른 스타일을 줄수도 있다.
<head>
<style type="text/css">
b {font-size:20pt; color:red;}
b.one {color:green;}
b.two {color:blue;}
</style>
</head>
<body>
<b>글꼴크기 20이면서 빨간색</b>
<b class=one>클래스 one가 적용된 문장</b>
<b class=two>클래스 two가 적용된 문장</b>
</body>
6. id태그를 이용한 다양한 적용
<head>
<style type="text/css">
b {font-size:20pt; color:red;}
b#one {color:green;}
b#two {color:blue;}
</style>
</head>
<body>
<b>글꼴크기 20이면서 빨간색</b>
<b id=one>id가 one인 태그</b>
<b id=two>id가 two인 태그</b>
</body>
class는 같은 클래스의 이름이 여러 개 존재할수 있지만, id는 하나만 존재해야한다. 즉, 다음과 같은 선언은 틀렸다.
font#test{ color:red; }
b#test{ color:blue; }
td#test{ font-size:9pt }
7. css의 주석
//한줄주석..
/*
여러줄 주석
*/
8. 가상클래스
가상클래스의 종류 : link, visited, hover, active
<head>
<style type="text/css">
a:link{text-decoration:none; color:blue;}
a:visited{text-decoration:none; color:yellow;}
a:active{color:red;}
a:hover{font-size:20pt; color:green;}
</style>
</head>
<body>
<a href=http://yahoo.co.kr>야후가기</a>
</body>
9. css의 속성들(글씨체관련)
- font-family : 글씨체의 종류를 설정하는 속성으로
<font face=...>속성을 가졌다. - font-size : 글자의 크기(단위:px,pt,%)
- font-style: 글자의 모양(italic, oblique)
- font-weight: 글자의 두께
- font-variant:글자가 영문자일경우 크기가 작은 대문자로 나타나게 해준다. 속성값으로 normal과 small-caps가 있다. normal은 아무변화도 주지않는 속성값이며 small-caps는 크기가 작은 대문자로 표시 해준다.
- font : 위의 font속성들을 한번에 지정해 줄 때 사용한다.
<head>
<style type="text/css">
p {font:italic small-caps bold 20pt /150% 굴림;}
</style>
</head>
<body>
<p align=center>
이번에는 css의 <br>
font속성을 한번에<br>
정의한 것이다.
</p>
</body>
10. css의 속성들(텍스트관련)
- letter-spacing : 글자간 여백
- text-indent : 들여쓰기
- text-decoration : 글자에 여러가지효과를 주는 속성 (none, underline, overline, line-through)
- text-align : 가로정렬위치지정 (left, center, right, justify(양쪽))
- vertical-align : 인접한 박스에서 세로정렬을 설정 (top, middle, bottom, baseline(기본값))
- text-transform : 문자의 모양을 전부 대문자 또는 전부 소문자로 변경시켜서 출력하는 역할 (uppercase,lowercase,capitalize,none)
- line-height : 줄간간격
- color : 글자색
<head>
<style type="text/css">
.line130{line-height:130%;}
.ucase{text-transform:uppercase;}
.lcase{text-transform:lowercase;}
</style>
</head>
<body>
<p class=line130>
<font class=ucase style=letter-spacing:10px;>uppercase</font><br>
<font class=lcase style=color:green;>lowercase</font><br>
<p class=text-align:center;>가운데정렬</p>
</p>
</body>
11. css 관련속성들(박스배경속성)
- background-color : 배경색(특정색의 투명효과를 내려면 transparent)
- background-image : 박스의 배경이미지(url)
- background-repeat : 배경이미지의 반복설정 (repeat:타일모양, repeat-x:가로반복, repeat-y:세로반복, no-repeat:반복없음)
- background-attachment : 배경은 움직이지 않고 내용만 움직이도록 할때
- background-position : 배경이미지를 특정위치로 이동
- background : 배경에 관련된 속성을 한번에 설정
<head>
<style type="text/css">
.bgimage{
background-image: url(bg.jpg);
background-position:200px 100px;
background-repeat:no-repeat;
}
.yellow_bg{background-color:yellow;}
.tablebg{
background:url(bg2.jpg) no-repeat fixed #ccccee 100px 100px
}
</style>
</head>
<body class=bgimage>
<p class=yellow_bg>
해당박스의 배경색이<br>
노란색으로 설정됩니다.
</p>
<table border=1 class=tablebg>
<tr>
<td>
배경관련 속성을<br>
한번에 적용한예
</td>
</tr>
</table>
</body>
12. css관련 속성들(리스트관련속성)
- list-style-type : 목록앞에 붙일 숫자나 기호
- disc : 동그라미
- circle : 가운데 비어있는 동그라미
- square : 네모
- decimal : 아라비아숫자
- lower-roman : 로마소문자
- upper-roman : 로마대문자
- lower-alpha : 영어소문자
- upper-alpha : 영어대문자
- none : 없음
- list-style-image : 목록앞에 이미지를 붙임
- url
- list-style-position : 목록기호의 붙이는 위치지정
- outside
- inside
- list-style : 한꺼번에 지정
<head>
<style type="text/css">
.first{list-style-type:upper-alpha; list-style-position:outside;}
.second{list-style-type:circle;list-style-position:inside;}
.image{list-style-image:url(icon.gif);}
</style>
</head>
<body>
<ol class=first>
<li>111111</li>
<li>222222</li>
<li>333333</li>
</ol>
<ol class=second>
<li>111111</li>
<li>222222</li>
<li>333333</li>
</ol>
<ol class=image>
<li>111111</li>
<li>222222</li>
<li>333333</li>
</ol>
</body>
13. css관련 속성들(텍스트박스, 버튼 등의 속성들)
- width, height : 크기변경
- border-위치-style : 경계선의 위쪽, 아래쪽, 왼쪽, 오른쪽의 모양을 각각 따로 변경할수 있는 속성이며 각각을 설정할 수 있는 속성 이름은(border-top-style, border-bottom-style, border-left-style, border- right-style)가 있다.
- none : 기본값
- hidden : 경계선 없음
- solid : 실선
- double : 두줄
- ridge : 경계선이 밖으로 튀어나온듯한 모양
- groove : 경계선이 안으로 들어간듯한 모양
- outset : 경계선안의 내용이 밖으로 튀어나온듯한 모양
- inset : 경계선안의 내용이 안으로 들어간듯한 모양
- dashed : 경계선이 긴 점선으로 설정
- dotted : 경계선이 짧은 점선
-
border-style : 경계선과 관련한 스타일을 한번에 적용
-
padding-위치 : 박스와 박스안의 내용과의 여백
-
padding : 박스안의 여백크기를 한꺼번에 적용
-
margin-위치 : 박스와 바깥쪽여백의 크기를 설정
-
margin : 한꺼번에 설정
-
border-위치-width : 경계선의 두께를 위치별로 설정
-
border-width : 한꺼번에 설정
-
border-위치-color : 경계선의 색깔을 위치별로 설정
-
border-color : 한꺼번에 설정
-
position : 개체의 위치를 조정
- absolute : 브라우저상단 왼쪽에 절대적인 위치로 설정
- relative : 개체바로 이전의 내용에서 부터 상대위치
- fixed : 개체를 브라우저 창의 특정위치에 고정시켜 스크롤을 하더라도 위치가 이동되지 않음
- static : 기본값
- top, bottom, left, right : position속성으로 위치의 타입을 설정하고 이 속성들로 실제 개체의 위치를 설 정할수있음
<head>
<style type="text/css">
div#layer1{
position:absolute;
background-color:yellow;
top:50px;
left:30px;
width:300px;
height:150px;
}
div#layer2{
position:absolute;
background-color:silver;
top:110px;
left:80px;
width:200px;
height:110px;
}
</style>
</head>
<body>
<div id=layer1>aaaaaaa</div>
<div id=layer2>bbbbbbb</div>
</body>
- z-index : 레이어의 순서
- over-flow : 개체의 크기가 박스보다 클경우의 처리
- visible
- hidden
- auto
- scroll
- visibility : 화면에 보일지의 여부
14. css관련 속성들(테이블관련속성)
- border-collapse : 표의 외곽선과 셀간의 경계선사이의 여백
- caption-side : 제목의 위치설정
- empty-cell : 셀의 내용이 없을때 셀의 경계선을 표시할지의 여부를 설정
- show : 경계선보임
- hide : 경계선 감춤
- vertical-align : 세로정렬방식