CHAPTER 4. CSS 스타일시트기초
CSS 의개념 문서의구조 -> HTML 문서의스타일 ->?
CSS 의역할 만약 CSS 가없다면
CSS CSS(Cascading Style Sheets): 문서의스타일을지정한다.
CSS 의장점 거대하고복잡한사이트를관리할때에필요 모든페이지들이동일한 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)
타입선택자 타입선택자 (type selector) : HTML 요소이름을사용 h1 { color: green; } 모든 h1 요소를선택한다.
전체선택자 전체선택자 (universal selector): 페이지안의모든요소를선택 * { color: green; } 전체요소를선택한다.
아이디선택자 아이디선택자 (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>
클래스선택자 클래스선택자 (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>, i slept <h3> like a 요소를 top 선택한다.
예제 <!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>
자손, 자식, 형제결합자 선택자 설명 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 { text-decoration: none; color: green; background-color: silver; } a:hover { text-decoration: none; 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> <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> <p> 아메리카노, 카페라떼, 카푸치노, 카페모카,... </p> </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%); body { background-color: rgb(153, 102, 25); }
예제 <!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, xxlarge
폰트크기예제 <!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> h1 { 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