5 장. CSS3 스타일시트 기초 HTML5 웹 프로그래밍 입문 ( 교수용 ) 1. 목차 5.1 CSS3 시작하기 5.2 CSS 기본 사용법 5.3 문자와 색상 지정하기 5.4 박스모델 설정하기 2.

Presentation on theme: "5 장. CSS3 스타일시트 기초 HTML5 웹 프로그래밍 입문 ( 교수용 ) 1. 목차 5.1 CSS3 시작하기 5.2 CSS 기본 사용법 5.3 문자와 색상 지정하기 5.4 박스모델 설정하기 2."— Presentation transcript:

1 5 장. CSS3 스타일시트 기초 HTML5 웹 프로그래밍 입문 ( 교수용 ) 1

2 목차 5.1 CSS3 시작하기 5.2 CSS 기본 사용법 5.3 문자와 색상 지정하기 5.4 박스모델 설정하기 2

3 5.1.1 스타일시트와 CSS3 기본 개념 5.1.2 CSS 속성선언 5.1 CSS3 시작하기 3

4 스타일시트와 CSS3 기본 개념 ■ 스타일시트란 ? 웹 문서의 출력될 외형 스타일을 좀더 다양하면서 손쉽게 적용  HTML 태그로는 세세한 부분까지 모두 다 지정하기에는 부족  스타일시트를 이용하면 크기, 색상 등의 스타일을 일괄 적용  글자간격, 문단간격, 위치 등 자세한 부분까지 제어가 가능 콘텐츠의 내용과 디자인의 분리가 가능한 점이 큰 장점 ( 구현과 설 계의 분리 )  웹문서에서 마크업 요소는 보다 내용의 구조에 치중  디자인 요소는 별도로 작성  다수의 개발자가 동시에 웹사이트 개발 가능, 또한 유지 보수 용이 결과적으로 파일의 용량 축소, 사이트의 성능도 향상 4

5 ■ CSS(Cascading Style Sheet) 의 특징 웹 컨소시엄에서 웹 문서용으로 개발한 스타일시트 언어 기능의 복잡도에 따라 Level1, Level2, Level3 로 구분  1996 년 CSS Level1 (CSS1), 1998 년 CSS Level2 (CSS2),  Level3 인 CSS3 는 모듈 별로 구분하여 2005 년 이후 현재까지 개발 중 CSS3 의 가장 큰 차이점은 모듈 기반으로 개발된다는 점  각종 디바이스에 따라 CSS3 에서 원하는 모듈만을 탑재  필요한 모듈만을 빠르게 업데이트 하는 것이 가능 CSS3 는 화려하고 동적인 스타일 작성 가능  기존의 플래시나 그래픽 디자인 도구에 의존하던 부분을 CSS3 스타 일시트 만을 이용하여 상당부분 가능하게 됨 5 역호환 (backward-compatibility) : CSS3 를 지원하면 CSS2 와 CSS1 은 당연히 지원 - 이 책에서는 경우에 따라 CSS1, CSS2, CSS3 를 구분하지 않고 간단히 CSS 로 표 기

6 CSS 속성선언 ■ CSS 기본 문법 CSS 속성 (Property) 설정 : 특정 엘리먼트 혹은 그 일부분에 대해 외형의 스타일을 추가 ■ CSS 스타일시트 구성요소 선택자 (Selector)  HTML 문서 내에서 스타일을 설정할 대상이 되는 태그를 선택  여러 개 나열될 경우 콤마 (,) 로 구분 속성 선언 (Property Declaration)  속성 (Property) 과 속성값 (value) 으로 구성  속성과 속성값은 콜론 (:) 으로 구분하고 선언은 세미콜론 (;) 으로 종료 선택자 (Selector) 속성선언 (Declaration) 선택자 { 속성 : 값 ; 속성 : 값 ;... } 예, h3 {color:red; font-style:italic; } 6

7 CSS 시작 예제 ■ 스타일 지정이 없는 문서 ( 태그만 적용 ) ■ 폰트 및 색상 지정 (CSS 적용 ) 7 스타일시트 이해하기 이 예제는 CSS 의 개념을 설명합니다. 다음 예제로 이어집니다. h3 { color:red } p { font-size:10pt } 스타일시트 이해하기 이 예제는 CSS 의 개념을 설명합니다. 다음 예제로 이어집니다.

