PowerPoint 프레젠테이션

Size: px

Start display at page:

Download "PowerPoint 프레젠테이션"

윤배 우
6 years ago
Views:

1 HTML5 웹프로그래밍입문 4 장. CSS3 스타일시트기초 1

2 목차 4.1 CSS3 시작하기 4.2 CSS 기본사용법 4.3 문자와색상지정하기 4.4 목록과표장식하기 2

3 4.1 CSS3 시작하기 스타일시트와 CSS3 기본개념 CSS 속성선언 문서일부분에 CSS 속성설정 3

4 스타일시트와 CSS3 기본개념 스타일시트란? 웹문서의출력될외형스타일 HTML 태그로는세세한부분까지모두다지정하기에는부족 스타일시트를이용하면크기, 색상등의스타일을일괄적용 - 글자간격, 문단간격, 위치등자세한부분까지제어 콘텐츠의내용과디자인의분리가가능 웹문서에서마크업요소는보다내용의구조에치중 디자인요소는별도로작성 4

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

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

7 CSS 시작예제 스타일지정이없는문서 <html> <body> <h3> 스타일시트이해하기 </h3> <p> 이예제는 <strong>css</strong> 의개념을설명합니다. </p> <p> 다음예제로이어집니다.</p> </body> </html> 폰트및색상지정 <html> <head> <style type="text/css"> h3 { font-style:italic } p { font-size:10pt } </style> </head> <body> <h3> 스타일시트이해하기 </h3> <p> 이예제는 <strong>css</strong> 의개념을설명합니다.</p> <p> 다음예제로이어집니다.</p> </body> </html> 7

8 속성누적하기 <html> <head> <style type="text/css"> h3 { font-style:italic; } p { font-size:10pt; font-weight:bold } strong { font-style:italic; text-decoration:underline } </style> </head> <body> <h3> 스타일시트이해하기 </h3> <p> 이예제는 <strong>css</strong> 의개념을설명합니다.</p> <p> 다음예제로이어집니다.</p> </body> </html> 8

9 문서일부분에 CSS 속성설정 <div> 요소및 <span> 요소 문서의일부분혹은문장의일부분을구분해서그룹핑 블록단위요소 (block-level element) : <div> 인라인요소 (inline element) : <span> HTML 요소의공통속성인 style 속성이용특정스타일지정이가능 < 태그이름 style= CSS 속성 : 값 > </ 태그이름 > <html> <body> <div style="font-style:italic;"> <h3> 스타일시트이해하기 </h3> <p> 이예제는 <span style="font-weight:bold; text-decoration:underline">css</span> 의개념을설명합니다.</p> </div> <p> 다음예제로이어집니다.</p> </body> </html> 9

10 id 속성및 class 속성이용 # 아이디이름. 클래스이름 <html> <head> <style type="text/css"> #intro {font-style:italic; }.term { font-weight:bold; text-decoration:underline } </style> </head> <body> <div id="intro"> <h3> 스타일시트이해하기 </h3> <p> 이예제는 <span class="term">css</span> 의개념을설명합니다.</p> </div> <p> 다음예제로이어집니다.</p> </body> </html> 10

11 4.2 CSS 기본사용법 HTML 문서에서스타일시트선언방법 CSS 선택자의종류 11

12 스타일시트선언방법 내부스타일시트선언 <head> 의 <style> 태그에서선언 주석은 /* 와 */ 사이에기입 <html> <head> <style type="text/css"> h3 {font-style:italic} /* h3 폰트를이탤릭으로 */ p {font-size:10pt} /* p 의글자를한크기작게 */ </style> </head> <body> <h3> 스타일시트이해하기 </h3> <p> 이예제는 <strong>css</strong> 의개념을설명합니다.</p> </body> </html> 12

13 외부스타일시트연결 <head> 에서 <link> 태그를이용하여연결 <head> <link rel= stylesheet type= text/css href= CSS 파일이름 /> </head> /* 외부스타일시트 */ h3 {font-style:italic} p { font-size:10pt } <html> <head> <link rel="stylesheet" type="text/css" href="extern.css"/> </head> <body> <h3> 스타일시트이해하기 </h3> <p> 이예제는 <strong>css</strong> 의개념을설명합니다.</p> </body> </html> 13

