CSS(Cascading Style Sheets)
스타일시트를 삿용하는 기술을 말하며 글꼴,색깔,위치 등의 스타일 구조체를 정의하는 언어이다.
CSS를 이용하면 html문서와 css문서를 분리하기 때문에 html문서를 만들 때 스타일을 신경쓰지 않고 만들수 있다.
0. 스타일시트의 적용 예
[스타일시트 적용 전]
[스타일시트 적용 후]
1. 외부스타일시트를 만드는방법
메모장을 이용해서 코드를 쓰고 확장자를 .css파일로 저장했다.
[스타일시트 예제 styles.css]
2. 스타일시트를 적용하는 방법
(1) 외부의 스타일시트를 가져오는 방법.
- 만들어진 HTML문서의 head부분에 태그를 포함시켜야한다.
ex)
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
[외부 스타일시트 적용 예 4-1.html]
(2) 내부에 스타일시트를 사용하는 방법.
- head부분에 <style>과 </style>태그 사이에 스타일 시트 내용을 직접 지정하는 방법
ex)
<head>
<style type="text/css">
div.footer{
font-size: 9pt;
line-height: 12pt;
text-align:center;
}
(3) 인라인스타일
- 인라인은 바로바로 적용하는(?)그런걸 말하는데 HTML문서를 작성하며 <o>,<div>등에 스타일을 직접 적용해서 사용한다.
ex)
<p style="color:green">
초록색글씨 <span style="color:red"> 빨간색글씨</span>초록색글씨
</p>
3. 스타일시트 속성
CSS스타일 속성들은 레이아웃속성과 서식지정속성으로 분류된다.
1) 레이아웃 속성
- 웹페이지에 콘텐츠들을 어떻게 배치할지 결정할 때 사용함.
display속성 : block: 구성 요소가 새로운 문단처럼 새 줄에 표시된다.
list-item : 목록 형태의 항목. 머리기호와 함께 새로운 줄에 표시된다.
inline : 구성 요소가 현재 문단 내에 표시된다.
none : 구성요소가 표시되지 않고 감춰진다.
사용 예 : dispaly:block;
2)서식지정 속성
- 콘텐츠의 모습을 결정할 때 사용함.
border : 상자 모양의 경계를 표시할 때 사용함.
border-width : 모서리의 두께
border-color : 색깔
border-style : 모서리 스타일 (solid : 단일 경계선, double : 두줄 , dotted:점선, none:경계선 없음)
ex) border-width:5px - 모서리 두께를 5px로 설정함.
ex2) border: 10px double red; <- 이렇게 쓸 수도 있다!
text
text-align:center; (가운데정렬)
text-indent:12px; (12px만큼 들여쓰기)
font
font-family: Arial,sans-serif; (서체) 첫번째 글꼴이 없으면 뒤에있는 글꼴을 쓰는듯.?
font-size : 35pt; (크기)
font-style : italic; (스타일)
font-weight: bold; (굵기)
padding .. 여백
padding-right 등등..