스타일 시트 CSS

Download Report

Transcript 스타일 시트 CSS 

스타일 시트
CSS
Cascading Style Sheets
스타일 시트의 필요성


웹 응용프로그램이 널리 사용됨에 따라 사용자들은
웹 브라우져에서 화려한 GUI 를 원하게 됨.
- 그에 따라 만들어 진 것이 CSS이다.
스타일 시트는 html이 웹에서 어떤 식으로 보여지는
결정하는 규칙들로 구성되어 있다.
1. 스타일 시트 선언
<head>
<style type = “text/css”>
<!-스타일 규칙
…
-->
</style>
</head>
스타일 시트는 head 태그
안에 선언하여야 한다.
사용할 스타일 시트가 CSS 임을 알림.
스타일 규칙을 선언하는 방법!!!
1. 스타일 시트 선언
H1{
color : blue;
}
선택자
션언부
하나의 선언부에 여러 개의 HTML 태그를 선택자로
기술
H1, H2, H3, H4, H5, H6{
color : blue;
선언부에 적혀 있는 모든 태그들에 같은 선언이 적용된다.
}
1. 스타일 시트 선언
한 선언부에서 여러 개의 속성을 기술
H1{
color : blue;
세미 콜론으로 구분!!
한 개의 속성만 기술하는 경우에는 ‘;’을 넣지 않아
font-size : 24pt;
됨.
}
내포된 태그에 스타일 시트를 적용할 경우
H3 EM{
text-decoration : underline;
}
1. 스타일 시트 선언

동일한 태그지만 서로 다른 스타일 시트를 적용하는
경우도 있다.
예 ) 문단을 나타내는 p 태그의 경우,
어떤 문단은 볼드체, 어떤 문단은 이탤릭체로 나
타내는 경우
태그 클래스 사용!!!!
2. 태그 클래스
예 ) 문단을 나타내는 p 태그의 경우,
어떤 문단은 볼드체, 어떤 문단은 이탤릭체로 나
타내는 경우
P 태그에서 italic 클래스는
글씨체를 italic 체로 나타냄
<style type = “text/css”>
P 태그에서 bold 클래스는
<!-글씨체를 bold 체로 나타냄
p.italic{ font-style : italic; }
p.bold{ font-style : bold; }
.underline{ text-decoration : underline; }
전체 태그들 중 underline 클래스로 명시
-->
된 것은
글씨 밑에 밑줄을 넣음.
</style>
2. 태그 클래스

스타일 시트를 전 페이지 처럼 작성한 뒤, 각 태그들
에 클래스를
명시하기 위해서는 어떻게 해야 할까?
2. 태그 클래스

스타일 시트를 전 페이지 처럼 작성한 뒤, 각 태그들
에 클래스를
명시하기 위해서는 어떻게 해야 할까?
<p class =“italic”>이탤릭체 문단</p>
<p class =“bold”>볼드체 문단</p>
<H1 class =“underline”> 밑줄 친 제목 </H1>
3. ID

각 태그들에 클래스를 부여하는 것 처럼 id를 부여할
수 있다.
id의 사용 방법은 선언부 앞에 ‘ # ‘ 을 붙임.
 각 id는 문서마다 유일한 것이어야 한다.
 선언된 id 는 html 태그 내에서 id 속성을 이용해서 사용