인라인스타일시트삽입 모든요소에서사용할수있는 style 속성을이용 해당태그에만특정한스타일을적용하고싶을때사용 < 태그 style= CSS 속성선언 > <html> <head> <style type="text/css"> h3 { font-style:italic; } p {font-size:10pt}

14 인라인스타일시트삽입 모든요소에서사용할수있는 style 속성을이용 해당태그에만특정한스타일을적용하고싶을때사용 < 태그 style= CSS 속성선언 > <html> <head> <style type="text/css"> h3 { font-style:italic; } p {font-size:10pt} </style> </head> <body> <h3> 스타일시트이해하기 </h3> <p> 이예제는 <strong style="font-style:italic; color:red;"> CSS </strong> 의개념을설명합니다.</p> <p> 다음예제로이어집니다.</p> </body> </html> 14

15 CSS 선택자의종류 태그선택자 엘리먼트의태그를나열 다중태그는컴마 (,) 로구분, 다중속성은세미콜론 (;) 으로구분 예 ) h3, strong { color: red; font-style: italic } 다중속성값은컴마로나열 : 순서대로가능한속성값을적용 예 ) p { font: Palatino, Garamond, "Times New Roman", serif; font-size: small } 선택자조합 보다구체적인요소의선택이가능예 ) h3 strong { font-style: italic } /* h3에속하는 strong 요소 */ p strong { color: red } /* p에속하는 strong 요소 */ 15

16 클래스선택자 여러태그에특정스타일을공통으로적용하고자할때 class 속성이용 : < 태그이름 class= 클래스이름 > </ 태그 > 클래스선택자는클래스이름앞에점 (.). 클래스이름 : 해당클래스에모두적용.red1 {color: red; font-style: italic; } 선택자. 클래스이름 : 특정태그에서해당클래스만지정 아이디선택자 strong.red1 {font-size: 12pt } 아이디는 html 문서내에서한군데에서만지정가능 < 태그이름 id= 아이디이름 > </ 태그 > 해당아이디로설정된태그에만특정스타일을적용 아이디선택자는아이디이름앞에샵 (#) 을붙인다 #next { color:blue; text-align:center} 16

17 클래스선택자및아이디선택자 <head> <style type="text/css"> 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 아이디는파란색가운데정렬 */ </style> </head> <body> <h3 class="red1"> 스타일시트이해하기 </h3> <p> 이예제는 <strong class="red1">css</strong> 의개념을설명합니다. <br><span class="red1"> 클래스 </span> 와 ID 로스타일을지정합니다.</p> <p id="next"> 다음예제로이어집니다.</p> </body> 17

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

19 가상클래스선택자 <head> <style type="text/css"> p {font-size:10pt} a:link { color: blue; } /* a 태그의하이퍼링크 */ a:visited { color: green; } /* 방문한 a 태그의링크 */ h3:before { content: " "; color: blue } /* h3 요소의앞에파란색 문자삽입 */ h3:after { content: " (csblim)"; font-size:10pt } /* h3 요소의뒤에콘텐츠삽입 */ </style> </head> <body> <h3><strong> 스타일시트 </strong> 이해하기 </h3> <p> 이예제는 <strong>css</strong> 의개념을설명합니다.</p> <p> 선택자에 <a href=" 가상클래스 </a> 와 <a href=" 선택자조합 </a> 을적용하여스타일을지정합니다.</p> </body> 19

20 4.3 문자와색상지정하기 폰트의지정 문자의조정 색상및배경의지정 20

21 폰트 (Font) 의지정 스타일관련태그의사용 HTML5 에서는내용과스타일을분리 <font>, <b>, <i>, <u> 등출력스타일지정태그의사용을비권장 본문에서는구조나의미위주의태그사용, 출력스타일은 CSS 사용 CSS 속성을이용 선택된요소에대해글꼴지정, 글자크기, 폰트굵기, 기울임등지정 예, 폰트관련 CSS 속성 p {font-family: " 맑은고딕 ", 돋움, san-serif; font-size: 10pt; } strong { font-weight: bold; font-style: italic; } font-family, font-size ( 길이값 : pt, px, %), font-weight, font-style, font-variant : {normal, small-caps} 21

폰트지정예제 <head> <style type="text/css"> h3 { font-family:" 맑은고딕 " " 돋움 " san-serif; color: red } h3:after { content: " ( sblim)"; font-size: 10pt } p { font-family:"times New Roman" " 돋움 " serif;

22 폰트지정예제 <head> <style type="text/css"> 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 } </style> </head> <body> <h3>css 폰트속성 </h3> <p>font-size : <span id="x-small">x-small</span>, <span id="small">small</span>, <span id="medium"> medium </span>, <span id="pt12"> 12pt </span>,  <p>font-variant : <span id="v-normal"> CSS normal, </span> <span id="small-caps"> CSS smallcaps, </span> </body> 22

23 문자 (Text) 의조정 문자관련 CSS 속성 단락줄맞추기, 문자 / 줄간격, 들여쓰기, 밑줄등다양한문자장식 text-align letter-spacing word-spacing vertical-align line-height text-indent text-decoration : { none, underline, overline, line-through, blink} text-transform : { capitalize, uppercase, lowercase } text-shadow < 길이값 > : cm, mm, in, pc( 파이카 ), pt( 포인트 ), em, ex, px( 픽셀 ) < 백분율 > : % 23

문자조정예제 <head> <style type="text/css"> 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 }

