Page 1

닷넷 & 홈페이지디자인 10 기

CSS 란 ?

(Cascading Style Sheet)

CSS 첫시간


닷넷 & 홈페이지디자인 10 기

Contents

학습목표 01. CSS 란 ? 02.

CSS 의 용어와 기본구성

03. 선택자의 종류


닷넷 & 홈페이지디자인 10 기

▶CSS 란 • HTML 은 수 년간 홈페이지를 만드는 사람들에게 필 수적으로 사용되어져 왔습니다 . 하지만 소스의 구 성 , 레이아웃의 배치등에서 많은 한계점이 드러났 습니다 . 이런 한계를 극복하고자 CSS(Cascading Style Sheet: 이하 스타일 시 트 ) 가 도입되기 시작했습니다 . 스타일 시트는 웹 페이지에 자주 적용되는 부분들을 미리 정리하고 모아서 정의 한뒤 그 페이지 내부에서 필요로 할 때마다 해당 부분을 가져다 적용할 수 있게 되어 있습니다 .


★ CSS 란 ?

닷넷 & 홈페이지디자인 10 기

앞서 웹 브라우저에서 보여지는 화면을 구성하는 데 있어 가장 기본을 이루는 언어가 HTML 이라 고 언급한바 있다 . 하지만 소스의 구성 , 레이아 웃의 배치 등에서 많은 한계점이 드러났습니다 . 이런 한계를 극복하자가 CSS 가 도입되기 시작 하였습니다 . 스타일 시트는 글꼴 , 자간 / 행간 , 색상 , 배경 , 테두리 등 50 여지 이상를 해결하 고자 제작되었습니다 .


★ 중간에 한마디

닷넷 & 홈페이지디자인 10 기

• 스트일시트는 기본적으로 HTML 을 어느 정 도 숙지한 사람이라면 쉽게 배울 수 있으며 , 업계에서 HTML 코더나 웹 디자인 관련 일을 하고자 원한다면 원활하고 합리적인 HTML 을 구성하기 위해 스타일 시트는 반드시 숙지 해야 합니다 .


★ HTML 과 CSS 의 뚜렷한 차이점

닷넷 & 홈페이지디자인 10 기

HTML

CSS

폰트 크기

가장 큰 사이즈가 7

수치에 따라 마음대로 조절

자간 / 행간

사이즈 조절이 불가능

배치가 자유로워 가독성을 높일 수 있음

링크

밑줄의 변형이 불가능

밑줄의 변형이 자유롭다

페이지의 여백

적용에 한계가 있음

원하는 만큼 페이지의 여백 을 만들 수 있다 .


★CSS 의 용어와 기본구성

닷넷 & 홈페이지디자인 10 기

CSS 의 기본구성 <style type=“text/css” P{font-size:9pt;color:red} </style>

① ② ③


★CSS 의 기본구성 1

닷넷 & 홈페이지디자인 10 기

CSS 는 자바스크립트와 함께 <HEAD>..</HEAD> 사이에 삽입되며 , HTML 사용법과 동일합니다 . <style type=“text/css” -“ 우리가 접근하고자 하는 스타일 (style) 의 유형 (type) 은 텍스트 (text) 이고 그 파일은 css 입니다 .

참고 ) 스타일 유형이 이미지이고 그 파일 이 포토샵이라면<style ? type=“image/psd”> <style type=“image/psd”>


★CSS 의 기본구성 2

닷넷 & 홈페이지디자인 10 기

P{font-size:9pt;color:red} -“P tag 가 사용되는 곳은 모두 폰트 사이즈 9pt 이고 색상은 빨강색으로 표시하세요” 선언문들 간의 구분

P{font-size:9pt;color:red} 선택자

속성

선언문

속성

선언문


★CSS 의 기본용어

•<HTML> • <HEAD> • <TITLE> CSS 시작 </TITLE> •<style type="text/css"> •P{font-size:30pt;color:red} •</style> • </HEAD> • <BODY> • <P> 닷넷 10 기 파이팅 • </BODY> •</HTML>

닷넷 & 홈페이지디자인 10 기


★CSS 의 기본용어 Sourece •<HTML> • <HEAD> • <TITLE> CSS 시작 </TITLE> •<style type="text/css"> •P{font-size:30pt;color:red;border:solid green} •h1{color:blue} •</style> • </HEAD> • <BODY> • <h1> 좋아하는 스포츠 </h1> • <p> 닷넷 10 기 파이팅 • </BODY> •</HTML>

