HTML5 웹 프로그래밍 입문 (개정판) 4장. CSS3 스타일시트 기초
목차 4.1 CSS3 시작하기 4.2 CSS 기본 사용법 4.3 문자와 색상 지정하기 4.4 목록과 표 장식하기 소스코드 실행 사이트 주소 : http://webclass.me/html5_2e 폴더 ch02/ ~ ch13/에 각 장의 예제가 있어서 실행결과 확인 및 소스보기가 가능합니다. CSS3 스타일시트 기초
4.1 CSS3 시작하기 4.1.1 스타일시트와 CSS3 기본 개념 4.1.2 CSS 속성선언
스타일시트와 CSS3 기본 개념 스타일시트란? 웹 문서의 출력될 외형 스타일 콘텐츠의 내용과 디자인의 분리가 가능 HTML 태그로는 세세한 부분까지 모두 다 지정하기에는 부족 스타일시트를 이용하면 크기, 색상 등의 스타일을 일괄 적용 글자간격, 문단간격, 위치 등 자세한 부분까지 제어 콘텐츠의 내용과 디자인의 분리가 가능 웹문서에서 마크업 요소는 보다 내용의 구조에 치중 디자인 요소는 별도로 작성 CSS3 스타일시트 기초
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은 당연히 지원 CSS3 스타일시트 기초
CSS 속성선언 CSS 기본 문법 CSS 스타일시트 구성요소 특정 엘리먼트 혹은 그 일부분에 대해 CSS 속성(Property) 설정 CSS 스타일시트 구성요소 선택자(Selector) 스타일을 설정할 대상이 되는 태그 여러 개의 경우 콤마(,)로 구분 속성 선언(Property Declaration) 속성(Property)과 속성값(value) 콜론(:)으로 구분, 세미콜론(;)으로 종료 선택자(Selector) 속성선언(Declaration) 선택자 { 속성:값; 속성:값; . . . } 예, h3 {color:red; font-style:italic; } CSS3 스타일시트 기초
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> CSS3 스타일시트 기초
속성 누적하기 <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> CSS3 스타일시트 기초
문서 일부분에 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> CSS3 스타일시트 기초
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> CSS3 스타일시트 기초
4.2 CSS 기본 사용법 4.2.1 HTML 문서에서 스타일시트 선언 방법 4.2.2 CSS 선택자의 종류
스타일시트 선언 방법 내부 스타일시트 선언 <head>의 <style> 태그에서 선언 주석은 /* 와 */ 사이에 기입 <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> CSS3 스타일시트 기초
외부 스타일시트 연결 <head>에서 <link> 태그를 이용하여 연결 “extern.css” <link rel=”stylesheet” type=”text/css” href=”CSS 파일 이름” /> </head> “extern.css” “css_external.html” /* 외부 스타일시트 */ 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> CSS3 스타일시트 기초
인라인 스타일시트 삽입 모든 요소에서 사용할 수 있는 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> CSS3 스타일시트 기초
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 요소 */ CSS3 스타일시트 기초
클래스 선택자 아이디 선택자 여러 태그에 특정 스타일을 공통으로 적용하고자 할 때 클래스 선택자는 클래스이름 앞에 점(.) class 속성 이용 : <태그이름 class=”클래스이름”> … </태그> 클래스 선택자는 클래스이름 앞에 점(.) “.클래스이름” : 해당 클래스에 모두 적용 .red1 {color: red; font-style: italic; } “선택자.클래스이름” : 특정 태그에서 해당 클래스만 지정 strong.red1 {font-size: 12pt } 아이디 선택자 아이디는 html 문서 내에서 한 군데에서만 지정 가능 <태그이름 id=”아이디이름”> … </태그> 해당 아이디로 설정된 태그에만 특정 스타일을 적용 아이디 선택자는 아이디이름 앞에 샵(#)을 붙인다 #next { color:blue; text-align:center} CSS3 스타일시트 기초
클래스 선택자 및 아이디 선택자 <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> CSS3 스타일시트 기초
가상클래스(pseudo class) 선택자 요소 이름 다음 콜론(:) 뒤에 예약어 요소를 선택할 수 있는 특별한 상태를 표현 예, a:link는 링크를 의미, 방문한 링크는 a:visited로 표현 예, :before 와 :after 는 content 속성으로 원하는 콘텐츠 추가 대표적인 가상클래스 선택자 하이퍼링크 관련 :link :visited 마우스 관련 :active :hover :focus 콘텐츠 삽입 :before :after CSS3 스타일시트 기초
가상클래스 선택자 <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: " (ⓒsblim)"; 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> CSS3 스타일시트 기초
4.3 문자와 색상 지정하기 4.3.1 폰트의 지정 4.3.2 문자의 조정 4.3.3 색상 및 배경의 지정 CSS3 스타일시트 기초
폰트(Font)의 지정 스타일 관련 태그의 사용 폰트관련 CSS 속성 HTML5에서는 내용과 스타일을 분리 CSS 속성을 이용 <font>, <b>, <i>, <u> 등 출력스타일 지정 태그의 사용을 비권장 본문에서는 구조나 의미 위주의 태그 사용, 출력 스타일은 CSS 사용 CSS 속성을 이용 선택된 요소에 대해 글꼴 지정, 글자 크기, 폰트 굵기, 기울임 등 지정 예, p {font-family: "맑은고딕", “돋움”, san-serif; font-size: 10pt; } strong { font-weight: bold; font-style: italic; } 폰트관련 CSS 속성 font-family, font-size (길이값: pt, px, %), font-weight, font-style font-variant : {normal, small-caps} CSS3 스타일시트 기초
폰트 지정 예제 <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 small-caps , </span> </body> CSS3 스타일시트 기초
문자(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(픽셀) <백분율> : % CSS3 스타일시트 기초
문자 조정 예제 <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> CSS3 스타일시트 기초
색상(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%), 키워드 표현: 투명색은 transparent라는 키워드로 표현 색상 이름 : [표 4-4] 참조 예) red, lime, blue, yellow, aqua, fuchsia, … CSS3 스타일시트 기초
배경 관련 속성 각 요소의 영역에 배경색이나 이미지를 배경으로 지정 관련 속성 background-color background-image : url(파일경로) background-repeat background-attachment : scroll, fixed background-position background (shorthand) CSS3 스타일시트 기초
배경 지정 예제 <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> CSS3 스타일시트 기초
4.4 목록과 표 장식하기 4.4.1 목록의 스타일 설정 4.4.2 표의 스타일 설정 CSS3 스타일시트 기초
목록의 스타일 설정 목록의 글머리 기호 설정: 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 (기본값) CSS3 스타일시트 기초
목록에 스타일 설정하기 <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> <li class="kor">임순범, 박희민 공저, HTML5 웹프로그래밍 입문</li> <li class="kor">최윤철, 임순범 공저, 소셜미디어 시대의 인터넷활용</li> <li class="renew">B. McLaughlin, What Is HTML5? (신규) </li> </ol> </body> CSS3 스타일시트 기초
목록의 글머리 위치 지정하기 <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> CSS3 스타일시트 기초
표의 스타일 설정 표 또는 셀의 폭 지정 방법 : width, table-layout 셀의 테두리(border) 모양 지정 table-layout 속성: auto (기본값), fixed 셀의 테두리(border) 모양 지정 border-spacing 속성 : 셀들간의 간격 (테두리 굵기) border-collapse 속성 (셀의 테두리 분리) : collapse, separate (기본값) empty-cells 속성 (빈 셀의 테두리) : show (기본값), hide 캡션의 위치 지정 : caption-side 속성 top(기본값), bottom CSS3 스타일시트 기초
표의 레이아웃 방식 <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> <td>월터아이작슨</td> <td>스티브잡스</td> <td>민음사</td> <td>최윤철, 임순범</td> <td>멀티미디어 배움터</td> <td>생능출판사</td> ... 생략 ... table-layout: auto; 인 경우 CSS3 스타일시트 기초 table-layout: fixed; 인 경우
표의 테두리 및 캡션 모양 지정하기 #books { border-collapse: collapse; } 인 경우 #books { border-spacing: 8px; } 인 경우 #books { empty-cells: hide; caption-side: bottom; margin: 1em } 인 경우 CSS3 스타일시트 기초