8 ■ 속성 누적하기 8 h3 {color:red; font-style:italic; } p {font-size:10pt} strong { color:red; font-style:italic; } 스타일시트 이해하기 이 예제는 CSS 의 개념을 설명합니다. 다음 예제로 이어집니다.

9 5.2.1 HTML 문서에서 스타일시트 선언 방법 5.2.2 CSS 선택자의 종류 5.2 CSS 기본 사용법 9

10 스타일시트 선언 방법 (3 가지 ) ■ 내부 스타일시트 선언 ( 앞에서 한 예제 Page 7) HTML 문서의 에서 태그를 이용하여 선언 주석은 /* 와 */ 사이에 기입 /*CSS 스타일 선언 */ 10 h3 {color:red} /* h3 의 색상을 빨간색으로 */ p {font-size:10pt} /* p 의 글자를 한 크기 작게 */ 스타일시트 이해하기 이 예제는 CSS 의 개념을 설명합니다.

11 ■ 외부 스타일시트 연결 ( 설계와 구현을 별개로, 큰 사이즈 ) HTML 문서의 에서 태그를 이용하여 연결 11 스타일시트 이해하기 이 예제는 CSS 의 개념을 설명합니다. /* 외부 스타일시트 */ h3 { color:red} p { font-size:10pt }

12 ■ 인라인 스타일시트 삽입 ( 간단한 CSS 사용 시 ) 모든 요소에서 사용할 수 있는 style 속성을 이용 해당 태그에만 특정한 스타일을 적용하고 싶을 때 사용 12 h3 {color:red; font-style:italic; } p {font-size:10pt} 스타일시트 이해하기 이 예제는 CSS 의 개념을 설명합니다. 다음 예제로 이어집니다.

13 ★ CSS 선택자의 종류 (3 가지 ) ■ 태그 선택자 엘리먼트의 태그를 나열 다중 태그는 컴마 (,) 로 구분 ( 여러 태그에 적용할 때 ) 다중 속성의 경우는 세미콜론 (;) 으로 구분 예 ) h3, strong { color: red; font-style: italic } 다중 속성값은 컴마로 나열 : 순서대로 가능한 속성값을 적용 예 ) p { font: Palatino, Garamond, "Times New Roman", serif; font-size: small } - 첫번 째부터 순서대로 없을 시 후 순위 입력한 것이 적용이 됨 13

14 ★이건 꼭 기억을 했으면 좋겠다. ■ 클래스 선택자 같은 태그에 다른 스타일을 적용, 혹은 여러 태그에 특정 스타일을 공통으로 적용하고자 할 때  해당 태그에 같은 이름의 클래스를 설정 : class 속성 이용  … 클래스 선택자는 클래스이름 앞에 점 (.) 을 삽입  “. 클래스이름 ” 의 형태 : 해당 클래스에 모두 적용  “ 선택자. 클래스이름 ” 의 형태 : 특정 태그에서 해당 클래스만 지정 예,.red1 {color: red; font-style: italic; } (red1 클래스에 모두 적용 ) strong.red1 {font-size: 12pt } (strong 중 red1 클래스를 가지는 것에 적용 ) 14