닷넷 & 홈페이지디자인 10 기


★CSS 의 특성

닷넷 & 홈페이지디자인 10 기

① 기존의 HTML 기능을 확장해서 사용할 수 있습니다 . ② 한번의 지정으로 웹 문서 모든 곳에 적용할 수 있습니다 . ③ CSS 는 상위의 기능을 상속 받습니다 . ④ 관리가 용이합니다 . ⑤ 복잡하지 않아 쉽게 알아 볼 수 있습니다 .


★ 선택자의 4 가지 종류

닷넷 & 홈페이지디자인 10 기

실무에서 가장 많이 활용하는 네가지 유형 ① ② ③ ④

HTML 태그를 선택자로 사용하기 Class 를 선택자로 사용하기 ID 를 선택자로 사용하기 문장 선택자 (Contexual Selector)


★ 1. HTML 태그를 선택자로 사용하닷넷 & 홈페이지디자인 10 기 기

<style type=“text/css”> HTML 태그 { 속성 1: 값 1; 속성 2: 값 2;} HTML 태그 { 속성 1: 값 1; 속성 2: 값 2;} HTML 태그 { 속성 1: 값 1; 속성 2: 값 2;} </style>


★ 1. HTML 태그를 선택자로 사용하닷넷 & 홈페이지디자인 10 기 기 •<HTML> <HEAD> • <TITLE> HTML 태그를 선택자로 사용하기 </TITLE> •<style type="text/css"> •h2{font-style:italic;color:green} •h3{font-style:bold;color:blue} •h4{font-style:normal;color:red} •</style> </HEAD> <BODY> • <h1> 닷넷 10 기 파이팅 </h1> • <h2> 닷넷 10 기 파이팅 </h2> • <h3> 닷넷 10 기 파이팅 </h3>


★ 2. Class 를 선택자를 사용하기

•<style type=“text/css” •. 키워드 { 스타일속성 : 속성값 } •</style> •<body> •< 태그 class=“ 키워드” > •</body>

닷넷 & 홈페이지디자인 10 기


★ 2. Class 를 선택자를 사용하기

• • • • • • • • • • • • • • • •

<head> <title>class 를 선택자를 사용하기 </title> <style type="text/css"> P{color:green;font-size:10pt} P.one{color:blue;font-size:15pt} P.two{color:black;font-size:20pt} .three{color:black;font-size:13pt} </style> </head> <body> <P> 닷넷 10 기 </P> <P class="one"> 닷넷 10 기 (one)</P> <P class="two"> 닷넷 10 기 (two)</P> <P class="three"> 닷넷 10 기 (P three)</p> <I class="three"> 닷넷 10 기 (I three)</i> </body>

닷넷 & 홈페이지디자인 10 기


★ 3. ID 를 선택자를 사용하기

•<style type=“text/css”> •#name( 스타일속성 : 속성값 } •</style> •<body> •< 태그 id=“name”> •</body>

닷넷 & 홈페이지디자인 10 기


★ 3. ID 를 선택자를 사용하기

• • • • • • • • • • • •

<HEAD> <style type="text/css"> #Aoo1{color:red;font-family; 굴림 ;font-size:20pt} #Aoo2{color:black;font-family; 굴림 ;font-size:15pt} #Aoo2{color:blue;font-family; 굴림 ;font-size:12pt} </style> </HEAD> <BODY> <div id="Aoo1"> 닷넷 10 기 A001</div> <div id="Aoo2"> 닷넷 10 기 A002</div> <div id="Aoo3"> 닷넷 10 기 A003</div> </BODY>

닷넷 & 홈페이지디자인 10 기


★ 4. 문장선택자 (Contextual Selector)

닷넷 & 홈페이지디자인 10 기

•<style type=“text/css”> •태그 태그 { 스타일속성 : 속성값 } •</style>


★ 4. 문장선택자 (Contextual Selector)

• • • • • • •

닷넷 & 홈페이지디자인 10 기

<HEAD> <style type="text/css"> P I{color:blue;font-family; 굴림 ;font-size:15pt} </style> </HEAD> <BODY> <P> 이문장은 <I> 이중 태그 </I> 로 선택자를 사용하는 방법을 알 려드립니다 .</P> • <P> 닷넷 10 기 </P> • <I> 닷넷 10 기 </I> • </BODY>

css  

how to css?