CHAPTER 4. CSS 스타일시트 기초
CSS의 개념 문서의 구조-> HTML 문서의 스타일 -> ?
CSS의 역할 만약 CSS가 없다면
CSS CSS(Cascading Style Sheets): 문서의 스타일을 지정한다.
CSS의 장점 거대하고 복잡한 사이트를 관리할 때에 필요 모든 페이지들이 동일한 CSS를 공유
CSS3의 기능 선택자(selectors) 박스 모델(Box Model) 배경 및 경계선(Backgrounds and Borders) 텍스트 효과(Text Effects) 2차원 및 3차원 변환(2D/3D Transformations) 애니메이션(Animations) 다중 컬럼 레이아웃(Multiple Column Layout) 사용자 인터페이스(User Interface)
CSS3의 문법 선택자(selector) { 속성: 값; } 끝에 반드시 ;을 적어 준다. 주석: /* … */
CSS의 위치 <!doctype html> <html> <head> <title>My Web Page</title> <style> p { background-color: yellow; } </style> </head> <body> <p>This is a paragraph.</p> </body> </html>
예제 <!DOCTYPE html> <html> <head> <title>My Web Page</title> <style> h1 { background-color: yellow; border: 2px solid red; } </style> </head> <body> <h1>This is a heading.</h1> </body> </html>
선택자 선택자(selector): HTML 요소를 선택하는 부분 선택자는 jQuery에서도 사용 가장 많이 사용되는 것은 6가지 정도 선택자에 대한 W3C의 문서는 http://www.w3.org/TR/css3-selectors/
선택자의 종류 타입 선택자(type selector) 전체 선택자(universal selector) 클래스 선택자(class selector) 아이디 선택자(ID selector) 속성 선택자(attribute selector) 의사 선택자(pseudo-class)
타입 선택자 h1 { color: green; } 타입 선택자(type selector) : HTML 요소 이름을 사용
전체 선택자 * { color: green; } 전체 선택자(universal selector): 페이지 안의 모든 요소를 선택 * { color: green; } 전체 요소를 선택한다.
아이디 선택자 #target { color: red; } 아이디 선택자(id selector): 특정한 요소를 선택 #target { color: red; } id가 target인 요소를 선택한다. <p id=“target">Hello World!</p> <p>요소의 id를 “target”로 지정한다.
예제 <!DOCTYPE html> <html> <head> <title>CSS id Example</title> <style> #special { background-color: yellow; color: red; } </style> </head> <body> <p id="special">id가 special인 단락입니다.</p> <p>정상적인 단락입니다.</p> </body> </html>
클래스 선택자 .target { color: red; } 클래스 선택자(class selector)는 클래스가 부여된 요소를 선택한다. .target { color: red; } 클래스가 target인 요소를 선택한다. <p class=“target">Hello World!</p> <p>요소의 클래스를 “target”로 지정한다.
예제 <!DOCTYPE html> <html> <head> <title>CSS class Example</title> <style> .type1 { text-align: center; } </style> </head> <body> <h1 class="type1">class가 type1인 헤딩입니다.</h1> <p class="type1">class가 type1인 단락입니다</p> </body> </html>
선택자 그룹 h1, h2, h3 { font-family: sans-serif; } 선택자를 콤마(,)로 분리하여 나열할 수 있다. h1, h2, h3 { font-family: sans-serif; } i slept like a top <h1>, <h2>, <h3>요소를 선택한다.
예제 <!DOCTYPE html> <html> <head> <title>CSS selector Example</title> <style> h1, p { font-family: sans-serif; color: red; } </style> </head> <body> <h1>This is a heading1.</h1> <p>This is a paragraph.</p> </body> </html>
자손, 자식, 형제 결합자 body em { color:red; } /* body 안의 em 요소 */ 선택자 설명 s1 s2 s1 요소에 포함된 s2 요소를 선택한다. (후손 관계) s2 > s2 s1 요소의 직계 자식 요소인 s2를 선택한다.(자식 관계) body em { color:red; } /* body 안의 em 요소 */ body > h1 { color:blue; } /* body 안의 h1 요소 */
예제 <!DOCTYPE html> <html> <head> <style> body em { color: red; } /* body 안의 em 요소 */ body > h1 { color: blue; } /* body 안의 h1 요소 */ </style> </head> <body> <h1>This headline is <em>very</em> important</h1> </body> </html>
의사 클래스 의사 클래스(pseudo-class): 클래스가 정의된 것처럼 간주 a:link { color: blue; } a:visited { color: green; } a:hover { color: red; }
예제 a:link { text-decoration: none; color: blue; background-color: white; } a:visited { color: green; background-color: silver; a:hover { color: white; background-color: blue; …
속성 선택자 속성 선택자: 특정한 속성을 가지는 요소를 선택한다. h1[title] { color: blue; } p[class=“example”] { color: blue; }
CSS 삽입 위치 외부 스타일 시트(external style sheet) 내부 스타일 시트(internal style sheet) 인라인 스타일 시트(inline)
외부 스타일 시트 외부 스타일 시트는 스타일 시트를 외부에 파일로 저장하는 것 많은 페이지에 동일한 스타일을 적용하려고 할 때 좋은 방법 <link type="text/css" rel="stylesheet" href="mystyle.css">
예제 mystyle.css h1 { color: red; } p { color:#0026ff; } <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="mystyle.css"> </head> <body> <h1>This is a headline.</h1> <p>This is a paragraph.</p> </body> </html>
내부 스타일 시트 내부 스타일 시트는 HTML 안에 CSS를 정의하는 것이다. <!DOCTYPE html> <head> <style> h1 { color: red; } p { color: #0026ff; } </style> </head> <body> <h1>This is a headline.</h1> <p>This is a paragraph.</p> </body> </html>
인라인 스타일 시트 각각의 HTML 요소마다 스타일을 지정하는 것 2개 이상의 선언이 있다면 반드시 끝에 ;을 적어 준다. <!DOCTYPE html> <html> <head> </head> <body> <h1 style="color: red">This is a headline.</h1> <p style="color: #0026ff">This is a paragraph.</p> </body> </html>
인라인 스타일 시트 각각의 HTML 요소마다 스타일을 지정하는 것 2개 이상의 선언이 있다면 반드시 끝에 ;을 적어 준다. <!DOCTYPE html> <html> <head> </head> <body> <h1 style="color: red">This is a headline.</h1> <p style="color: #0026ff">This is a paragraph.</p> </body> </html>
다중 스타일 시트 하나의 요소에 대하여 외부, 내부, 인라인 스타일이 서로 다르게 지정하고 있다면 어떤 스타일이 사용될까? 공통적으로 사용되는 스타일은 <body>요소의 스타일에 정의하는 것이 편리하다.
예제 coffee.css h1, p { font-family: serif; color: black; } h1 { border-bottom: 1px solid gray; color: red; body { background-color: yellow;
<!DOCTYPE html> <html> <head> <title>Web Programming</title> <link type="text/css" rel="stylesheet" href="coffee.css"> </head> <body> <h1>Welcome to Web Coffee!</h1> <img src="coffee.gif" width="100" height="100"> <p> 하우스 로스팅 원두의 신선한 커피를 맛보세요! <em>공인 1급 Barista</em>가 최고급 원두만을 직접 엄선하여 사용합니다. </p> <h2>메뉴</h2> 아메리카노,카페라떼,카푸치노,카페모카, ... </body> </html>
CSS의 속성들 특성 설명 color 텍스트 색상 font-weight 볼드체 설정 padding 요소의 가장자리와 내용간의 간격 font-size 폰트의 크기 backgroud-color 배경색 border 요소를 감싸는 경계선 font-style 이탤릭체 설정 backgroud-image 배경 이미지 text-align 텍스트 정렬 list-style 리스트 스타일
색상 방법 설명 이름으로 표현 “red“ 16진수로 표현 #FF0000 10진수로 표현 rgb(255, 0, 0) 퍼센트로 표현 rgb(100%, 0%, 0%)
16진수로 색상 나타내기 16진수 코드는 빨간색, 녹색, 청색 값을 각각 2자리의 16진수로 표시한 것 body { background-color: #ffd800; }
색상의 이름으로 나타내기 body { background-color: aqua; }
RGB 값으로 표시하기 body { background-color: rgb(60%, 40%, 10%); }
예제 <!DOCTYPE html> <html> <head> <style> h1 { background-color: #6495ed; } p.a { background-color: #ff0000; } p.b { background-color: #00ff00; } p.c { background-color: #0000ff; } p.d { background-color: #888888; } </style> </head> <body> <h1>CSS Color Chart</h1> <p class="a">Color #1</p> <p class="b">Color #2</p> <p class="c">Color #3</p> <p class="d">Color #4</p> </body> </html>
폰트 속성 설명 font 한줄에서 모든 폰트 속성을 설정할 때 사용 font-family 폰트 패밀리 설정 font-size 폰트의 크기 설정 font-style 폰트 스타일 설정 font-weight 폰트의 볼드체 여부 설정
폰트 지정
폰트 패밀리 serif 폰트는 우아하고 전통적인 느낌 sans-serif은 깔끔하고 가독성이 좋다. monospace는 타자기 서체 cursive와 fantasy 폰트는 장난스러우며 스타일리쉬한 느낌
웹폰트 <html> <head> <title>Web Font Test</title> <style> @font-face { font-family: "Vera Serif Bold"; src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf"); } body { font-family: "Vera Serif Bold", serif } </style> </head> <body> 이것이 모질라에서 제공하는 Vera Serif Bold입니다. </body> </html>
폰트 크기 설정 폰트의 단위 pt – 포인트 px - 픽셀 % - 퍼센트 em – 배수(scale factor) 키워드 – xx-small, x-small, small, medium, large, x-large, xx-large
폰트 크기 예제 <!DOCTYPE html> <html> <head> <style> body { font-size: medium; } p#t1 { font-size: 1.0em; } p#t2 { font-size: 1.5em; } p#t3 { font-size: 2.0em; } </style> </head> <body> <p id="t1">paragraph.</p> <p id="t2">paragraph.</p> <p id="t3">paragraph.</p> </body> </html>
폰트 속성 font-weight – 볼드체 여부(normal, bold) font-style – 이탤릭체 여부(normal, italic, oblique)
폰트 축약 기법 <!DOCTYPE html> <html> <head> <style> p.style1 { font: italic 30px arial,sans-serif; } p.style2 { font: bold 40px Georgia,serif; </style> </head> <body> <p class="style1">font: italic 30px arial,sans-serif</p> <p class="style2">font: bold 40px Georgia,serif</p> </body> </html>
텍스트 스타일 속성 설명 color 텍스트의 색상을 지정한다. direction 텍스트 작성 방향을 지정한다. (가로쓰기, 세로쓰기) letter-spacing 글자간 간격을 지정한다. line-height 텍스트 줄의 높이를 지정한다. text-align 텍스트의 수평 정렬을 지정한다. text-decoration 텍스트 장식을 지정한다. text-indent 텍스트의 들여쓰기를 지정하낟. text-shadow 그림자 효과를 지정한다. text-transform 대소문자 변환을 지정한다.
텍스트 정렬 <!DOCTYPE html> <html> <head> <style> h1 { text-align: center; color: red; } // 중앙정렬 p.date { text-align: right; color: indigo; } // 오른쪽정렬 p.poet { text-align: justify; color: blue; } // 양쪽정렬 </style> </head> <body> <h1>CSS 텍스트 정렬 예제</h1> <p class="date">2013년 9월 1일</p> <p class="poet"> 삶이 그대를 속일지라도 슬퍼하거나 노여워하지 말라 ... </p> <p><em>참고 푸시킨의 시</em> </p> </body> </html>
텍스트 장식 <!DOCTYPE html> <html> <head> <style> h1 { text-decoration:overline; } h2 { text-decoration:line-through; } h3 { text-decoration:underline; } </style> </head> <body> <h1>텍스트 장식의 예입니다.</h1> <h2>텍스트 장식의 예입니다.</h2> <h3>텍스트 장식의 예입니다.</h3> </body> </html>
텍스트 변환 <!DOCTYPE html> <html> <head> <style> p.upper { text-transform:uppercase; } p.lower { text-transform:lowercase; } p.capit { text-transform:capitalize; } </style> </head> <body> <p class="upper">text_transform is uppercase.</p> <p class="lower">text_transform is lowercase.</p> <p class="capit">text_transform is capitalize.</p> </body> </html>
텍스트 그림자 <!DOCTYPE html> <html> <head> <style> text-shadow: 5px 5px 5px #FF0000; } </style> </head> <body> <h1>Text-shadow 처리!</h1> </body> </html>
Word Wrapping <!DOCTYPE html> <html> <head> <style> p.test { width: 11em; border: 1px solid #000000; word-wrap: break-word; } </style> </head> <body> <p class="test"> 매우 긴 단어가 있는 경우에 자동으로 잘라준다. aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </p> </body> </html>
다중 컬럼 <!DOCTYPE html> <html> <head> <style> .poet { column-count: 2; } </style> </head> <body> <div class="poet"> 한 잔의 술을 마시고 우리는 버지니아 울프의 생애와 목마를 타고 떠난 숙녀의 옷자락을 이야기한다 ... 가을바람 소리는 내 쓰러진 술병 속에서 목메어 우는데 </div> </body> </html>
Q & A