CSS3 의사용
CSS? http://www.w3.org/style/css/ 웹문서에스타일 ( 예 ; 글꼴, 색상, 여백등 ) 을추가하는간단한메카니즘
CSS 사용의장점 다양한기능의확장 HTML 의단순한기능 추가및변경을통한확장이가능 통일된문서양식제공 한번의속성정의로여러문서에적용이가능 문서형식의모듈화 사용자환경과상관없는독립된문서제작가능 브라우저에상관없는문서제작지원 문서형식의다양화 CSS 를통해보다다양하고멋진 HTML 문서작성 로딩시간단축 통일된문서양식으로인해처리할데이터양이감소
CSS 적용의예 <html> <head> <title> CSS 사용하기 </title> <style type = "text/css"> h1 { font-size:30pt; color:blue; } </style> </head> <body> <h1> CSS 사용하기 </h1> </body> </html> CSS 적용전 CSS 적용후
CSS 기본구조 선택자 { 속성 : 값 ; } CSS 를사용하여꾸며줄 HTML 의요소 해당속성에지정할값 지정한선택자의어떤부분을꾸며줄것인가를지정하는부분 HTML 요소에서의속성표현 <font size="5" color="green"> font 태그의사용 </font> CSS 에서의속성표현 H1 { font-size: 30pt; color: green; } = : " " 사용하지않음속성구분빈칸 ;
CSS 적용방식 스타일이정의되는위치에따라 임베디드방식링크방식인라인방식 HTML 문서의 <head> 요소안에 <style> 요소를사용하여스타일을정의 HTML 문서와는별도로스타일만지정한 CSS 파일 (*.css) 을만들어링크시킴 HTML 문서의각요소에직접 style 속성을사용해서적용
CSS 적용방식 _ 임베디드방식 <html> <head> CSS </head> <body> </body> </html> <html> <head> CSS </head> <body> </body> </html> <html> <head> CSS </head> <body> </body> </html> <html> <head> <title> 임베디드방식 </title> <style type="text/css"> h1 { font-size:30pt; color:blue; } </style> </head> <body> <h1> CSS 사용하기 </h1> </body> </html>
링크방식 CSS <html> <head> </head> <body> </body> </html> <html> <head> </head> <body> </body> </html> <html> <head> </head> <body> </body> </html> test.css h1 { font-size : 30pt; color : blue; }
링크방식 <html> <head> <title> 링크방식 </title> <link rel="stylesheet" href="test.css" type="text/css"> </head> <body> <h1> CSS 사용하기 </h1> </body> </html>
인라인방식 <html> <head> </head> <body> CSS CSS </body> </html> <html> <head> </head> <body> CSS </body> </html> <html> <head> </head> <body> CSS CSS CSS </body> </html> <html> <head> <title> 인라인방식 </title> </head> <body> <h1 style="font-size:30pt; color:blue"> CSS 사용하기 </h1> </body> </html>
CSS 적용방식의우선순위 3 2 <html> <head> <title> CSS 적용방식의우선순위 </title> <!-- h1 {font-size: 30pt; color:blue} --> <link rel="stylesheet" href="test.css" type="text/css"> <style type="text/css"> h1 {font-size: 10pt; color:green} </style> </head> <body> <h1 style="color: red"> CSS 사용하기 </h1> </body> </html> 1
선택자
선택자종류 선택자이름설명 * 전체선택자 전체에스타일지정 요소 요소선택자 지정한요소에스타일적용 요소. 클래스 클래스선택자 지정한클래스에스타일적용 요소 # 아이디 아이디선택자 지정한아이디에스타일적용 요소1 요소2 자손선택자 지정한요소의자손요소에스타일적용 요소1 > 요소2 자식선택자 지정한요소의자식요소에스타일적용 요소1 + 요소2 인접선택자 요소1 바로다음에위치한요소2에스타일적용 요소 [ 속성 ] 속성선택자 지정한속성에해당하는요소에스타일적용
요소선택자 요소 { 속성 : 값 ; } <!DOCTYPE html> <html> <head> <style type="text/css"> p {font-size: 15pt; color: blue; font-style: italic;} a {font-size: 20pt; color: red; font-weight: bold;} </style> </head> <body> <p> CSS 태그선택자 </p> <a> cs.knou.ac.kr </a> </body> </html>
클래스선택자 요소. 클래스 { 속성 : 값 ; } 같은이름의요소에각각다른스타일적용이가능 /* 클래스이름이 select1인 p 요소에스타일지정 */ p.select1 {font-size: 15pt; font-style: italic;} /* 클래스이름이 select2인모든요소에스타일지정 */.select2 {font-size: 20pt; font-weight: bold;} <p class="select1"> CSS 클래스선택자 </p> <p class="select2"> CSS 클래스선택자 </p> <a class="select2"> www.google.com </a>
아이디선택자 요소 # 아이디 { 속성 : 값 ; } 같은이름의요소에각각다른스타일적용이가능 /* 아이디이름이 select1인 p 요소에스타일지정 */ p#select1 {font-size: 15pt; font-style: italic;} /* 아이디이름이 select2인모든요소에스타일지정 */ #select2 {font-size: 20pt; font-weight: bold;} <p id="select1"> CSS 클래스선택자 </p> <p id="select2"> CSS 클래스선택자 </p> <a id="select2"> www.google.com </a>
속성선택자 속성선택자연산자의종류 요소 [ 속성 ] 요소 [ 속성 =" 값 "] 속성값과상관없이해당속성을사용하는요소에적용 속성값과일치하는요소에적용 요소 [ 속성 ~=" 값 "] 속성값을공백으로구분한요소에적용 요소 [ 속성 =" 값 "] 속성값을 - 로구분한요소에적용 요소 [ 속성 ^=" 값 "] 속성값의시작부분의문자와일치하는요소에적용 요소 [ 속성 $=" 값 "] 속성값의끝부분의문자와일치하는요소에적용 요소 [ 속성 *=" 값 "] 속성값전체중어떤일부분이라도일치하는요소에적용
속성선택자 a{font-family: " 굴림체 "; font-size:50px;} a[title="daum"] {font-weight: bold;} a[title~="cyworld"] {color: red;} a[title ="google"] {color: green;} a[title^="face"] {font-style: italic;} a[title$="ter"] {font-size:40px;} a[title*="utu"] {font-size:30px;} <a title="naver" href="http://www.naver.com"> 네이버 </a><br> <a title="daum" href="http://www.daum.net"> 다음 </a><br> <a title="nate cyworld" href="http://www.cyworld.com"> 싸이월드 </a><br> <a title="google-translate" href="http://translate.google.co.kr"> 구글번역 </a><br> <a title="facebook" href="http://www.facebook.com"> 페이스북 </a><br> <a title="twitter" href="http://www.twitter.com"> 트위터 </a><br> <a title="youtube" href="http://kr.youtube.com"> 유튜브 </a>
글꼴
글꼴관련속성 font-family 글자체지정 serif, sans-serif, cursive, fantasy, monospace, 글자체 ( 굴림체, 궁서체, ) font-size 글자크기지정 수치, 퍼센트 (%), xx-small, x-small, small, medium, x-large, xx-large, smaller, larger font-weight 글자굵기지정 100 200 900, normal, bold, bolder, lighter
글꼴관련속성 font-style 글자스타일지정 italic, oblique, no font-variant 작은대문자로변환 small-caps, normal font 글꼴스타일일괄지정
font-family 속성 <style type="text/css"> body { font-size: 20pt; }.font1 { font-family: HY 헤드라인, 궁서체 ; }.font2 { font-family: serif; }.font3 { font-family: sans-serif; }.font4 { font-family: cursive; }.font5 { font-family: fantasy; }.font6 { font-family: monospace; } </style> <p class="font1"> FONT 글자체지정 </p> <p class="font2"> FONT 글자체지정 </p> <p class="font3"> FONT 글자체지정 </p> <p class="font4"> FONT 글자체지정 </p> <p class="font5"> FONT 글자체지정 </p> <p class="font6"> FONT 글자체지정 </p>
font-size 속성 <style type= "text/css">.font1 { font-size: 15pt; }.font2 { font-size: 30pt; }.font3 { font-size: 100%; }.font4 { font-size: 200%; }.font5 { font-size: xx-small; }.font6 { font-size: x-small; }.font7 { font-size: small; }.font8 { font-size: medium; }.font9 { font-size: smaller; }.font10 { font-size: larger; }.font11 { font-size: large; }.font12 { font-size: x-large; }.font13 { font-size: xx-large; } </style>
font-weight 속성 <style type="text/css"> body { font-size: 20pt; }.font1 { font-weight: 100; }.font2 { font-weight: 400; }.font3 { font-weight: 900; }.font4 { font-weight: normal; }.font5 { font-weight: bold; }.font6 { font-weight: bolder; }.font7 { font-weight: lighter; } </style>
font-style, font-variant 속성 <style type="text/css"> body { font-size: 20pt; }.font1 { font-style: italic; }.font2 { font-style: oblique; }.font3 { font-style: no; }.font4 { font-variant: normal; }.font5 { font-variant: small-caps; } </style> <p class = "font5"> FONT small-caps 지정 </p>
일괄지정 font 속성 <!DOCTYPE html> <html> <head> <style type="text/css"> font: font-style 값 font-weight 값 font-variant 값 font-size 값 /line-height 값 font-family 값행의높이지정.font { font: italic small-caps 700 30pt/50pt serif } </style> </head> <body> <p> 글꼴관련속성일괄지정 </p> <p class="font"> font 일괄지정 </p> </body> </html> line-height 50pt line-height 5pt
사용자폰트스타일지정 @font-face 규칙 사용자가정의한외부의폰트를불러와사용 @font-face { font-family: 폰트이름 ; src: 폰트위치 ; } 폰트포맷에따른브라우저지원현황 IE 9.0 FF Chrome Safari Opera ttf otf eot woff svg
사용자폰트스타일지정 <!DOCTYPE html> <html> <head> <style type="text/css"> @font-face{ font-family: 'myfont'; src: url(chunkfive.otf); } p { font-family: myfont; font-size: 30pt; } </style> </head> <body> <p> CSS3 @font-face </p> </body> </html>
텍스트
텍스트스타일지정 letter-spacing word-spacing text-align vertical-align text-decoration text-transform text-indent line-height 수치, normal 수치, normal left, right, center, justify 수치, %, baseline, super, sub, top, middle, bottom overline, underline, line-through, blink, none none, capitalize, uppercase, lowercase 수치, % 수치, %
글자간격 letter-spacing 속성 <style type="text/css"> body { font-size: 20pt; font-weight: bolder; }.text1 { letter-spacing: normal; }.text2 { letter-spacing: 10pt; }.text3 { letter-spacing: -3pt; } </style>
단어간격 word-spacing 속성 <style type="text/css"> body { font-size: 20pt; font-weight: bolder; }.text1 { word-spacing: normal; }.text2 { word-spacing: 20pt; }.text3 { word-spacing: -5pt; } </style>
수평정렬 text-align 속성 <style type="text/css"> body { font-size: 20pt; font-weight: bolder; }.text1 { text-align: left; }.text2 { text-align: center; }.text3 { text-align: right; }.text4 { text-align: justify; } </style>
수직정렬 vertical-align 속성 body { font-size: 20pt; font-weight: bolder; }.text1 { vertical-align: top; }.text2 { vertical-align: middle; }.text3 { vertical-align: bottom; }.text4 { vertical-align: baseline; }.text5 { vertical-align: sub; }.text6 { vertical-align: super; } <p> 수직정렬하기 <img src="image.jpg" class="text?"></p> <p> 수직 <span class="text?"> 정렬 </span> 하기 </p>
글자장식 text-decoration 속성 <style type="text/css"> body { font-size: 15pt; font-weight: 900; }.text1 { text-decoration: none; }.text2 { text-decoration: underline; }.text3 { text-decoration: line-through; }.text4 { text-decoration: overline; }.text5 { text-decoration: blink; } </style> Opera, Firefox
글자변환 text-transform 속성 <style type="text/css"> body { font-size: 15pt; font-weight: 900; }.text1 { text-transform: none; }.text2 { text-transform: capitalize; }.text3 { text-transform: uppercase; }.text4 { text-transform: lowercase; } </style>
들여쓰기 text-indent 속성 <style type="text/css"> body { font-size: 15pt; font-weight: 900; }.text1 { text-indent: 10%; }.text2 { text-indent: 20%; }.text3 { text-indent: -10%; } </style> ( 기본 )
줄간격 line-height 속성 <style type="text/css"> body { font-size: 15pt; font-weight: 900; }.text1 { line-height: 2; }.text2 { line-height: 400%; } </style> <p> 줄간격지정하기 </p> <hr> <p class="text1"> 줄간격지정하기 </p> <hr> <p class="text2"> 줄간격지정하기 </p> <hr>
그림자효과스타일지정 text-shadow 속성 text-shadow: 가로위치세로위치 [ 농도 ] [ 색상 ]; <style type="text/css"> p { font-weight: bold; font-size: 30pt; text-shadow: 5px 5px 2px blue; } </style> <p> CSS3 font-shadow </p> text-shadow: -5px -5px 2px blue;
특정영역안의텍스트스타일지정 word-break 속성 강제로줄바꿈을지정 속성값 nowrap : 줄바꿈이되지않게지정 break-all : 특수문자를제외하고강제줄바꿈 word-wrap: break-word; 특수문자를포함하여강제줄바꿈 keep-all : 텍스트가한글일경우띄어쓰기기준으로줄바꿈
특정영역안의텍스트스타일지정 word-break 속성 <style type="text/css"> div { width: 250px; font-size: 20px; border:1px solid black; padding: 10px; word-break:???? ;} </style> nowrap break-all keep-all
특정영역안의텍스트스타일지정 text-overflow 속성 긴문장에대하여말줄임을지정 속성값 clip : 영역에맞추어글자를자름 ellipsis : 잘리는끝부분에자동으로 를넣어줌영역에대한 width 값지정 white-space : nowrap; overflow : hidden;
특정영역안의텍스트스타일지정 text-overflow 속성 <style type="text/css"> div { width: 300px; font-size: 20px; border:1px solid black; padding: 10px; white-space: nowrap; overflow: hidden; text-overflow:???? ;} </style> clip ellipse
배경, 색상 박스, 다단