CSS
{ color:blue; font-size:1.3em; } 1. CSS 문법 정의 HTML문서 내에서 어떤 요소에 CSS의 스타일을 적용시킬 것인가 결정하기 위한 것 CSS 문법 CSS 파일은 선택자(Selector)와 { }로 둘러쌓인 속성:속성값 들로 이루어져 있다. 선택자는 일반적으로 스타일 정의하고 싶은 html태그 또는 요소들을 지정할 때 사용한다. 속성(property)은 변경하고 싶은 스타일 정보이며, 각 속성은 값(value)을 가질 수 있다. 속성과 값은 ":"(colon)으로 분리하고 "{"와 "}"(curly braces)로 둘러싸여 있다. 주석은 /*와 */로 둘러싼다. h1 { color:blue; font-size:1.3em; } Property Value Declaration Selector
2. CSS 사용 예 예 다음은 HTML 문서에서 <p>요소로 정의된 부분의 글자색을 black으로 설정한 예이다. p {color: black} 만일 값이 공백을 포함한 여러 단어일 경우 다음과 같이 quote(")로 묶어준다. p {font-family: "sans serif"} 하나의 선택자에 하나 이상의 속성을 정의하고 싶을 경우에는 ";"(semicolon)으로 분리해 준다. p {text-align:center;color:red} 위의 예를 좀 더 보기 좋게 하기 위하여 다음 예와 같이 엔터와 들여쓰기를 할 수 있다. p { text-align: center; color: black; font-family: arial }
1. 외부 스타일 시트(External Style Sheet) 3. CSS를 사용하는 방법 (1/3) 1. 외부 스타일 시트(External Style Sheet) 외부 스타일 시트는 여러 웹 페이지에 스타일을 적용시킬 때 이상적이다. 외부 스타일 시트를 사 용하면 하나의 CSS파일 만 수정하여 어려 웹 페 이지(HTML문서)의 스타일을 변경시킬 수 있다. 그렇게 하기 위해서 각각 웹 페이지에는 <link> 태그를 사용하여 외부 스타일 시트 파일을 지정 하는 문장에 <head>태그에 포함되어 있어야 한 다. <head> <title>문서의 제목</title> <link rel="stylesheet" type="text/css" href="default.css"/> </head> 브라우저는 default.css 파일로부터 스타일 정 의를 읽어 웹 페이지에 적용시킨다. 외부 스타일 시트는 어떤 텍스트 에디터로든지 작성이 가능 하다. 외부 스타일 시트 파일은 확장자를 .css로 하여 저장해야 하고, 외부 스타일시트 파일은 HTML 태그를 포함할 수 없다. HTML5 에 추가된 media 속성을 이용하면 장치에 따라 스 타일을 다르게 적용시킬 수 있다. <link rel=… media="only all and (max-width:480)"/> <!doctype html> <html> <head> <link rel="stylesheet" href="default.css" /> </head> <body> <h1>This header is 36 pt</h1> <h2>This header is blue</h2> <p>This paragraph has a left margin of 50 pixels</p> </body> </html> sample.html body { background-color: yellow; } h1 { font-size: 36pt; h2 { color: blue; p { margin-left: 50px; default.css
2. 내부 스타일 시트(Internal Style Sheet) 3. CSS를 사용하는 방법 (2/3) 2. 내부 스타일 시트(Internal Style Sheet) 내부 스타일 시트는 하나의 문서에서만 사용하 는 스타일을 정의할 때 사용한다. 내부 스타일은 <head>태그 안에 <style>태그를 이용하여 정의 한다. <head> <title>문서의 제목</title> <style type="text/css"> hr { color: sienna } p { margin-left: 20px body { background-image: url("images/back.gif") </style> </head> 브라우저는 알려지지 않는 태그를 무시한다. 스타 일을 지원하지 않는 오래된 버전의 브라우저일 경우 <style>태그를 무시하고 <style>태그 안의 내용을 웹 페이지에 출력하게 된다. 이것을 방지하기 위해 서 다음과 같이 HTML 주석을 사용할 수 있다. <head> <title>문서의 제목</title> <style type="text/css"> <!-- hr { color: sienna } p { margin-left: 20px body { background-image: url("images/back.gif") --> </style> </head>
3. 인라인 스타일(Inline Styles) 3. CSS를 사용하는 방법 (3/3) 3. 인라인 스타일(Inline Styles) 인라인 스타일을 사용하면 내용과 표현이 섞이 기 때문에 스타일을 사용하는 많은 장점을 잃을 수 있다. 그러나 특정한 부분에만 스타일을 적용시키고 자 할 경우 사용할 수 있다. 인라인 스타일은 태그 안에 style 속성을 사용하 여 스타일을 지정한다. 다음은 문단의 색을 빨간색으로, 왼쪽 여백은 20픽셀 간격을 주는 스타일 예이다. <p style="color: red; margin-left: 20px">이것 은 문단이다.</p> * 스타일 우선순위 만일 같은 선택자의 스타일이 같은 속성에 값은 다르게 정의되었을 경우에는 더 구체적은 스타일을 따르게 된다. 또한 스타일 속성이 다르게 정의되었을 경우에는 더 구체적인 스타일로 스타일의 속성이 상속된다. 예를 들어 외부 스타일 시트에 h3 선택자에 다음 3가지 속성이 지정되었고, h3 { color: red; text-align: left; font-size: 8pt; } 내부 스타일 시트의 h3 선택자에는 다음 2가지 속성이 지정되었을 경우에 text-align: right; font-size: 20pt; 내부 스타일이 정의된 파일에서 <h3>태그를 사용하였을 경우 다음처럼 color 속성은 외부 스타일의 정의를 따르게 된다. color 속성은 외부 스타일 시트로부터 상속받고, text-alignment와 font-size 속성은 내부 스타일 시트 정의를 따르게 된다. text-align: right; font-size: 20pt !important 속성은 2중 선언된 스타일 시트에 대하여 선언순서와 상관 없이 우선순위가 적용되도록 한다. width:11px !important;
4. 선택자의 종류 (1/8) 전역 선택자 전체에 적용하기 위한 선택자이다. * 를 이용한다. 예 다음은 문서 내에 모든 곳에 적용되는 글꼴을 굴림체로 지정한다. * {font-face: "굴림체";} 태그 선택자 ("element") 태그 선택자는 일반적으로 스타일 정의하고 싶은 html 태그 이름을 사용한다. 태그가 가지고 있는 기본 스타일이 지정되고, 스타일시트에 의한 스타일이 적용된다. 다중(그룹) 선택자 ("selector1, selector2, selectorN") 선택자를 ","(comma)로 분리하여 선언하면 여러 개 선택자에 하나의 스타일을 적용시킬 수 있다. 헤더를 나타내는 태그들에 색상을 적용한 예. 모든 헤더들은 문자의 색상이 blue로 나타냄. h1,h2,h3,h4,h5,h6 { color: blue; } 내포 선택자 ("ancestor descendant") 요소가 내포 관계가 있을 때 적용시키기 위한 선택자이다. 선택자와 선택자 사이를 공백으로 띄우고 나열한다. 다음은 <p> 태그 안에 <strong>태그가 올 경우 파란색으로 지정하는 예이다. <p> 태그 밖에 있는 <strong>에는 스타일 적용되지 않는다. p strong{ color:red; }
4. 선택자의 종류 (2/8) 인접 선택자 ("prev + next") 선택자와 선택자 사이에 +를 표시한다. 앞의 선택자와 가장 가까이 있는 뒤의 선택자에 스타일을 적용하는 선택자이다. 예 다음은 <div> 태그와 가장 가까이 있는 인접(형재) 태그중에서 <p> 태그에 스타일을 적용한다. div + p {color: blue;} 형제 선택자 ("prev ~ siblings"); 선택자와 선택자 사이에 ~를 표시한다 prev 요소 뒤에 나오는 부모가 같은 형제 요소를 모두 찾는다. 자식 선택자 ("parent > child") 선택자와 선택자 사이에 >를 입력하며 반드시 부모자식간의 관계에만 스타일이 적용되도록 한다. DOM을 두단계 이상 건너뛴 관계에서는 자식선택자가 작동하지 않는다. 다음은 <div><span><p>… 처럼 div 태그 바로 아래에 p 태그가 아닌 다른 태그가 있을 때에는 스타일이 적용되지 않는다. <div><p>처럼 div 태그 바로 아래 p 태그가 있어야 스타일이 적용된다. div > p { color: blue; }
4. 선택자의 종류 (3/8) 클래스(class) 선택자 (".class") 클래스 선택자는 같은 HTML요소에 서로 다른 스타일을 정의할 때 사용한다. 클래스 선택자는 선택자 이름 앞에 "."을 이용하여 선언한다. HTML 문서에서 class 속성의 값과 일치하는 요소를 선택한다. 예 1 <p>태그를 이용하여 문단을 나눌 때 한 문단은 오른쪽 정렬을 사용하고, 다른 문단은 가운데 정렬을 사용하고 싶을 경우가 있을 것이다. 다음은 클래스 선택자를 사용한 예이다. p.right {text-align: right} p.center {text-align: center} HTML 문서에서 클래스 선택자를 사용하는 방법은 다음과 같다. <p class="right"> 이 문단은 오른쪽 정렬된다. </p> <p class="center"> 이 문단은 가운데 정렬된다. </p> 만일 클래스 선택자가 여러 개 정의되어 있다면 다음과 같이 하나의 HTML요소에 클래스 선택자를 여러 개 지정할 수 있다. <p class="center bold"> 이것은 문단이다. </p> 예 2 클래스 선택자는 특정 태그에만 적용시키지 않아도 된다. 다음과 같이 클래스 선택자 앞에 태그이름을 빼고 선언하면 원하는 어떤 태그에서도 클래스 선택자를 사용할 수 있다. .center {text-align: center} 위의 클래스 선택자는 다음 예에서 보는 바와 같이 <h1>태그에서도 사용할 수 있으면 <p>태그에서도 사용할 수 있다. <h1 class="center">이 heading은 가운데 정렬된다.</h1> <p class="center">이 문단도 가운데 정렬된다.</p>
4. 선택자의 종류 (4/8) 아이디(id) 선택자 ("#id") id 선택자는 #으로 정의한다. HTML 문서에서 id 속성의 값과 일치하는 요소를 선택한다. 예 1 id속성의 값이 blue를 갖는 모든 HTML요소의 색을 파란색으로 한다. #blue {color: blue} 예 2 다음은 <p> 태그들 중에서 id속성 값이 para1을 갖는 경우 스타일을 정의한 예이다. p#para1 { text-align: center; color: red } HTML 문서내에서 id 속성은 유일한 값이어야 할 것이다. 여러 요소에 공통 스타일을 지정해야 한다면 클래스 속성을 사용해야 한다. 주의 : Mozilla/Firefox에서는 아이디 선택자 및 클래스 선택자의 이름이 숫자로 시작할 수 없다. HTML5에서 id 속성과 class 속성은 모든 태그에서 사용할 수 있다. <section id="sports"> <article class="baseball">…</article> <article class="football">…</article> </section>
4. 선택자의 종류 (5/8) 속성 선택자 [name="value"] 가끔은 어떤 특정한 속성을 갖는 요소에만 스타일을 적용시킬 경우가 있다. [와 ]사이에 속성의 이름과 값을 지정한다. 예 다음은 텍스트 입력상자를 나타내는 <input> 태그에서 type 속성의 값이 text일 경우에만 스타일을 지정하기 위한 예이다. input[type="text"] {background-color: blue} 속성의 값이 정확히 일치하지 않을 경우에 ~, ^, $, *를 사용 할 수 있다. 태그[속성~="값"] 속성값 중 공백으로 분리된 단어가 포함되어 있는지 체크한다. 태그[속성^="값"] 속성값 중 시작 부분의 문자를 체크한다. 태그[속성$="값"] 속성 값 중 끝 부분의 문자를 체크한다. 태그[속성*="값"] 속성값 전체에서 어느 하나라도 매치되는 부분이 있는지 체크한다.
4. 선택자의 종류 (6/8) 의사(擬似) 선택자(Pseudo Selector) :으로 시작하며 요소의 상태에 따라 다르게 적용되는 선택자이다. 사용 방법 selector:pseudo-class {property: value} selector.class:pseudo-class {property: value} 링크 관련 의사 선택자 :link : 방문하지 않는 사이트에 링크가 걸렸을 때의 스타일을 적용한다. :visited : 방문했던 사이트에 링크가 걸렸을 때의 스타일을 적용한다. :hover : 마우스가 요소 위에 위치할 때 스타일을 적용한다. a:hover 선택자는 a:link와 a:visited 선택자 뒤에 선언되어야 한다. :active : 링크를 클릭하는 순간의 스타일을 적용한다. a:active 선택자는 a:hover 선택자 뒤에 선언되어야 한다.
4. 선택자의 종류 (7/8) 순서 관련 의사선택자 익스플로러 7.0 이상 버전에서 동작하며, DOCTYPE이 선언되어야 함 :nth-of-type 특정 타입의 n번째 요소를 찾는다. p:nth-of-type(2n+1) { color:red; } 테이블의 홀수번째 행을 선택할 때에는 tr:nth-of-type(odd) :nth-last-of-type 마지막부터 특정 타입의 n번째 요소를 찾는다. :first-child 첫 번째 자식 요소를 찾는다. p:first-child { color:blue; } :last-child 마지막 자식 요소를 찾는다. p:last-child { color:blue; } :nth-child 맨 앞에서부터 특정 자식 요소를 찾는다. p:nth-child(2n+1) { color:red; } :nth-last-child 맨 마지막에서부터 특정 자식 요소를 찾는다. p:nth-last-child(2) { color:red; } :first-of-type 타입에 일치하는 첫 번째 요소를 찾는다. p:first-of-type { color:blue; } :last-of-type 타입에 일치하는 마지막 요소를 찾는다. p:last-of-type { color:blue; } :first 첫 번째 요소를 찾는다. :last 마지막 요소를 찾는다. :after 특정 요소 바로 다음을 의미한다. span.weight:after { content: "lbs"; color:#bbb; } span 요소들 중에서 클래스 속성이 weight인 요소 다음에 content로 지정한 내용을 덧붙이다.
4. 선택자의 종류 (8/8) :animated 선택되는 시점에서 애니메이션 진행 상태에 있는 progress 요소를 선택한다. :button button 타입 요소를 선택한다. :checkbox checkbox 타입 input 요소를 선택한다. :checked 선택 된 요소(radio, checkbox에서) 를 선택한다. :disabled disabled 된 요소를 선택한다. :empty 텍스트 노드를 포함한 자식 요소를 갖고 있지 않는 요소를 선택한다. :enabled enabled 된 요소를 선택한다. :even 짝수 번 째 요소를 선택한다. :file 파일 타입 요소를 선택한다. :focus 포커스 상태 요소를 선택한다. :header 헤더 요소(h1. h2,.. 등) 선택자를 선택한다. :hidden hidden 상태 요소를 선택한다. :image image 요소를 선택한다. :input input 요소를 선택한다. :odd 홀수 번 째 요소를 선택한다. :parent 부모 요소를 선택한다. :password password 타입 input 요소를 선택한다. :radio radio 타입 input 요소를 선택한다. :reset reset 타입 input 요소를 선택한다. :root 최상위 요소를 선택한다. :selected 선택 된 요소를 선택한다. :submit submit 타입 input 요소를 선택한다. :target 문서의 URI의 단편 식별자로 표시되는 대상 요소를 선택한다. :text text 타입 요소를 선택한다. :visible visible 상태 요소를 선택한다.
선택자 (CSS/basic/pseudo.html) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>가상클래스 선택자</title> <style type="text/css"> div:hover { background-color: red; } div:active { background-color: blue; input:focus { background-color: purple; /* 체크박스와 라디오는 배경색 지정이 안됩니다.*/ input:radio { input:disabled { background-color: cyan; </style> </head> <body> <div>여기에 마우스를 올리면 색이 변합니다.</div> <form> 아이디 : <input type="text" name="userid"><br> 비번 : <input type="password" name="password" disabled><br> 성별 : <label><input type="radio" name="sex" value="M">남자</label> <input type="radio" name="sex" value="F">여자 <br> <input type="submit"> </form> </body> </html>
CSS 스타일 속성
1. 스타일 속성 배경(Background) background, background-attachment, background-color, background-image, background-position, background-repeat 폰트(Font) font, font-family, font-size, font-style, font-variant, font-weight 텍스트(Text) color, direction, line-height, letter-spacing, text-align, text-decoration, text-indent, text-transform, white-space, word-spacing 박스(Box) list-style, list-style-image, list-style-position, list-style-type 목록(List) border-collapse, table-layout, border-spacing, caption-side, empty-cells 레이어(Layer) top, left. right, bottom, position, clip, vertical-align, z-index 치수단위 색상(Colors) 단위 설명 % 비율 in inch cm centimeter mm millimeter em 1em 은 현재 폰트의 크기와 같다. 2em 은 현재 폰트 크기의 2배 크기를 의미한다. 만약 현재 폰트의 크기가 12pt이면 2em은 24pt 크기에 해당한다. ex 1ex 는 폰트의 높이(x-height)를 의미한다. x-height 일반적으로 폰트 크기의 절반이다. pt point (1 pt = 1/72 inch) pc pica (1 pc = 12 points) px pixels (a dot on the computer screen) 단위 설명 color_name 영문으로 된 색 이름을 사용(예: red) rgb(r, g, b) RGB 값을 10진수로 표현(예: rgb(255,0,0)) rgb(r%, g%, b%) RGB 값을 백분율(%) 로 표현(예: rgb(100%,0%,0%)) #rrggbb 16진수로 표현(예: #ff0000) #rgb rgba(r, g, b, a) 익스플로러에서 동작 안함
2. 배경 관련 속성 background 속성은 HTML 요소들의 배경색, 배경그림, 배경그림의 반복, 위치 등 배경에 관련된 것들을 설정할 수 있다. background 배경 속성을 한 번에 지정할 수 있다. 속성의 값은 배경색, 배경이미지, 배경이미지의 반복여부, 스크롤시 배경이미지 고정여부, 배경이미지 위치 순서대로 지정해야 한다. background-attachment 페이지가 스크롤 될 경우 배경의 이미지를 고정시킬 것인지를 지정한다. fixed 또는 scroll 중 하나를 갖는다. background-color 배경 색을 지정한다. 배경 색은 색상이름을 영문으로 표시(red)하거나, RGB값(rgb(255,0,0)) 또는 16진수(#FF0000) 값으로 표현할 수 있다. 배경을 투명하게 하고 싶으면 transparent를 사용할 수 있다. background-image 배경의 이미지를 지정한다. 배경 이미지가 smile.gif일 경우 url('smile.gif')이라고 지정한다. background-position 배경 그림의 위치를 지정한다. 브라우저 화면의 비율(10%, 20%), 고정된 픽셀(50px, 100px), 위치(top, button, center, left, right)등을 통해 지정할 수 있다. background-repeat 배경 이미지의 반복 여부를 지정한다. repeat-x, repeat-y, no-repeat 를 값으로 사용할 수 있다.
2. 배경 관련 속성 (CSS/basic/css_background.html) .list_icon { margin-top:12px; width:22px !important; height:20px; background-image:url(./images/icones.png); background-repeat:no-repeat; background-position:0 -70px; } .calendar_icon { margin-top:9px; height:23px; text-indent:25px; background-image:url(./images/images.png); background-position:0 -125px; .cal_prev_button div { background-position:0 -150px; left:5px; .cal_next_button div { background-position:0 -172px; right:5px; CSS를 이용해서 하나의 아이콘 이미지로 여러 개의 아이콘을 사용하는 예이다. 문서 내에 작은 이미지 아이콘이 많이 사용될 경우 유용하게 사용될 것이다. ./images/icones.png
2. 배경 관련 속성 (CSS/basic/css_background.html) <!doctype html> <html> <head> <meta charset="utf-8"> <title>css background</title> <style type="text/css"> body { margin-left:200px; background:#5d9ab2 url('./images/img_tree.png') no-repeat top left; } .container { text-align:center; .center_div { border:1px solid gray; margin-left:auto; margin-right:auto; width:90%; background-color:#d0f0f6; text-align:left; padding:8px; .list_icon { margin-top:12px; width:22px !important; height:20px; background-image:url(./images/icons.png); background-repeat:no-repeat; background-position:0 -70px;
2. 배경 관련 속성 (CSS/basic/css_background.html) .calendar_icon { margin-top:9px; height:23px; text-indent: 25px; background-image:url(./images/icons.png); background-position:0 -125px; background-repeat:no-repeat; } .cal_prev_button { height:20px; background-position:0 -150px; left:5px; .cal_next_button { background-position:0 -172px; right:5px; </style> </head>
2. 배경 관련 속성 (CSS/basic/css_background.html) <body> <div class="container"> <div class="center_div"> <h1>안녕하세요.</h1> <p>이 예제는 CSS 예제입니다. background 속성관련 예제를 실습하고 있습니다. </p> </div> <p></p> <p class="list_icon"></p> <p class="calendar_icon">달력 아이콘입니다.</p> <p class="cal_prev_button"></p> <p class="cal_next_button"></p> </body> </html>
3. 폰트 관련 속성 font font에 관련된 속성을 한꺼번에 설정할 수 있다. font-style, font-variant, font-weight, font-size, line-height, font-family, caption, icon, menu, message-box, small-caption, status-bar 등을 지정할 수 있다. 속성을 한꺼번에 설정할 경우에는 값을 순서대로 입력해야 한다.(font: italic small-caps 900 12px arial) font-family 폰트를 설정할 수 있다. 폰트 이름을 여러 개 나열할 수 있으며, 브라우저는 가장 첫 번째 인식하는 폰트를 사용한다. font-size 폰트 크기를 설정할 수 있다. 폰트 크기를 설정하는 방법은 xx-small, x-small, small, medium, large, x-large, xx-large 값으로 할 수 있으며, 현재 지정된 크기에 상대적인 크기인 smaller, larger 그리고 %를 사용할 수 있다. 직접 폰트의 크기 값을 지정할 수 있다. 그럴 경우에는 단위를 같이 지정해야 한다. font-style 폰트 스타일을 설정한다. normal, italic(이탤릭체), oblique(기울임꼴) 중 하나를 선택할 수 있다. font-variant 값을 small-caps로 지정하면 영문 소문자를 약간 작은 크기의 대문자로 보여준다. font-weight 폰트의 굵기를 설정한다. 값은 normal, bold, bolder, lighter 중 하나를 선택하거나 100, 200, 300, 400, 500, 600, 700, 800, 900 중 하나를 선택할 수 있다. 400으로 입력하면 normal과 같은 굵기이며, 700은 bold와 같은 굵기이다.
3. 폰트 관련 속성 (CSS/basic/css_font.html) <html lang="ko"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>폼 테스트</title> <style type="text/css"> p.font1 { font-family:sans-serif; font-size: 20px; font-style: italic; font-variant: small-caps; font-weight: 900 } p.font2 { font: italic small-caps 900 15px arial </style> </head> <body> <p class="font1">폰트 속성과 관련된 예입니다.</p> <p class="font2">This is font properties</p> </body> </html> 글자의 색을 바꾸는 font-color 속성은 없다. 글자의 색을 바꾸려면 텍스트 관련 속성인 color를 이용해야 한다.
4. 텍스트 관련 속성 (1/2) text 속성은 텍스트의 모양을 제어할 수 있도록 한다. 텍스트 속성을 이용하면 색상, 자간, 정렬방 식, 밑줄, 취소선, 들여쓰기 등을 변경할 수 있다. color 텍스트 색을 지정한다. direction 텍스트 방향을 지정한다. 값은 ltr(left to right) 또는 rtl(right to left)가 있다. line-height 줄 간격을 지정한다. normal 로 지정하면 현재 폰트 크기에 적당한 줄 간격(line-height: normal)으로 나타낸다. 현재 폰트 크기에 곱한 간격만큼 줄 간격(line-height: 1.5)을 나타내거나, 고정된 줄 간격을 표시(line-height: 20px)할 수 있다. 현재 폰트에 대한 비율(line-height: 160%)로도 나타낼 수 있다. letter-spacing 문자사이의 간격을 설정한다. normal로 지정하거나 고정된 간격(letter-spacing: -0.5px)으로 나타낼 수 있다. text-align 텍스트 정렬상태를 설정한다. 정렬상태는 left, right, center, justify 중 하나를 지정할 수 있다. text-decoration 텍스트에 줄을 표시한다. 속성의 값이 underline일 경우 밑줄, overline일 경우 윗줄, line-through일 경우 취소 선을 나타낸다. blink일 경우에는 문자를 깜빡이게 한다. blink는 익스플로러에서는 동작하지 않는다.
4. 텍스트 관련 속성 (2/2) text-indent 문장의 첫 라인을 들여쓰기 한다. 고정된 길이(text-indent: 20px)로 설정하거나 문자의 비율(%)로 설정할 수 있다. text-transform 영문자를 대문자 또는 소문자로 변환하기 위해 사용한다. 값이 capitalize일 경우 각 단어의 첫 문자를 대문자로 나타낸다. uppercase를 사용하였을 경우에는 모든 문자를 영문자 대문자로 만들어준다. lowercase를 사용하였을 경우에는 모든 문자를 영문자 소문자로 만들어 준다. white-space 공백이나 엔터가 어떻게 동작할 것인지를 설정한다. normal일 경우에는 공백과 엔터를 무시한다. pre를 사용하였을 경우에는 HTML 태그의 <pre>태그와 동일한 기능을 한다. nowrap을 사용하였을 경우에는 줄 바꿈 기능을 하지 않는다. 가로 스크롤 생길 수 있음 pre-wrap은 기존 줄바꿈에 표현되는 영역이 좁을 경우 자동 줄바꿈 기능까지 있다. word-spacing 단어 사이의 공백의 길이를 설정할 수 있다. 값이 normal일 경우가 있고 공백의 길이를 직접 지정할 수 있다. overflow 일정 공간에 글들이 넘칠 때 넘치는 것을 방지하는 속성이다. visible: 그냥 보여줌, scroll: 무조건 스크롤을 보여줌, auto: 넘쳤을 때 스크롤을 보여줌, hidden: 숨김 등 속성값을 가질 수 있다. 표의 셀 폭이 글자를 모두 표현할 수 없을 경우 유용하게 사용된다.
5. Box 관련 속성 (1/4) - border (1/2) HTML에서는 텍스트에 경계선을 나타내기 위해서 <table>태그를 사용했었다. 그러나 CSS를 이용하면 HTML 어떤 요소에도 다양한 모양의 경계선 효과를 줄 수 있다. 경계선의 색과 두께는 border-style 속성을 지정해야 효과가 나타난다. border 경계선 top, right, bottom, left 4곳을 한 번에 설정할 수 있다. 값은 경계선의 넓이, 스타일, 색상 순으로 입력하면 된다. border-style 경계선의 스타일을 설정할 수 있다. 스타일의 종류는 none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset중 하나를 선택할 수 있다. 스타일을 지정하지 않으면 none이 되어 경계선이 나타나지 않는다. 값이 하나이면 경계선 4곳 모두 동일 스타일로 지정되고, 값이 두 개이면 top/bottom, right/left 순서로 스타일이 지정된다. 세 개 이면 top, right/left, bottom 순서로 스타일이 지정되고, 네 개 이면 각각 top, right, bottom, left 순으로 스타일이 지정된다. border-color 경계선의 색상을 설정할 수 있다. 경계선의 값을 한 개부터 4개 까지 입력할 수 있다. 입력하는 개수에 따른 색상 적용은 border-style과 같다.
5. Box 관련 속성 (1/4) - border (2/2) border-width 경계선의 두께를 설정할 수 있다. 값은 thin, medium, thick중 하나를 선택하거나 직접 두께를 지정할 수 있다. 입력하는 개수에 따른 색상 적용은 border-style과 같다. border-top, border-right, border-bottom, border-left 경계선 4곳 중에서 해당하는 위치만 설정할 수 있다. 값은 경계선의 넓이, 스타일, 색상 순으로 입력하면 된다. border-top-color, border-right-color, border-bottom-color, border-left-color 경계선 4곳 중에서 해당하는 부분의 색상만 설정할 수 있다. border-top-style, border-right-style, border-bottom-style, border-left-style 경계선 4곳 중에서 해당하는 부분의 스타일만 설정할 수 있다. border-top-width, border-right-width, border-bottom-width, border-left-width 경계선 4곳 중에서 아래 부분의 굵기만 설정할 수 있다. thin, medium, thick중 하나를 선택하거나 직접 선의 굵기를 입력할 수 있다. 경계선 설정시 위치 4곳을 한꺼번에 설정할 때 값의 개수에 따라 다음 위치가 적용된다. 값이 1개면 모두 값이 2개면 top/bottom, right/left 값이 3개면 top, right/left, bottom 값이 4개면 top, right, bottom, left
5. Box 관련 속성 (2/4) - margin margin 속성은 여백을 설정하기 위해 사용한다. 여백은 경계선 밖에 설정되며 배경속성의 영향을 받지 않는다. 여백은 반드시 양수 값일 필요는 없다. 음수 값을 입력하여 사용할 수 있다. top, right, bottom, left 여백 모두 동일하게 설정할 수 도 있으며 각각 다르게 설정할 수 도 있다. 익스플로러에서 <body> 태그의 기본 여백은 8픽셀(px)이다. margin top, right, bottom, left 순서대로 값을 입력하여 여백을 설정한다. margin-top, margin-right, margin-bottom, margin-left 해당하는 위치의 여백을 설정한다. 값은 auto로 하거나 여백을 직접 값으로 입력할 수 있다. 아니면 브라우저의 크기에 따른 비율(%)로 값을 설정할 수 있다.
5. Box 관련 속성 (3/4) - padding padding 속성은 HTML 요소와 경계선 사이의 여백을 설정할 때 사용한다. padding 속성은 margin 속성과는 다르게 음수 값은 사용할 수 없다. top, right, bottom, left 값을 동일하게 설정할 수 도 있으며, 각각 다른 값으로 설정할 수도 있다. padding top, right, bottom, left 순서대로 값을 입력하여 내용과 경계선 사이의 여백을 설정한다. padding-top, padding-right, padding-bottom, padding-left 해당하는 위치의 여백을 설정한다. 값은 auto로 하거나 여백을 직접 값으로 입력할 수 있다. 아니면 브라우저의 크기에 따른 비율(%)로 값을 설정할 수 있다.
5. Box 관련 속성 (4/4) - box-sizing: border-box; width와 height가 padding과 border를 포함하도록 설정된다. <!DOCTYPE html> <html> <head> <style> .div1 { width: 300px; height: 100px; border: 1px solid blue; } .div2 { padding: 50px; border: 10px solid red; </style> </head> <body> <div class="div1">Both divs are the same size now!</div><br> <div class="div2">Hooray!</div> </body> </html> 32
5. Box 관련 속성 예 (CSS/basic/css_box.html) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> #border { border: 1px solid #F00; } #padding { border: 1px solid; padding: 10px #margin { margin: 10px; text-decoration: #radius { border: 10px groove; border-radius: 10px 10px 0 0; </style> </head> <body> <div id="border">경계선의 모양을 지정합니다.</div> <div id="padding">경계선의 안쪽 여백을 지정합니다.</div> <div id="margin">경계선의 바깥쪽 여백을 지정합니다.</div> <div id="radius">모서리를 둥글게 지정합니다.</div> </body> </html>
6. 목록 관련 속성 (1/2) list 속성은 HTML 목록의 표시 형식을 변경할 때 사용한다. 목록의 표시 형식은 도형뿐만 아니라, 그림파일을 이용해 설정할 수 있다. list-style 목록의 스타일을 표시형식, 위치, 그림파일 순으로 설정한다. list-style-image 목록의 표시형식을 그림으로 설정한다. url( )함수를 통해서 파일명을 지정한다. list-style-position 목록을 들여 쓸 것인지를 설정한다. 값은 inside와 outside가 있다. list-style-type 목록의 표시 형식을 지정한다. 값은 none, disc, circle, square, decimal, decimal-leading-zero(01, 02, 03, ...) lower-roman(i, ii, iii, iv, v, ...), upper-roman(I, II, III, IV, V, ...), lower-alpha(a, b, c, d, ...), upper-alpha(A, B, C, D, ...), lower-greek(alpha, beta, gamma, ...), lower-latin(a, b, c, d, ...), upper-latin(A, B, C, D, ...), hebrew, armenian, georgian(an, ban, gan, ...), cjk-ideographic, hiragana(a, i, u, e, o, ka, ki, ...), katakana(A, I, U, E, O, KA, KI, ...), hiragana-iroha(i, ro, ha, ni, ho, he, to, ...), katakana-iroha(I, RO, HA, NI, HO, HE, TO, ...) 등 이 있다.
6. 목록 관련 속성 (2/2) - (CSS/basic/css_list.html) 좋아하는 과일입니다. <ul style="list-style-image:url(./images/li.png)"> <li>사과</li> <li>바나나</li> <li>포도</li> </ul> <p style="padding-left:20px; background:url(./images/li.png) no-repeat"> 안녕하세요 반갑습니다.</p>
7. 테이블 관련 속성 table 속성은 HTML 표의 설정을 변경할 때 사용한다. border-collapse 표의 셀 구분을 한 줄로 할 것인지, 두 줄로 할 것인지를 설정한다. collapse 로 지정할 경우에는 서로 이웃하는 테이블이나 셀의 테두리 선을 겹쳐서 표현(셀 구분을 한 줄로) 하고, separate(디폴트) 하였을 경우에는 이웃하는 테이블이나 셀의 테두리선을 분리시켜 표현(셀 구분을 두 줄로) 한다. table-layout 테이블 셀의 크기를 고정시키기 위해 사용한다. fixed 로 하였을 경우에는 셀의 내용이 셀의 크기보다 많더라도 셀의 크기가 커지지 않는다. border-spacing 경계선의 여백의 크기를 지정한다. caption-side 표제목이 보일 방향을 지정한다.
7. 테이블 관련 속성 (CSS/basic/css_table.html) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS table 속성 : border- collapse</title> </head> <body> 첫 번째 표 <table cellpadding=0 cellspacing=0 border=0> <tr><td bgcolor=black> <table cellspacing=1 border=0 width=300> <tr> <td bgcolor=white>하나</td> <td bgcolor=white>둘</td> </tr> <tr bgcolor=white> <td>셋</td><td>넷</td> </table> </td></tr> </table><br> 두 번째 표 <table border=1 cellspacing=0 width=300> <tr> <td>대~한민국</td> </tr> </table><br> 세 번째 표 <table style="border-collapse:collapse" border=1 cellspacing=0 width=300> <td>대~한민국 </td> </table> </body> </html> 셀과 셀 사이의 여백을 0으로 해도 선의 두께는 2픽셀로 표현 됨 border-collapse는 셀과 셀 사이의 구분선을 1로 해줌 표의 선 두께를 1로 하기 위해 표 안에 표를 넣어 표현
8. 레이어(CSS-Positioning) 관련 속성 HTML 요소가 보일 위치, 정렬상태, 우선순위 등을 설정할 수 있다. top 브라우저 화면의 위에서 얼마만큼 아래로 위치해 있는지를 설정한다. 브라우저 화면의 비율(%)로 나타내거나 고정된 길이 값으로 지정할 수 있다. left 브라우저 화면의 왼쪽에서 얼마만큼 오른쪽으로 위치해 있는지를 설정한다. right 브라우저 화면의 오른쪽에서 얼마만큼 왼쪽으로 위치해 있는지를 설정한다. bottom 브라우저 화면의 아래에서 얼마만큼 위로 위치해 있는지를 설정한다. position 요소의 위치가 브라우저 화면에 상대적으로 나타나게 할 것인지 또는 항상 같은 위치에 나타나게 할 것인지를 설정한다. 값은 static(default), relative, absolute, fixed 중 하나를 선택하면 된다. static(default) : 태그가 위에서 아래로 순서대로 배치됨. top, bottom, left, and right 속성 사용 못 함 relative: 초기 위치 상태에서 상하좌우로 위치를 이동시킴. absolute : 절대적 위치 좌표로 설정함 fixed: 화면을 기준으로 고정된 위치, 스크롤 해도 항상 그 자리에 보여짐 clip 지정한 영역에 한해서만 화면에 나타나게 설정한다. vertical-align 수직 정렬상태를 설정할 수 있다. 값은 baseline, sub, super, top, text-top, middle, bottom, text-bottom 중에서 하나를 선택하거나 길이를 입력할 수 있다. 또는 줄 간격의 비율(%)로 나타낼 수 있다. z-index 요소의 순서를 설정한다. 숫자 값이 클수록 우선순위가 높고 앞쪽에 나타난다. static(default) : top, bottom, left, and right 속성 사용 못함 relative: 이전에 보여진 엘리먼트를 기준으로 정함 absolute : 첫 번 째 부모 엘리먼트를 기준으로 보여짐 fixed: 고정된 위치, 스크롤 해도 항상 그 자리에 보여짐
8. 레이어(CSS-Positioning) 관련 속성 (CSS/basic/css_positioning.html) <!DOCTYPE html> <html> <head> <meta charset="EUC-KR"> <title>레이어 속성</title> <style> .todo { position: fixed; top: 0; right: 0; width: 180px; padding: 8px 12px; font-size: 0.916em; opacity: 0.1; border: solid 1px #e1c400; color: black; background: #fff7c1; } .todo:hover { opacity: 1; </style> </head> <body> <p>내용이 들어갈 수 있습니다.</p> ... 생략... <section class="todo"> 클래스 속성의 값이 todo 인 곳은 브라우저 오른쪽 상단, 폭 180픽셀 크기, 위/아래 여백 8픽셀, 좌/우 여백 12픽셀, 선의 두께는 1픽셀, 실선, 선의 색은 #e1c400, 글자 크기는 0.916em, 색은 black, 배경색은 #fff7c1, 그리고 투명도 10% 로 보여지며, 마우스가 해당 영역위에 올라가면 투명도를 1으로 해서 내용이 잘 보이도록 함. </section> </body> </html>
9. float 와 clear 속성 float clear 값은 left 또는 right 값은 left, right, both left일 경우 float된 박스 중 좌측이 짧을 때 좌측의 빈 공간부터 채워 내려온다. both일 경우 float 된 박스 중 어느 쪽도 채 우지 않고 다시 한 단으로 배치해 준다.(가 장 중요)
9. float 와 clear 속성 (CSS/basic/css_float.html) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> div { width: 100px; height: 100px; border: 1px solid #000000; margin: 5px; float: left} #redbox { background: red;} #greenbox { background: green;} #bluebox { background: blue;} #yellowbox { background: yellow;} #blackbox { background: black;} p { clear: both; } #content { width:600px; padding: 10px; border: 2px dashed black} #content:after { content: " "; display: block; clear: both; } </style> </head> <body> <section id="content"> <h1>문서의 내용</h1> <div id="redbox"></div> <div id="greenbox"></div> <div id="bluebox"></div> <div id="yellowbox"></div> <div id="blackbox"></div> <p>after를 이해하시려면 여기를 삭제해 보세요</p> </section> </body> </html>
Lab (CSS/basic/Lab/start/css_float2.html) 선의 색이나 굵기는 자유롭게 선택하세요. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>float</title> <link rel="stylesheet" href="layout.css"> </head> <body> <header id="header">HEADER</header> <div id="container"> <div id="l_content"> <nav id="sidemenu">SIDEMENU</nav> <section id="content">CONTENT</section> </div> <aside id="banner">BANNER</aside> <footer id="footer">FOOTER</footer> </body> </html>
Lab (CSS/basic/Lab/start/layout.css) body > * { padding: 5px } #header { height: 50px; border: 1px solid black; text-align: center; #container { border: 1px solid black #l_content { float: left; border: 1px dashed blue #sidemenu { border: 5px groove red #content { float: right; border: 10px inset yellow; width: 300px; height: 100px } #banner { border: 1px dotted green #footer { height: 50px; border: 1px solid red; clear:both; #container:after { content: " "; display:block;
Lab (CSS/basic/Lab/end/layout.css) body > * { padding: 5px } #header { height: 50px; border: 1px solid black; text-align: center; #container { border: 1px solid black #l_content { float: left; border: 1px dashed blue #sidemenu { border: 5px groove red #content { float: right; border: 10px inset yellow; width: 300px; height: 100px } #banner { border: 1px dotted green #footer { height: 50px; border: 1px solid red; clear:both; #container:after { content: " "; display:block;
10. 다단 속성 다단 레이아웃 속성들을 이용하며 내용에 다단 속성을 지정할 수 있다. column-count 단의 수를 지정 다단 레이아웃 속성들을 이용하며 내용에 다단 속성을 지정할 수 있다. column-count 단의 수를 지정 column-gap 단과 단 사이의 여백을 지정 column-rule 구분선의 두께, 선의 모양, 색을 지정 브라우저마다 사용하는 속성의 이름이 다르다 . Vendor prefix(벤더 프리픽스)를 붙인다. IE10과 오페라는 속성이름을 그대로 사용한다. 크롬과 사파리는 -webkit-를 속성의 접두어로 사용한다. 파이어폭스는 -moz-를 속성의 접두어로 사용한다. 예 다음은 내용을 2단으로 보여준다. #content { column-count: 2; column-gap: 20px; column-rule: 1px solid #ddccb5; } 속성 익스플로러 크롬 사파리 파이어폭스 오페라 column-count -webkit-column-count -moz-column-count column-gap -webkit-column-gap -moz-column-gap column-rule -webkit-column-rule -moz-column-rule
11. CSS 추가규칙 @- rule @font-face 웹 폰트 설정 @font-face { font-family: ‘폰트 이름’; src: url(‘/content/font.eot’); } @import CSS 파일에서 다른 CSS파일을 추가 @import url(‘otherstyle.css’); @media 미디어 타입 및 속성 지정 <link rel=“stylesheet” href=“default.css” media=“print” /> @import url(default.css) print; @media screen { p { color: blue; } } 미디어 타입은 screen, print 등 이 있음 미디어 쿼리 속성 width, height, device-width, device-height orientation : 장치의 방향(portrait, landscape) device-aspect-ratio : 화면의 비율 color : 장치의 색상 비트 color-index : 장치에서 표현 가능한 최대 색상 개수 monochrome : 흑백 장치의 픽셀당 비트 수 resolution : 장치의 해상도
12. 미디어 쿼리 (1/5) @Media 쿼리란? CSS3은 CSS2.1에서 부터 적용된 미디어 타입을 개선하여, 좀 더 구체적인 조건으로 필요한 스타일을 적용할 수 있도록 확장하였는데 이를 미디어 쿼리라고 한다. 반응형 웹을 구현하는데 사용할 수 있다. <link> 엘리먼트의 media 속성의 값은 screen, print 등 미디어 타입이 오거나, 유효한 미디어 쿼리(Media Query) 가 올 수 있다. 디폴트는 all이며, 모든 미디어에서 링크가 유효함을 의미한다. media 속성은 IE 8버전 이하를 제외한 대부분의 브라우저에서 지원한다. media 속성은 사용자의 화면의 크기에 따라 다른 스타일로 보이게 할 경우 유용하게 사용될 수 있다. 뿐만 아니라 화면에 보이는 데이터와 프린트할 때 출력되는 데이터를 다르게 할 수도 있다. 문법 <link rel="stylesheet" type="text/css" media="screen" href="default.css"> <link rel="stylesheet" type="text/css" media="print" href="print.css"> 미디어 쿼리는 다음과 같이 CSS파일에서 사용될 수도 있다. @media screen { * { font-family: sans-serif } } only키워드는 뒤의 조건 만, not키워드는 뒤의 조건을 제외한 조건을 뜻 합니다. 미디어 쿼리를 지원하지 않는 브라우저는 only키워드가 쿼리 안의 내용이 무시되어 실행 되지 않습니다. only키워드는 큰 의미는 없지만 미디어 쿼리를 지원하는 브라우저를 대상으로 할 경우 적어주는 것이 좋습니다.
12. 미디어 쿼리 (2/5) 미디어타입 미디어 타입은 한 가지만 들어 올 수 있는 것은 아니다. 쉼표(,)를 통해서 미디어타입을 나열하면 나열한 모든 미디어 타입을 사용할 수 있다. 타입명 설명 all 모든 미디어 타입 aural 음성 합성장치 braille 점자 표시 장치 handheld 손으로 들고 다니면서 볼 수 있는 작은 스크린에 대응하는 용도 print 인쇄 용도 projection 프로젝터 screen 컴퓨터 스크린 tty 디스플레이 능력이 한정된 텔렉스, 터미널, 또는 수동 이동 장치등 고정 된 글자를 사용하는 미디어 tv 음성과 영상이 동시 출력 되는 장치 embrossed 페이지에 인쇄된 점자 표지 장치 한가지 주의할 점은 조건을 사용할 때 각 미디어타입에 맞는 조건을 사용해야 합니다. 가령 미디어 타입이 aural(음성합성장치) 인 경우 조건에 max-width:800px 와 같은 화면 넓이에 관한 조건은 음성 장치와 관련이 없어 사용할 수 없습니다. 물론 실제로 사용한다 해도 항상 부적합한 조건이기 때문에 내부의 CSS는 적용되지 않습니다.
12. 미디어 쿼리 (3/5) 속성 종류 속성명 값 설명 width 길이(px,em..) 웹페이지의 가로 길이를 판단합니다. height 웹페이지의 세로 길이를 판단합니다. device-width 단말기의 물리적인 가로길이를 판단합니다. 즉, 기기의 실제 가로 길이를 판단합니다. device-height 단말기의 물리적인 세로길이를 판단합니다. 즉, 기기의 실제 세로 길이를 판단합니다. orientation portrait | landscape 지면을 향한 기기의 방향 (세로보기, 가로보기) aspect-ratio ratio (ex: 16/9) width/height 비율을 판단합니다. device-aspect-ratio 단말기의 물리적인 화면 비율을 판단합니다. color 정수 기기가 표현할 수 있는 색에 관련된 정보 color-index monochrom resolution 해상도 dpi(인치당 도트 수) | dpcm(cm당 도트 수) 지원하는 해상도를 판단합니다. orientation: landscape/portrait aspect-ratio: 1 (360:360) color-index:1 (2개 색 사용) monochrom: 1 (흰색과 검은색 사이에 2개있음 즉 흰색과 검은색만 사용)
12. 미디어 쿼리 (4/5) /* 파일명 : layout.css */ #content { column-gap: 20px; column-rule: 1px solid #ddccb5; } @media screen and (min-width:1024px) { color: blue; column-count: 4; @media screen and (min-width:640px) and (max-width:1023px) { color: red; column-count: 3; @media screen and (min-width:420px) and (max-width:639px) { color: green; column-count: 2; @media screen and (max-width:419px) { column-count: 1; 미디어 속성별로 별도의 CSS파일을 만들 수 있지만 CSS파일에 미디어 속성을 지정할 수 있다. 이 예는 브라우저의 화면 폭에 따라 단의 수와 글자의 색이 다르게 보여지는 예이다. 다단속성의 경우 브라우저에서 따라 속성의 이름이 다를 수 있음에 주의하자. 화면 방향에 따른 속성 적용 시 orientation: portrait orientation: landscape <!-- 파일명 : media_layout.html --> <!DOCTYPE html> <html> <head> <meta charset="EUC-KR"> <title>media 속성</title> <link rel="stylesheet" href="layout.css"> </head> <body> <section id="content"> 내용(여기에 다단이 보여질 만큼 충분한 내용을 입력하자) </section> </body> </html>
12. 미디어 쿼리 (5/5) media 속성의 값이 print 일 경우에는 화면이 아닌 프린터로 출력할 때 스타일이 적용되도록 한다 . 다음 코드는 media 속성을 이용하여 프린트할 때 링크 문자열 옆에 연결되는 주소를 표시해 주도 록 하는 예이다. <!-- 파일명 : media_print.html --> <!DOCTYPE html> <html> <head> <meta charset="euc-kr"> <title>media print test</title> <link rel="stylesheet" href="print.css" media="print" /> </head> <body> <a href="http://www.consolbook.com">도서출판 콘솔</a><br> <a href="http://www.naver.com">네이버</a><br> <a href="http://www.daum.net">다음</a><br> </body> </html> /* 파일명 : print.css */ a:after { content: " (" attr(href) ") "; }
13. 웹 폰트(Web Font) (1/3) 홈페이지를 예쁘게 하기 위해 모든 것을 이미지로? 웹 페이지 디자인에서 타이포그라피가 중요해 지면서, 다양한 폰트를 이용하고자 하는 요구도 커가고 있다. 그러나, 웹 브라우저마다 다른 폰트 방식과 한글폰트 파일의 크기로 인해 웹 페이지에서 원활한 한글폰트 이용이 어려웠다. 이로인해 과거에는 웹페이지 디자이너가 한글폰트가 아닌 그림을 이용해 웹페이지에서 타이포그라피를 구현하는 것이 일반적인 현상이 되었다. 웹 폰트 웹폰트를 사용하면 방문자가 홈페이지에 접속면 브라우저가 웹폰트를 다운로드 받고 이 웹폰트가 적용된 페이지가 화면에 출력 된다. 종류 woff(Web Open Font Format) : 현재 웹 표준 진행중인 웹 오픈 폰트 포맷 IE9이상, 웹킷 기반 브라우저에서 사용 가능 폰트 컨버터 : http://people.mozilla.com/~jkew/woff/ ttf(True Type Font) : 일반적으로 사용하는 트루 타입 폰트 포맷 eot(Embedded Open Type) : 마이크로소프트에서 사용하는 포맷으로 익스플로러에서 잘 읽히는 eot 포맷 폰트 컨버터 : http://www.eotfast.com/ svg(Scalable Vector Graphics) : 2차원 백터 그래픽을 표현하기 위한 XML기반 파일형식 SVG폰트 샘플 : http://devfiles.myopera.com/articles/751/SVGfonts_in_HTML.html 폰트 컨버터 : http://xmlgraphics.apache.org/batik/index.html 일부 브라우저에서 동일 도메인 정책(Cross-Origin Resource Sharing policy)을 회피해야 함 헤더의 이름은 Access-Control-Allow-Origin, 값은 접속을 허가할 도메인이름 또는 * http://en.wikipedia.org/wiki/Cross-origin_resource_sharing EOT, WOFF, TTF CSS3의 @font-face는, 사실 이전(CSS2)에도 존재해 온 규칙이다. 다만, 우리가 흔히 웹폰트라 부르는 Embedded Open Type(.eot)포맷의 라이센스로 인해, 해당 포맷을 지원하는 유일한 웹브라우저인 인터넷 익스플로러에서만 사용되어 왔다. 그러나, 사파리 3.1의 릴리즈와 함께, 라이센스의 문제를 해결한 일반적인 TruType(.ttf)글꼴 및 OpenType(.otf)글꼴을 웹페이지에 웹폰트처럼 사용할 수 있게 되었다. 이렇게, 여타의 웹브라우저가 웹폰트 형식의 Downloadable Font를 다른 포맷으로 지원하기 시작하고, Web Open Font Format(.woff) 지원이 일반화 되자, @font-face가 다시 주목을 받고 있다. 한글 TruType(.ttf)글꼴을 웹 폰트로 활용하기에는, 저작권 문제를 제외하더도 한 가지 큰 부담이 있다. 바로 용량 문제이다. 수정/재배포/무료 사용이 가능한 '나눔고딕'글꼴의 경우에, 한자가 포함되지 않은 2.0버전은 2.23MB이며, 한자가 포함된 3.0버전은 4.13MB나 된다. 예로, 2.23MB의 '나눔고딕'글꼴을 (.eot)포맷으로 변환하면 846KB, (.woff)포맷으로 변환하면 981KB정도가 된다. Font API가 제공된다면 이러한 문제가 손쉽게 해결 되겠지만, 현재로는 한글 TruType(.ttf)글꼴의 용량 문제와 IE8의 미지원 등을 생각해 (.eot)포맷 및 (.woff)을 함께 사용하는 방법이 최선이며 또 일반적인 방법이 되리라 생각한다.
13. 웹 폰트(Web Font) (2/3) 웹폰트 사용법 페이지에 적용할 웹폰트를 FTP를 이용하여 자신의 계정에 올린 다음 *.css파일에 아래와 같이 설정한다. @font-face {font-family:웹폰트이름1; src:url(http://도메인/파일명1.woff);} @font-face {font-family:웹폰트이름2; src:url(http://도메인/파일명2.ttf);} http://www.creamundo.com/ 에서 폰트 하나를 다운로드 받은 폰트(SCRIPT 9.ttf)파일을 홈페이 지에 적용시켰다. 먼저 다운로드 받은 트루타입 글꼴을 웹폰트 변환 툴(sfnt2woff)을 이용하여 woff 파일로 변환 시킨다. 파일사이즈가 조금이라도 작으면 더 좋을 것이다. Sample Code(CSS파일) /* * * * * * html5demo * * * * * */ @font-face { font-family:'SCRIPT 9Web'; src: local('SCRIPT 9'),url(/css/fonts/script9.woff); } .html5demo { font-family:"SCRIPT 9Web"; Sample Code(HTML파일) <section id="content"> <h1>HTML5</h1> <p>테스트 중입니다..............</p> <section class="html5demo"> <article> <h1>Lecture</h1> <ul> <li>Java Programming, JDBC, Servlet/JSP, RMI, EJB
13. 웹 폰트(Web Font) (3/3) - Google Font API 구글에서는 웹 폰트를 라이브러리에 저장해 놓고 자유롭게 사용하도록 하고 있다. 앞에서 언급한 방법은 Google Font API와 유사한 방법이다. Sample Code <html> <head> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine"> <style> body { font-family: 'Tangerine', serif; font-size: 48px; } </style> </head> <body> <h1>Making the Web Beautiful!</h1> </body> </html> 폰트 이름을 알려면? http://www.google.com/webfonts#ChoosePlace:select 를 방문하여 원하는 폰트를 찾는다. CSS에 쉽게 적용하려면? @import url(http://fonts.googleapis.com/css?family=Sancreek);
13. 웹 폰트(Web Font) Web Font 예제는 랩 파일에서 아래 파일들을 실행시켜 본다. CSS/WebFont/index.html CSS/WebFont/webfont.css CSS/WebFont/googlefont.css
14. CSS3 border (1/2) border-radius 모서리를 둥글게 함. 왼쪽 상단 모서리부터 반지름으로 지정함 box-shadow 박스의 그림자 방향(inset은 안쪽 그림자), 가로 폭, 세로 폭, 퍼지는 정도, 그림자와 박스 거리, 그림자 색상 div { width: 100px; height: 100px; border: 12px solid blue; background-color: orange; border-top-left-radius: 60px 90px; border-bottom-right-radius: 60px 90px; box-shadow: 64px 64px 12px 40px rgba(0,0,0,0.4), 12px 12px 0px 8px rgba(0,0,0,0.4) inset; }
14. CSS3 border (2/2) border-image 경계선을 이미지로 대체 벤더 프리픽스가 붙는다. <style> div { border: 15px solid transparent; width: 250px; padding: 10px 20px; } #round { -webkit-border-image: url(border.png) 30 30 round; /* Safari 3.1-5 */ -o-border-image: url(border.png) 30 30 round; /* Opera 11-12.1 */ border-image: url(border.png) 30 30 round; #stretch { -webkit-border-image: url(border.png) 30 30 stretch; /* Safari 3.1-5 */ -o-border-image: url(border.png) 30 30 stretch; /* Opera 11-12.1 */ border-image: url(border.png) 30 30 stretch; </style>
15. transition IE10, Chrome, Safari 4.0, Opera, Firefox 5.0 transition property duration function delay 순서로 입력 transition-delay 몇 초 후 재생할지, 단위 s(초) transition-duration 몇 초 동안 재생할지, 단위 s(초) transition-property 어떤 속성을 변형할지 두 개 이상 설정하고 transition-duration에 각각 시간 설정 transition-timing-function 수치 변형 함수 지정 linear, ease, ease-in , ease-out, ease-in-out 0,0,1,1 .25,.1,.25,1 .42,0,1,1 0,0,.58,1 .42,0,.58,1 cubic-bezier(x0, y0, x1, y1) 1x1 크기의 사각형에서 두 점의 위치를 지정해 베지어 곡선을 만든다. http://www.cubic-bezier.com
15. CSS3 transition 예 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> div { width: 100px; height: 100px; background: red; transition-property: width; transition-duration: 2s; transition-timing-function: ease; } div:hover { width: 300px; </style> </head> <body> <div></div> </body> </html>
16. animation IE10, Chrome, Safari 4.0, Opera, Firefox 5.0 animation name duration function delay count direction 순서로 입력 animation-delay 몇 초 후에 재생할지, 단위 s(초) animation-direction 진행 방향 설정, alternate(from <-> to), normal(from -> to) animation-duration 몇 초 동안 재생할지, 단위 s(초) animation-iteration-count 반복 횟수 지정, 숫자, infinite animation-name 애니메이션 이름 지정, @keyframes의 이름을 지정 animation-play-state 재생 상태 지정, paused, running animation-timing-function 수치 변형 함수 지정 transition-timing-function과 동일 @keyframes 애니메이션이름 { from { } 50% { to {
16. animation (CSS/Animation/animation.css) * { margin: 0; padding: 0; } body { position: relative; } #box { position: absolute; width: 200px; height: 200px; border-radius: 100px; text-align: center; background: linear-gradient(0deg, #cb60b3 0%, #FF0000 100%); animation-name: rint; animation-duration: 2s; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: ease; } #box:hover { animation-play-state: paused; #box > h1 { line-height: 200px; @keyframes rint { from { left: 0; -webkit-transform: rotate(0deg); 50% { left: 500px; to { -webkit-transform: rotate(360deg);
16. animation (CSS/Animation/animation.html) <!DOCTYPE html> <html> <head> <title>CSS3 Animation</title> <link rel="stylesheet" href="animation.css" /> </head> <body> <div id="box"> <h1>Rotation</h1> </div> </body> </html>
17. transform transform 속성 translate(translateX, translateY), translateX(translateX), translateY(translateY) scale(scaleX, scaleY), scaleX(scaleX), scaleY(scaleY) skew(angleX, angleY), skewX(angleX), skewY(angleY) rotate(angleZ) 단위 deg 3차원 변환 함수 translate3d(translateX, translateY, translateZ), translateX, translateY, translateZ scale3d(scaleX, scaleY, scaleZ), scaleX, scaleY, scaleZ rotate3d(angleX, angleY, angleZ), rotateX, rotateY, rotateZ transform-origin 변환의 중심을 설정하는 스타일 속성 크기 단위 top, right, bottom, left, center transform-style 변환을 적용할 때 그 영향력이 자신에게만 적용될지 자손에게도 적용될 지 정하는 속성 flat : 후손의 3차원 속성을 무시한다. preserve-3d : 후손의 3차원 속성을 유지한다. backface-visibility visible : 평면의 후면을 보이게 만든다. hidden : 평면의 후면을 보이지 않게 한다. perspective 원근법 지정 속성
17. transform (CSS/Transform/cube.css) body { width: 200px; margin: 200px auto; -webkit-perspective: 400; } section { width: 200px; height: 200px; position: relative; animation: rint 3s linear 0s infinite; transform-style: preserve-3d; @keyframes rint { from { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); to { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); div { position: absolute; left: 0; top: 0; opacity: 0.3;
17. transform (CSS/Transform/cube.css) div:nth-child(1) { transform: rotateY( 0deg) translate3d(0px, 0px, 100px); background: red; } div:nth-child(2) { transform: rotateY( 90deg) translate3d(0px, 0px, 100px); background: green; div:nth-child(3) { transform: rotateY(180deg) translate3d(0px, 0px, 100px); background: blue; div:nth-child(4) { transform: rotateY(270deg) translate3d(0px, 0px, 100px); background: yellow; div:nth-child(5) { transform: rotateX( 90deg) translate3d(0px, 0px, 100px); background: brown; div:nth-child(6) { transform: rotateX(270deg) translate3d(0px, 0px, 100px); background: pink;
17. transform (CSS/Transform/cube.html) <!DOCTYPE html> <html> <head> <title>CSS3 Transform Basic</title> <link rel="stylesheet" href="cube.css" /> </head> <body> <section> <div></div> </section> </body> </html>
18. 스마트폰 레이아웃 스마트폰 레이아웃 주의사항 overflow 속성을 사용해서 스크롤을 넣을 수 없다. 스마트폰은 hover가 없다. 그래서 hover, active 등 상태 선택자를 사용할 때 주의해야 한다. 동위 선택자에 제한이 있다. 선택자에 ~를 지원하지 않는 브라우저가 있다. iphone에서는 label 태그에 onclick="" 속성을 부여해야 정상 동작한다. 그래디언트를 적용할 수 없을 수 있다. viewport META meta 태그를 title 태그 위에 선언하여 브라우저에 특별한 정보를 제공할 수 있다. name 속성의 값이 viewport인 경우 content 속성의 값을 이용해 브라우저 화면 설정과 관련된 정보를 제공한다. <meta name="viewport" content="width=device-width, intial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi" /> content 속성에 포함되는 viewport 속성들 width, height : 화면의 너비와 높이, 픽셀 값 또는 device-width, device-height initial-scale : 초기 확대 비율, 실수 값(0.25~10.0), 1.0 권장 user-scalable : yes/no, 확대 및 축소의 가능 여부 minimum-scale, maximum=scale : 최소확대비율, 최대확대비율, 실수 값, 0.25, 1.6 target-densitydpi : dpi 지정(medium-dpi), 브라우저에서 지원하지 않을 수 있음 참고 주소 http://developer.android.com/guide/webapps/targeting.html https://developer.apple.com/library/safari/documentation/appleapplications/reference/safarihtmlref/Articles/MetaTags.html
18. 스마트폰 레이아웃 <meta name="viewport" content="width=device-width, initial-scale=1.0"/> CSS/Lab/end/EmpForm.html 파일을 이용하여 적용 전/후의 화면을 테스트 함 Chrome 브라우저에서 개발자도구(F12)를 보이게 한 다음 Toggle device mode 버튼(스마 트폰 모양)을 클릭한다. 테스트하고 싶은 Device를 선택하여 화면의 크기를 선택할 수 있다. 개발자 도구(F12) 적용 전 적용 후
19. IE 때문에… 익스플로러 전용 조건부 주석 <!-- [if 조건식 IE 버전]> <! [endif]--> 조건식 lte, gte, lt, gt, !, &, | 예 <!-- [if lte IE 8]> 스타일시트 핵 스타일 시트 속성 앞에 _ 또는 *를 붙인다. _핵 : IE6에서 동작 *핵 : IE7에서 동작 브라우저는 인식하지 않는 속성은 무시한다. HTML5 엘리먼트 인식 https://code.google.com/p/html5shiv/ <!--[if lt IE 9]> <script src="dist/html5shiv.js"></script> <![endif]--> <script src=“http://html5shiv.googlecode.com/svn/trunk/html5.js”/> HTML5 태그 및 CSS3 선택자 지원 http://code.google.com/p/ie7-js/ <!--[if lt IE 9]> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> <![endif]-->
20. CSS3 Generator CSS3.0 Maker http://www.css3maker.com/ LayoutStyles.org http://layerstyles.org/ CSS3 Generator http://www.css3generator.com/ westciv CSS3 Sandbos http://westciv.com/tools/gradients/ CSS3 Playground http://css3.mikeplate.com/ CSS3.me http://www.css3.me/ CSS3 Button Generator http://css3button.net/ CSS Tricks Button Maker http://css-tricks.com/examples/ButtonMaker/ Ultimate CSS Gradient Generator http://www.colorzilla.com/ http://www.sitebee.co.uk/css3-page-layout-generators/ CSS Gradient Generator http://www.css3factory.com/linear-gradients/
Lab - 스타일시트 작성하기 주어진 HTML문서를 실행시키면 왼쪽 그림과 같다. CSS 파일을 작성하여 오른쪽 그림과 같이 표현되도록 하라. 스타일 속성의 값은 다음 페이지를 참고 스타일 적용 전 스타일 적용 후
Lab - 스타일시트 작성하기 본문(공통) 바깥여백 0, 안쪽여백 10px, 글꼴크기: 현재글꼴의 91.7% 컨텐트 2 컨텐트 float: left, 넓이 800px, 높이 100%; 컨텐트 안 float: left 3 5 페이지 이정표 블록 위 여백10px, 아래 경계선 1px 실선 #e1e1e1, 넓이 100%; 페이지 이정표 블록의 위치 상대, float: right; 페이지 이정표 목록 스타일 없음, 윗 여백 13px, 오른 여백 10px, 자간 -1px; 페이지 이정표 항목 글자크기 글꼴의 90%, 색 #727272, 양쪽여백 1px; 표(공통) 레이아웃 고정, 경계선 0, 경계선 사이 여백 0, 이웃하는 셀의 테두리선 겹침 7 테이블 헤더 위쪽 경계선 2px 실선 #4CA2C2, 아래 경계선 1px 실선 #4CA2C2, 오른쪽 경계선 1px 실선 #dddddd, 글자 색 #0f438a, 높이 32px 4 8 컨텐트 안의 목록 배경 아이콘 지정, 왼쪽여백 17px, 글꼴크기 1.2em, 자간 -1px, 위쪽 여백 15px 홀수번째 행 배경색 #eeeeee 9 테이블 셀 아래와 오른쪽 경계선 1px 실선 #dddddd, 높이 28px, 텍스트 공백유지 엔터무시, 셀 내에 글자 넘치면 숨김 6 본문안의 표 경계선 1px 실선 #dddddd, 글꼴크기 97%, 표 가운데 정렬, 넓이 800px 10 링크, 방문한 링크 밑줄 없음, 색 #666666; 마우스 오버 링크 밑줄, 색 #1f58b1
Lab - Solution (CSS/Lab/end/default.css) @charset "utf-8"; body { margin: 0; padding:10px; font-size: 0.917em; } table { table-layout:fixed; border-collapse:collapse; border-spacing:0; border:0; th,td { #middle_content{ float:left; height:100%; /* content area */ #cur_loc{ float:left; border-bottom:1px solid #e1e1e1; width:100%; top:10px; } #cur_loc_align{ float:right; position: relative; #cur_loc ul{ list-style-type:none; padding-top:13px; padding-right:10px; letter-spacing: -1px; #cur_loc li{ display:inline; font-size:0.9em; color:#727272; padding-right:1px; padding-left:1px;
Lab - Solution (CSS/Lab/end/default.css) #content_field{ float:left; } #content_field h2{ background: url("./bl_circle.gif") no-repeat left center; vertical-align: bottom; padding-left:17px; font-size: 1.2em; letter-spacing: -1px; margin-top:15px; .search_result_div{ top:20px; padding-bottom:0px; .search_result_div table { border:1px solid #dddddd; font-size:95%; table-layout: fixed; text-align: center; width: 800px; .search_result_div table th { background-color: #ecf2ff; border-bottom: 1px solid #4CA2C2; border-top: 2px solid #4CA2C2; border-right:1px solid #dddddd; color:#0f438a; height: 32px; } .search_result_div table tr:nth-of-type(odd){ background: #eeeeee; .search_result_div table td { border-bottom: 1px solid #dddddd; line-height: 28px; overflow: hidden; padding-left: 0px; white-space: nowrap; .search_result_div a { color: #666666; text-decoration:none; .search_result_div a:link, a:visited { .search_result_div a:hover { color: #1F58B1; text-decoration: underline;