HTML5 웹프로그래밍입문 4 장. CSS3 스타일시트기초 1
목차 4.1 CSS3 시작하기 4.2 CSS 기본사용법 4.3 문자와색상지정하기 4.4 목록과표장식하기 2
4.1 CSS3 시작하기 4.1.1 스타일시트와 CSS3 기본개념 4.1.2 CSS 속성선언 4.1.3 문서일부분에 CSS 속성설정 3
스타일시트와 CSS3 기본개념 스타일시트란? 웹문서의출력될외형스타일 HTML 태그로는세세한부분까지모두다지정하기에는부족 스타일시트를이용하면크기, 색상등의스타일을일괄적용 - 글자간격, 문단간격, 위치등자세한부분까지제어 콘텐츠의내용과디자인의분리가가능 웹문서에서마크업요소는보다내용의구조에치중 디자인요소는별도로작성 4
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
CSS 속성선언 CSS 기본문법 특정엘리먼트혹은그일부분에대해 CSS 속성 (Property) 설정 CSS 스타일시트구성요소 선택자 (Selector) 스타일을설정할대상이되는태그 여러개의경우콤마 (,) 로구분 속성선언 (Property Declaration) 속성 (Property) 과속성값 (value) 콜론 (:) 으로구분, 세미콜론 (;) 으로종료 선택자 (Selector) 속성선언 (Declaration) 선택자 { 속성 : 값 ; 속성 : 값 ;... } 예, h3 {color:red; font-style:italic; } 6
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
속성누적하기 <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
문서일부분에 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
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
4.2 CSS 기본사용법 4.2.1 HTML 문서에서스타일시트선언방법 4.2.2 CSS 선택자의종류 11
스타일시트선언방법 내부스타일시트선언 <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
외부스타일시트연결 <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} </style> </head> <body> <h3> 스타일시트이해하기 </h3> <p> 이예제는 <strong style="font-style:italic; color:red;"> CSS </strong> 의개념을설명합니다.</p> <p> 다음예제로이어집니다.</p> </body> </html> 14
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
클래스선택자 여러태그에특정스타일을공통으로적용하고자할때 class 속성이용 : < 태그이름 class= 클래스이름 > </ 태그 > 클래스선택자는클래스이름앞에점 (.). 클래스이름 : 해당클래스에모두적용.red1 {color: red; font-style: italic; } 선택자. 클래스이름 : 특정태그에서해당클래스만지정 아이디선택자 strong.red1 {font-size: 12pt } 아이디는 html 문서내에서한군데에서만지정가능 < 태그이름 id= 아이디이름 > </ 태그 > 해당아이디로설정된태그에만특정스타일을적용 아이디선택자는아이디이름앞에샵 (#) 을붙인다 #next { color:blue; text-align:center} 16
클래스선택자및아이디선택자 <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
가상클래스 (pseudo class) 선택자 요소이름다음콜론 (:) 뒤에예약어 요소를선택할수있는특별한상태를표현 예, a:link는링크를의미, 방문한링크는 a:visited로표현 예, :before 와 :after 는 content 속성으로원하는콘텐츠추가 대표적인가상클래스선택자 하이퍼링크관련 :link :visited 마우스관련 :active :hover :focus 콘텐츠삽입 :before :after 18
가상클래스선택자 <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="http://www.w3c.org"> 가상클래스 </a> 와 <a href="http://mm.sm.ac.kr"> 선택자조합 </a> 을적용하여스타일을지정합니다.</p> </body> 19
4.3 문자와색상지정하기 4.3.1 폰트의지정 4.3.2 문자의조정 4.3.3 색상및배경의지정 20
폰트 (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; 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
문자 (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 } 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
색상 (Color) 및배경 (Background) 색상의표현 : RGB 혹은 RGBA 모델 화면의각점 ( 픽셀 ) 은 3 바이트혹은 4 바이트 각각 1 바이트씩 RGB(Red, Green, Blue) 색상값 : 0~255까지표현 RGBA 모델의경우 4번째바이트는투명색표현등특수용도사용 색상값의표현 16진수표현 : #RRGGBB 예 ) #ff0000, #080800 10진수표현함수 : 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
배경관련속성 각요소의영역에배경색이나이미지를배경으로지정 관련속성 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.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
4.4 목록과표장식하기 4.4.1 목록의스타일설정 4.4.2 표의스타일설정 28
목록의스타일설정 목록의글머리기호설정 : 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
목록에스타일설정하기 <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.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
표의스타일설정 표또는셀의폭지정방법 : width, table-layout width 속성 : 표나각셀의가로길이 table-layout 속성 : auto ( 기본값 ), fixed 셀의테두리 (border) 모양지정 border-spacing 속성 : 셀들간의간격 ( 테두리굵기 ) border-collapse 속성 ( 셀의테두리분리 ) : collapse, separate ( 기본값 ) empty-cells 속성 ( 빈셀의테두리 ) : show ( 기본값 ), hide 캡션의위치지정 : caption-side 속성 top( 기본값 ), bottom 32
표의레이아웃방식 <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
표의테두리및캡션모양지정하기 #books { border-collapse: collapse; } 인경우 #books { border-spacing: 8px; } 인경우 #books { empty-cells: hide; caption-side: bottom; margin: 1em } 인경우 34