15 ★이건 꼭 기억을 했으면 좋겠다. ■ 아이디 선택자 아이디는 html 문서 내에서 한 군데에서만 지정 가능 … 해당 아이디로 설정된 태그에만 특정 스타일을 적용  아이디 선택자는 아이디이름 앞에 샵 (#) 을 붙인다  예, #next { color:blue; text-align:center} 15

16 클래스 선택자 및 아이디 선택자 16 p {font-size: 10pt}.red1 {color: red; font-style: italic; } /* red1 클래스는 빨간색 이탤릭으로 */ strong.red1 {font-size: 12pt } /* strong 요소중 red1 클래스는 12pt 크기 */ #next { color: blue; text-align: center} /* next 아이디는 파란색 가운데 정렬 */ 스타일시트 이해하기 이 예제는 CSS 의 개념을 설명합니다. 클래스 와 ID 로 스타일을 지정합니다. 다음 예제로 이어집니다.

17 뭔 말이여 ?? ■ 가상클래스 (pseudo class) 선택자 요소 이름 다음 콜론 (:) 뒤에 예약어  요소를 선택할 수 있는 특별한 상태를 표현  예, a:link 는 링크를 의미, 방문한 링크는 a:visited 로 표현  예, :before 와 :after 는 content 속성으로 원하는 콘텐츠 추가 ■ 대표적인 가상클래스 선택자 하이퍼링크 관련 :link :visited 마우스 관련 :active :hover:focus 콘텐츠 삽입 :before :after 문자 블록 관련 :first-letter :first-line (잘안씀) 17

18 가상클래스 선택자 18 p {font-size:10pt} a:link { color: blue; } /* a 태그의 하이퍼링크 */ a:visited { color: green; } /* 방문한적 있으면 a 태그의 링크 */ p:last-child { color: blue; text-align:center; } /* 마지막 p 요소 */ p:first-letter { font-size: 12pt; background-color:silver } /* p 요소의 첫글자 */ h3:before { content: " ◆ "; color: blue } /* h3 요소의 앞에 파란색 ◆문자 삽입 */ h3:after { content: " ( ⓒ sblim)"; font-size:10pt } /* h3 요소의 뒤에 콘텐츠 삽입 */ 스타일시트 이해하기 이 예제는 CSS 의 개념을 설명합니다. 선택자에 가상클래스 와 선택자 조합 을 적용하여 스타일을 지정합니다.

19 ■ 선택자 조합 보다 구체적인 요소의 선택이 가능  예, 특정 요소에 포함되어있는 하위 요소 선택, 뒤에 이어서 나오는 형제 요소 선택 대표적인 선택자 조합 A E ( 후손 요소 ) A > E ( 자식 요소 ) B + E ( 형제 요소 ) 19

20 선택자 조합 20 p { font-size: 10pt } h3:after { content: " (©sblim)"; font-size: 10pt } /* h3 요소의 뒤에 콘텐츠 삽입 */ h3 strong { font-style: italic } /* h3 에 속하는 strong 요소 */ p strong { color: red } /* p 에 속하는 strong 요소 */ p > strong { color: blue } /* p 요소 바로 아래에 속하는 strong 요소 */ h3 + p { font-style: italic } /* h3 요소 바로 다음에 있는 p 요소 */ 스타일시트 이해하기 이 예제는 CSS 의 개념 을 설명합니다. 가상클래스 와 선택자조합 으로 스타일을 지정합니다. 다음 CSS 속성 예제로 이어집니다.

21 5.3.1 폰트 (Font) 의 지정 5.3.2 문자 (Text) 의 조정 5.3.3 색상 (Color) 및 배경 (Background) 의 지정 5.3 문자와 색상 지정하기 21

22 폰트 (Font) 의 지정 ■ 스타일 관련 태그의 사용 HTML5 에서는 내용과 스타일을 분리 ,,, 등 출력스타일 지정 태그의 사용을 비권장  본문에서는 구조나 의미 위주의 태그 사용, 출력 스타일은 CSS 사용 CSS 속성을 이용  선택된 요소에 대해 글꼴 지정, 글자 크기, 폰트 굵기, 기울임 등 다양 한 모양의 출력스타일을 지정 예, p {font-family: " 맑은고딕 ", “ 돋움 ”, san-serif; font-size: 10pt; } - 3 개의 글꼴 중 앞 순서부터 있는 걸 적용 strong { font-weight: bold; font-style: italic; } - 굵기 ; 스타일 ( 기울기, 언더라인 등등 ) 22

23 ■ 폰트관련 CSS 속성 font-family : 글꼴 지정 font-size : 글자크기 font-weight : 글자굵기 font-style : 기울임 모양 font-variant : 영문 소문자의 표시방법 23

24 폰트 지정 예제 24 h3 { font-family:" 맑은고딕 " " 돋움 " san-serif; color: red } h3:after { content: " (©sblim)"; font-size: 10pt } p { font-family:"Times New Roman" " 돋움 " serif; line-height: 10pt} #x-small { font-size:x-small } /* 중간 생략 */ #v-normal { font-variant: v-normal } #small-caps { font-variant: small-caps } CSS 폰트 속성 font-size : x-small, small, medium, 12pt, font-variant : CSS normal, CSS small- caps,

25 문자 (Text) 의 조정 ■ 문자 관련 CSS 속성 ( 외우기 겁나 힘듬 ) 단락 줄맞추기, 문자 / 줄 간격, 들여쓰기, 밑줄 등 다양한 문자 장식  text-align : 문장의 정렬  letter-spacing : 문자 간격  word-spacing : 단어 간격  vertical-align : 세로방향의 정렬,  line-height : 줄간격  text-indent : 들여쓰기 / 내어쓰기 지정 text-decoration : 장식 효과 [밑줄, 윗줄, 가운데줄, 깜빡임] text-transform : 영어 대소문자의 변경 text-shadow : 문자에 그림자를 추가 25 [ 노트 : 길이값의 단위 ] cm, mm, in 미터법 / 인치의 단위, 1 pc( 파이카 ) = 12 pt( 포인트 ), 1 pt = 1/72 인치 em 과 ex 는 영문자 대문자 M 과 소문자 x 의 글자높이 ( 한 글자 / 소문자 높이 ) px( 픽셀 ) 는 출력화면에서 점의 갯수, % 는 해당 공간에서의 비율

26 문자 조정 예제 26 h3 {font-family:" 맑은고딕 " san-serif; color:red; text-shadow:3px 3px 4px grey } h3:after { content: " (©sblim)"; font-size:10pt; text-shadow: 1px 1px 12px green } p { font-family:"Times New Roman" " 돋움 " serif; line-height: 10pt } #first { text-align:left; letter-spacing: 2pt; word-spacing: 8pt } #second { text-align:left; text-indent:2em; letter-spacing:-2pt; word-spacing:2pt} #third { text-align:right; } #fourth { text-align:center; } /* 중간 생략 */ #cap { text-transform: capitalize } #upper { text-transform: uppercase } 전체 대문자 #lower { text-transform: lowercase } 전체 소문자 CSS 문자관련 속성 왼쪽정렬, 문자간격 3pt, 단어간격 8pt 왼쪽정렬, 들여쓰기 2 글자, 문자간격 -2pt, 단어간격 2pt 오른쪽정렬, text-decoration : underline, overline, line-through 가운데정렬, text-transform : capitalize, uppercase, Lowercase

27 27

28 색상 (Color) 및 배경 (Background) ■ 색상의 표현 : RGB 혹은 RGBA 모델 화면의 각 점 ( 픽셀 ) 은 3 바이트 혹은 4 바이트의 메모리에 표현 각각 1 바이트씩 RGB(Red, Green, Blue) 색상값 : 0~255 까지 표현 RGBA 모델의 경우 4 번째 바이트는 투명색 표현 등 특수용도 사용 ■ 색상 값의 표현 RGB 색상 값을 각각 16 진수, 10 진수, 혹은 비율 (%) 로 표현  16 진수 표현 : #RRGGBB 예 ) #ff0000, #080800  10 진수 표현 함수 : rgb(R, G, B) 예 ) rgb(255, 0, 0), rgb(128, 128, 0)  백분율 표현 함수 : rgb(R%, B%, G%) 예 ) rgb(100%, 0%, 0%), rgb(50%, 50%, 0%)  키워드 표현 : [ 표 5-4] 참조예 ) red, olive 투명색은 transparent 라는 키워드로 표현 28

29 ■ 배경 관련 속성 각 요소의 영역에 배경색이나 이미지를 배경으로 지정 관련 속성  background-color: 배경색 지정  background-image : 배경 이미지 파일 지정, url( 파일경로 )  background-repeat : 배경 이미지의 반복사용 ( 양쪽, x 방향 /y 방향 반복 ) ( 바탕화면 바둑판 식 배열과 비슷 )  background-attachment : 스크롤과 함께 이동 여부  background-position : 배경의 시작 위치  background : 배경 속성을 한번에 모두 지정 (shorthand) 29

30 배경 지정 예제 30 h3 { color: red; background-color: #90ff90 } h3:after { content: " (©sblim)"; font-size:10pt; background-color: yellow } #first { background-image: url(flower.jpg); background-repeat:repeat-x; } #second { background-image: url(flower.jpg); } #third { background-image: url(flower.jpg); background-repeat:no-repeat; background-position: center bottom } CSS 배경관련 속성 배경 이미지 url( 파일경로 )... 생략... 배경 이미지 background-repeat : >... 생략...

31 5.4.1 영역설정을 위한 박스모델 5.4.2 박스모델 유형의 지정 31 5.4 박스모델 설정하기

32 영역설정을 위한 박스모델 ■ 배경 영역,, ( 블럭요소 ) 와 같은 요소는 해당하는 줄만큼 배경 이나 과 같은 요소는 해당하는 글자들만 배경 이나 와 같은 요소는 자신의 영역이 미리 결정 32 p {font-size: 10pt} h3 { color: red; background-color: #90ff90 } h3:after { content: " ( ⓒ sblim)"; font-size:10pt; background-color: yellow } strong,.red1 { background-color: silver } #next { text-align: center; background-color: #B0ffff } 스타일시트 이해하기 이 예제는 박스모델 의 개념을 설명합니다. 클래스 와 ID 로 스타일을 지정합니다. 다음 예제로 이어집니다.

33 ■ 박스공간의 구성 HTML 의 모든 요소들은 네모 박스 모양의 공간을 차지 이러한 요소가 차지하는 공간의 개념이 박스모델 (box model) 요소가 차지하는 공간 이외에 내부여백 (padding), 테두리 (border), 외부공백 (margin) 지정 33 [ 그림 5-2] 박스공간의 구성

34 ■ 박스공간을 위한 속성 외부공백 : margin, margin-top, margin-right, margin-left, margin-bottom 내부여백 : padding, padding-top, padding-right, padding-left, padding-bottom 테두리 / 경계선의 두께 : border-width, border-top-width, border-bottom-width, border-left-width, border-right-width 테두리의 모양 : border-style ( 실선, 점선, 이중선 등 ) 테두리의 색상 : border-color 테두리 지정 줄여쓰기 (shorthand) : border: 34

35 박스모델 확인 예제 35 p {font-size: 10pt; line-height: 24pt} h3 { color: red; background-color:#90ff90; margin-left: 60px; margin-right: 60px } h3:after { content: " ( ⓒ sblim)"; font-size:10pt;} p { background-color: #ffff80; padding: 10px; border: medium dotted red } #next { line-height: 2pt; margin-left:30%; padding:8px; border: 4px double blue } strong,.red1 { background-color: silver; margin: 10px; padding: 6px; border: 1px solid black } 스타일시트 이해하기 이 예제는 박스모델 의 개념을 설명합니다. 클래스 와 ID 로 스타일을 지정합니다. 다음 예제로 이어집니다.

36 박스모델 유형의 지정 ■ 박스모델의 유형 블록 (block) 유형, 인라인 (inline) 유형, 표 (table) 유형, 목록 (list-item) 유형, 모양이 없는 (none) 유형 ■ display 속성 값 block : 글줄 ( 문단 ) 단위의 박스 모델로 지정 inline : 글줄 내의 글자 단위의 박스 모델로 지정 table : 표 단위로 박스 모델을 지정 list-item : 목록의 열거 항목 단위로 박스 모델을 지정 ( 목록 관련 태그 ) none : 공간을 차지하지 않는다. 36

37 display 속성 변경 예제 37 head> /* 생략 */ p { display: inline; background-color: #ffff80; padding: 10px; border: thin dotted red } #next { display: inline; line-height: 12pt; margin-left: 30%; padding: 8px; border: 4px inset green } strong { display: none; background-color: silver; margin: 10px; padding: 6px; border: 1px solid black }.red1 { display: block; background-color: silver; padding: 6px; border: 1px solid black } 스타일시트 이해하기 이 예제는 박스모델 의 개념을 설명합니다. 클래스 와 ID 로 스타일을 지정합니다. 다음 예제로 이어집니다.