됨.
( id 속성에 넣을 때는 # 을 붙이지 않음.)

<style type = “text/css”>
<!-#red {color : red;}
-->
</style>
STYLE 태그와 STYLE 속성

Html 자체에서도 style 을 정의 할 수 가 있는데, 그
것이 태그별 style 속성을 정의해 주는 것이다.
<h2 style = “color : blue; text-decoration :
underline”>제목</h2>
정의하는 방법은 CSS와 같다.
만약, CSS에 h2에 대한 정의가 있는 경우, 또 각각의
정의가 충돌을 일으키는 경우가 생긴다면,
html에서는 위의 style 속성에 우선권을 주도록
되어있다.
4. LINK 태그를 이용한 STYLE 시트의 인
클루드

보통의 홈페이지에서 스타일 시트는 문서마다 서로
비슷하다.
홈페이지 전체의 통일성을 유지해주기 위해서이다.
그런데 문서마다 style 태그를 이용해서 정의를 해주면 너
무 분량이 많아질 뿐만 아니라, 매우 불편한 일이 될 수
밖에 없다.
포함된
문서가
stylesheet임을
알림.
Html 에서는 위의 불편을 없애기 위해서
link
태그를
이용
해 html 문서에 include 기능을 제공한다.
< link rel=“stylesheet” type = “text/css”
포함할 문서의 경로를 적어줌.
href =“mystyle.css” >
5. 스타일 시트 속성 – 폰트 관련 속성
속성명
font-family
font-style
의미
사용되는 폰트를 기술한다.
예 ) P{font-family : Helvetica, sans-serif;}
italic, oblique, normal 중에서 선택한다.
예) EM{ font-style : oblique; }
font-variant
small-caps, normal 중에서 선택한다.
예) H3{ font-variant : small-caps; }
font-weight
폰트의 굵기를 결정한다.
예) B{font-weight : 700;}
font-size
font
폰트 크기를 절대 값, 상대 값, 백분율로 표시한다.
예) h2{font-size : 200%;}
h3{font-size : 36pt; }
모든 폰트 속성을 한 번에 기술할 때 사용되며, 기술
하는 순서는 다음과 같다.
font{ font-style font-variant font-weight fontsize/line-height font-family;}
예) P{font : bold 12pt/14pt Helvetica,sans-serif;}
5. 스타일시트 속성 –색, 배경색관련 속성
속성명
color
의미
주어진 태그의 색을 지정한다.
예 )strong{ color : red; }
background-color 태그의 배경 색을 지정한다.
예)h4{ background-color : white; }
backgroundimage
배경 이미지를 지정한다.
예) body{background-image : url(back.jpg); }
backgroundrepeat
배경 이미지를 반복적으로 사용할 것인지에 대한 여
부를 결정
예)body{ background-repeat : no-repeat; }
backgroundattachment
배경 이미지가 스크롤과 함께 이동할 것인지 여부를
결정한다.
예)body { background-attachment : scroll; }
backgroundposition
배경색이나 배경 이미지의 시작 위치를 기술한다.
예) body{background-position : top center; }
background
배경 속성을 기술할 수 있으며, 순서는 상관없음.
body { background: white url(back.jpg) fixed
5. 스타일시트 속성 –텍스트 속성
속성명
의미
word-spacing
단어 사이의 공백의 정도를 기술한다.
예 )P {word-spacing : 0.5em; }
letter-spacing
글자들 간의 공백의 정도를 기술한다.
예) P {letter-spacing : 0.5em; }
text-decoration
vertical-align
text-transform
텍스트에 밑줄이나 깜빡임 등의 효과를 줄 수 있다.
예)U { text-decoration : underline; }
텍스트를 수직 방향으로 정렬(Align)한다.
예)SUP{ vertical-align : super; }
.fnote{ vertical-align : 50%; }
글자의 대 소문자를 변경한다.
예)h1{ text-transform : uppercase; }
.title{ text-transform : capitalize; }
5. 스타일시트 속성 –텍스트 속성
text-align
텍스트의 수평 방향으로 정렬(Align)한다.
예 )P{ text-align : iustify; }
h4{ text-align : center; }
text-indent
첫 번째 줄의 들여쓰기를 기술한다.
예)P{ text-indent : 5em; }
h4{ text-indent : -25px; }
line-height
기준선 간의 수직 거리를 기술한다.
예) p{line-height : 18pt; }
h2{line-height : 200%; }
5. 스타일시트 속성 – 박스 속성
속성명
의미
margin-top
태그의 상단 마진(margin)을 지정한다.
예 )UL{ margin-top : 0.5in; }
margin-right
태그의 우측 마진(margin)을 지정한다.
예 )UL{ margin-right : 30px; }
margin-bottom
태그의 하단 마진(margin)을 지정한다.
예 )UL{ margin-bottom : em0.5in; }
margin-left
태그의 상단 마진(margin)을 지정한다.
예 )UL{ margin-left : 3em; }
margin
태그의 좌측 마진(margin)을 지정한다.
예 )UL{ margin :2ex; }
5. 스타일시트 속성 –박스 속성
padding-top
태그의 상단 패딩(padding)을 지정한다.
예 )UL{ padding-top : 0.5in; }
padding-right
태그의 우측 패딩(padding)을 지정한다.
예 )UL{padding-right : 30px; }
padding-bottom
태그의 하단 패딩(padding)을 지정한다.
예 )UL{padding-bottom : 0.5in; }
padding-left
태그의 좌측 패딩(padding)을 지정한다.
예 )UL{padding-left : 2ex; }
padding
태그의 전체 패딩(padding)을 지정한다.
예 )UL{padding : 3em; }
5. 스타일시트 속성 –박스 속성
border-top-width 태그의 상단 보더의 폭을 지정한다.
예 )UL{border-top-width: 0.5in; }
border-rightwidth
border-bottomwidth
태그의 우측 보더의 폭을 지정한다.
예 )UL{border-right-width:30px; }
태그의 하단보더의 폭을 지정한다.
예 )UL{border-bottom-width: 0.5in; }
border-left-width 태그의 좌측보더의 폭을 지정한다.
예 )UL{border-left-width: 3em; }
border-width
태그 보더의 전체 폭을 지정한다.
예 )UL{border-width: 2ex; }
5. 스타일시트 속성 –박스 속성
border-color
보더의 색을 지정한다
예 )h1{ border-color : purple; border-style : solid; }
border-style
보더 스타일을 지정한다.
예 )h1{ border-style : solid; border-color : purple; }
border-top
상단 보더의 폭, 색, 스타일을 지정한다.
예 )UL{border-top : 0.5in solid black; }
border-right
우측 보더의 폭, 색, 스타일을 지정한다.
예 )UL{border-right : 0.5in grooved green; }
border-bottom
하단 보더의 폭, 색, 스타일을 지정한다.
예 )UL{border-bottom : 0.5in dotted blue; }
5. 스타일시트 속성 –박스 속성
border-left
border
좌측 보더의 폭, 색, 스타일을 지정한다.
예 )UL{border-left : 0.5in grooved green; }
보더의 폭, 색, 스타일을 지정한다.
예 )UL{border : 0.5in dotted blue; }
5. 스타일시트 속성 –박스 속성
5. 스타일시트 속성 –박스 속성
5. 스타일시트 속성 –위치 속성
속성명
의미
position
위치 방법을 기술한다. ‘’relative’는 다른 html 태그
와 같은 방법으로 위치가 결정되고, ‘absolute’는 다
른 태그에 관계없이 주어진 좌표에 블록이 존재한다.
left
좌측 위치를 기술한다.(단위 : px 단위)
top
상단 위치를 기술한다.(단위 : px 단위)
width
폭을 기술한다.
height
높이를 기술한다.
visibility
가시성을 기술한다.
background-color 배경색을 기술한다.
backgroundimage
배경 그림을 지정한다.