24 문자조정예제 <head> <style type="text/css"> 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 } </style> </head> <body> <h3><strong>css</strong> 문자관련속성 </h3> <p id="first"> 왼쪽정렬, 문자간격 3pt, 단어간격 8pt </p> <p id="second"> 왼쪽정렬, 들여쓰기 2 글자, 문자간격 -2pt, 단어간격 2pt </p> <p id="third"> 오른쪽정렬, text-decoration : <span id="under"> underline </span>, <span id="over"> overline </span>, <span id="thru"> line-through </span> </p> <p id="fourth"> 가운데정렬, text-transform : <span id="cap"> capitalize </span>, <span id="upper"> uppercase </span>, <span id="lower"> Lowercase </span></p> </body> 24

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

26 배경관련속성 각요소의영역에배경색이나이미지를배경으로지정 관련속성 background-color background-image : url( 파일경로 ) background-repeat background-attachment : scroll, fixed background-position background (shorthand) 26

배경지정예제 <head> <style type="text/css"> h3 { color: red; background-color: #90ff90 } h3:after { content: " ( sblim)"; font-size:10pt; background-color: yellow } #first { background-image: url(flower.

27 배경지정예제 <head> <style type="text/css"> 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 } </style> </head> <body> <h3> CSS 배경관련속성 </h3> <table border="1"> <tr> <td id="first"> 배경이미지 <br> url( 파일경로 ) <br><br>... 생략... </td> <td id="second"> 배경이미지 <br> url( 파일경로 ) <br><br>... 생략... </td> <td id="third"> 배경이미지 <br><br> background-repeat : <br>>... 생략... </td> </tr> </table> </body> 27

28 4.4 목록과표장식하기 목록의스타일설정 표의스타일설정 28

29 목록의스타일설정 목록의글머리기호설정 : list-style-type 속성 순서없는목록 (unordered list) disc, circle, square 순서있는목록 (ordered list) decimal (1,2,3, ), lower-roman (ⅰ, ⅱ, ), upper-roman (Ⅰ, Ⅱ, ), lower-alpha (a, b, c, ), upper- alpha (A, B, C, ) 목록의글머리기호에이미지사용 list-style-image : url( 이미지파일주소 ) 글머리기호위치지정 : list-style-position 속성 Inside, outside ( 기본값 ) 29

30 목록에스타일설정하기 <head> <style type="text/css"> ol li { list-style-type: upper-alpha } li.usa { list-style-type: disc } li.kor { list-style-type: circle } li.renew { list-style-type: square } </style> </head> <body> <h3> 과목별추천도서목록 </h3> <ol> <li>it기술의이해 </</li> <ul> <li class="kor"> 최윤철, 임순범, 한탁돈공저, 컴퓨터와 IT 기술의이해 </li> <li class="usa">d. Morley, C. Parker, Understanding Computers 15th Ed.</li> <li class="usa">g. Shelly, M. Vermaat, Discovering Computers</li> </ul> <li> 웹프로그래밍 </li> <ul> <li class="kor"> 임순범, 박희민공저, HTML5 웹프로그래밍입문 </li> <li class="kor"> 최윤철, 임순범공저, 소셜미디어시대의인터넷활용 </li> <li class="renew">b. McLaughlin, What Is HTML5? ( 신규 ) </li> </ul> </ol> </body> 30

$목록의글머리위치지정하기 <style type="text/css"> ul.outside-list { list-style-position: outside } ul.inside-list { list-style-position: inside } li.usa { list-style-image: url("flag_usa.gif") } li.$

31 목록의글머리위치지정하기 <style type="text/css"> ul.outside-list { list-style-position: outside } ul.inside-list { list-style-position: inside } li.usa { list-style-image: url("flag_usa.gif") } li.kor { list-style-image: url("flag_kor.gif") } p { font-weight: bold } </style>... <h3> 과목별추천도서목록 </h3> <ul class="outside-list"> <p>it 기술의이해 </p> <li class="kor"> 최윤철, 임순범, 한탁돈공저, 컴퓨터와 IT 기술의이해 </li> <li class="usa">d. Morley, C. Parker, Understanding Computers 15th Ed.</li> <li class="usa">g. Shelly, M. Vermaat, Discovering Computers</li> </ul> <ul class="inside-list"> <p> 웹프로그래밍 </p> <li class="kor"> 임순범, 박희민공저, HTML5 웹프로그래밍입문 </li> <li class="kor"> 최윤철, 임순범공저, 소셜미디어시대의인터넷활용 </li> <li class="renew">b. McLaughlin, What Is HTML5? ( 신규 ) </li> </ul> 31

32 표의스타일설정 표또는셀의폭지정방법 : width, table-layout width 속성 : 표나각셀의가로길이 table-layout 속성 : auto ( 기본값 ), fixed 셀의테두리 (border) 모양지정 border-spacing 속성 : 셀들간의간격 ( 테두리굵기 ) border-collapse 속성 ( 셀의테두리분리 ) : collapse, separate ( 기본값 ) empty-cells 속성 ( 빈셀의테두리 ) : show ( 기본값 ), hide 캡션의위치지정 : caption-side 속성 top( 기본값 ), bottom 32

33 표의레이아웃방식 <style type="text/css"> #books { table-layout: auto; width: 90% } #books caption { font-size: 14pt; font-weight: bold; margin: 0.5em } </style>... <table border="1" id="books"> <caption> 추천도서테이블 </caption> <thead> <tr> <th> 작가 </th> <th> 책제목 </th> <th> 출판사 </th> </tr> </thead> <tbody> <tr> <td> 월터아이작슨 </td> <td> 스티브잡스 </td> <td> 민음사 </td> </tr> <tr> <td> 최윤철, 임순범 </td> <td> 멀티미디어배움터 </td> <td> 생능출판사 </td> </tr>... 생략... 33

34 표의테두리및캡션모양지정하기 #books { border-collapse: collapse; } 인경우 #books { border-spacing: 8px; } 인경우 #books { empty-cells: hide; caption-side: bottom; margin: 1em } 인경우 34

02 장. 글꼴문단지정하기 이번장에서는스타일시트속성중에서글꼴과관련한속성과문단에관련된속성을살펴보도록하자.

02 장. 글꼴문단지정하기 이번장에서는스타일시트속성중에서글꼴과관련한속성과문단에관련된속성을살펴보도록하자. 이장에서다룰내용 1 2 3 4 5 글꼴꾸밈관련스타일시트텍스트관련스타일시트배경관련스타일시트목록관련스타일시트하이퍼링크관련스타일시트 2 01. 글꼴꾸밈관련스타일시트 v 글자에관련된스타일시트는크기, 스타일, 모양등에관련된 font 속성이가장많이사용 속성값설명 color