3-1. css

www.javaspecialist.co.kr
CSS
1

1. CSS 문법
• 정의
– HTML문서 내에서 어떤 요소에 CSS의 스타일을 적용시킬 것인가 결정하기 위한 것
• CSS 문법
– CSS 파일은 선택자(Selector)와 { }로 둘러쌓인 속성:속성값 들로 이루어져 있다.
– 선택자는 일반적으로 스타일 정의하고 싶은 html태그 또는 요소들을 지정할 때 사용한다.
– 속성(property)은 변경하고 싶은 스타일 정보이며, 각 속성은 값(value)을 가질 수 있다.
– 속성과 값은 ":"(colon)으로 분리하고 "{"와 "}"(curly braces)로 둘러싸여 있다.
– 주석은 /*와 */로 둘러싼다.
h1 { color:blue; font-size:1.3em; }
Property Value Property Value
Declaration DeclarationSelector
2

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
• }
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)"/>
3. CSS를 사용하는 방법 (1/3)
<!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)
• 내부 스타일 시트는 하나의 문서에서만 사용하
는 스타일을 정의할 때 사용한다. 내부 스타일은
<head>태그 안에 <style>태그를 이용하여 정의
한다.
<head>
<style type="text/css">
hr {
color: sienna
}
p {
margin-left: 20px
}
body {
background-image: url("images/back.gif")
}
</style>
</head>
• 브라우저는 알려지지 않는 태그를 무시한다. 스타
일을 지원하지 않는 오래된 버전의 브라우저일 경우
<style>태그를 무시하고 <style>태그 안의 내용을 웹
페이지에 출력하게 된다. 이것을 방지하기 위해서 다
음과 같이 HTML 주석을 사용할 수 있다.
<head>
<style type="text/css">

</style>
</head>

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가지 속
성이 지정되었을 경우에
h3 {
text-align: right;
font-size: 20pt;
}
• 내부 스타일이 정의된 파일에서 <h3>태그를 사용
하였을 경우 다음처럼 color 속성은 외부 스타일의
정의를 따르게 된다. color 속성은 외부 스타일 시
트로부터 상속받고, text-alignment와 font-size 속
성은 내부 스타일 시트 정의를 따르게 된다.
 color: red;
 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; } 7

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; } 8

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>
9

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>
10

4. 선택자의 종류 (5/8)
• 속성 선택자 [name="value"]
– 가끔은 어떤 특정한 속성을 갖는 요소에만 스타일을 적용시킬 경우가 있다.
– [와 ]사이에 속성의 이름과 값을 지정한다.
– 예
• 다음은 텍스트 입력상자를 나타내는 <input> 태그에서 type 속성의 값이 text일 경우에
만 스타일을 지정하기 위한 예이다.
• input[type="text"] {background-color: blue}
– 속성의 값이 정확히 일치하지 않을 경우에 ~, ^, $, *를 사용 할 수 있다.
• 태그[속성~="값"]
– 속성값 중 공백으로 분리된 단어가 포함되어 있는지 체크한다.
• 태그[속성^="값"]
– 속성값 중 시작 부분의 문자를 체크한다.
• 태그[속성$="값"]
– 속성 값 중 끝 부분의 문자를 체크한다.
• 태그[속성*="값"]
– 속성값 전체에서 어느 하나라도 매치되는 부분이 있는지 체크한다.
11

4. 선택자의 종류 (6/8)
• 의사(擬似) 선택자(Pseudo Selector)
– 의사(pseudo) 선택자는 특별한 선택자에 스타일을 지정할 수 있는 선택자이다.
– :으로 시작하며 요소의 상태에 따라 다르게 적용되는 선택자이다.
– 사용 방법
• 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 선택자 뒤
에 선언되어야 한다.
12

• 순서 관련 의사선택자
• 익스플로러 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. 선택자의 종류 (7/8)

• :animated
– 선택되는 시점에서 애니메이션 진행 상태에 있는 progre
ss 요소를 선택한다.
• :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 상태 요소를 선택한다.
4. 선택자의 종류 (8/8)

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <title>가상클래스 선택자</title>
6. <style type="text/css">
7. div:hover {
8. background-color: red;
9. }
10. div:active {
11. background-color: blue;
12. }
13. input:focus {
14. background-color: purple;
15. }
16. /* 체크박스와 라디오는 배경색 지정이 안됩니다.*/
17. input:radio {
18. background-color: red;
19. }
20. input:disabled {
21. background-color: cyan;
22. }
23. </style>
24. </head>
25.<body>
26.<div>여기에 마우스를 올리면 색이 변합니다.</div>
27.<form>
28.아이디 : <input type="text" name="userid"><br>
29.비번 : <input type="password" name="password"
disabled><br>
30.성별 : <label><input type="radio" name="sex"
value="M">남자</label>
31.<input type="radio" name="sex" value="F">여자
<br>
32.<input type="submit">
33.</form>
34.</body>
35.</html>
선택자 (CSS/basic/pseudo.html)

CSS 스타일 속성
17

• 폰트(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
• 배경(Background)
– background, background-attachment,
background-color, background-image,
background-position, background-repeat
• 박스(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)
1. 스타일 속성
단위 설명
% 비율
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 #rgb
rgba(r, g, b, a) 익스플로러에서 동작 안함

2. 폰트 관련 속성
• 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와 같은 굵기이다.
19

2. 폰트 관련 속성 (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를
이용해야 한다.
20

3. 텍스트 관련 속성 (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는 익스플로러에서는 동작
하지 않는다.
21

3. 텍스트 관련 속성 (2/2)
• text-indent
– 문장의 첫 라인을 들여쓰기 한다.
– 고정된 길이(text-indent: 20px)로 설정하거나 문자의 비율(%)로 설정할 수 있다.
• text-transform
– 영문자를 대문자 또는 소문자로 변환하기 위해 사용한다.
– 값이 capitalize일 경우 각 단어의 첫 문자를 대문자로 나타낸다.
– uppercase를 사용하였을 경우에는 모든 문자를 영문자 대문자로 만들어준다.
– lowercase를 사용하였을 경우에는 모든 문자를 영문자 소문자로 만들어 준다.
• white-space
–공백이나 엔터가 어떻게 동작할 것인지를 설정한다.
– normal일 경우에는 공백과 엔터를 무시한다.
– pre를 사용하였을 경우에는 HTML 태그의 <pre>태그와 동일한 기능을 한다.
– nowrap을 사용하였을 경우에는 공백은 유지하며 줄 바꿈 기능을 하지 않는다.
• word-spacing
–단어 사이의 공백의 길이를 설정할 수 있다.
– 값이 normal일 경우가 있고 공백의 길이를 직접 지정할 수 있다.
• overflow
– 일정 공간에 글들이 넘칠 때 넘치는 것을 방지하는 속성이다.
– visible: 그냥 보여줌, scroll: 무조건 스크롤을 보여줌, auto: 넘쳤을 대 스크롤을 보여줌,
hidden: 숨김 등 속성값을 가질 수 있다.
– 표의 셀 폭이 글자를 모두 표현할 수 없을 경우 유용하게 사용된다.
22

4. 배경 관련 속성
• 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 를 값으로 사용할 수 있다.
23

4. 배경 관련 속성 (CSS/basic/css_background.html)
1. .list_icon {
2. margin-top:12px;
3. width:22px !important;
4. height:20px;
5. background-image:url(./images/icones.png);
6. background-repeat:no-repeat;
7. background-position:0 -70px;
8. }
9. .calendar_icon {
10. margin-top:9px;
11. height:23px;
12. text-indent:25px;
13. background-image:url(./images/images.png);
16. }
17. .cal_prev_button div {
18. height:20px;
22. left:5px;
23. }
24. .cal_next_button div {
25. height:20px;
29. right:5px;
30. }
./images/icones.png
CSS를 이용해서 하나의
아이콘 이미지로 여러 개
의 아이콘을 사용하는 예
이다.
문서 내에 작은 이미지 아
이콘이 많이 사용될 경우
유용하게 사용될 것이다.
24

1. <!doctype html>
2. <html>
3. <head>
4. <meta charset="utf-8">
5. <title>css background</title>
7. body {
8. margin-left:200px;
9. background:#5d9ab2 url('./images/img_tree.png') no-repeat top left;
10. }
11. .container {
12. text-align:center;
13. }
14. .center_div {
15. border:1px solid gray;
16. margin-left:auto;
17. margin-right:auto;
18. width:90%;
19. background-color:#d0f0f6;
20. text-align:left;
21. padding:8px;
22. }
23. .list_icon {
24. margin-top:12px;
25. width:22px !important;
26. height:20px;
27. background-image:url(./images/icons.png);
30. }
25

31. .calendar_icon {
32. margin-top:9px;
33. height:23px;
34. text-indent: 25px;
38. }
39. .cal_prev_button {
40. height:20px;
44. left:5px;
45. }
46. .cal_next_button {
47. height:20px;
51. right:5px;
52. }
53. </style>
54. </head>
26

55. <body>
56. <div class="container">
57. <div class="center_div">
58. <h1>안녕하세요.</h1>
59. <p>이 예제는 CSS 예제입니다. background 속성관련 예제를 실습하고 있습니다. </p>
60. </div>
61. </div>
62. <p></p>
63. <p class="list_icon"></p>
64. <p class="calendar_icon">달력 아이콘입니다.</p>
65. <p class="cal_prev_button"></p>
66. <p class="cal_next_button"></p>
67. </body>
68. </html>
27

5. Box 관련 속성 (1/3) - border (1/2)
• border 속성은 경계선의 스타일과 색상을 설정한다.
• 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과 같다.
28

5. Box 관련 속성 (1/3) - 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
29

5. Box 관련 속성 (2/3) - margin
• margin 속성은 여백을 설정하기 위해 사용한다.
• 여백은 경계선 밖에 설정되며 배경속성의 영향을 받지 않는다.
• 여백은 반드시 양수 값일 필요는 없다. 음수 값을 입력하여 사용할 수 있다.
• top, right, bottom, left 여백 모두 동일하게 설정할 수 도 있으며 각각 다르게 설정할 수 도 있
다.
• 익스플로러에서 <body> 태그의 기본 여백은 8픽셀(px)이다.
• margin
– top, right, bottom, left 순서대로 값을 입력하여 여백을 설정한다.
• margin-top, margin-right, margin-bottom, margin-left
– 해당하는 위치의 여백을 설정한다. 값은 auto로 하거나 여백을 직접 값으로 입력할 수 있다.
아니면 브라우저의 크기에 따른 비율(%)로 값을 설정할 수 있다.
30

5. Box 관련 속성 (3/3) - padding
• padding 속성은 HTML 요소와 경계선 사이의 여백을 설정할 때 사용한다.
• padding 속성은 margin 속성과는 다르게 음수 값은 사용할 수 없다.
• top, right, bottom, left 값을 동일하게 설정할 수 도 있으며, 각각 다른 값으로 설정할 수도 있
다.
• padding
– top, right, bottom, left 순서대로 값을 입력하여 내용과 경계선 사이의 여백을 설정한다.
• padding-top, padding-right, padding-bottom, padding-left
– 해당하는 위치의 여백을 설정한다. 값은 auto로 하거나 여백을 직접 값으로 입력할 수 있다.
아니면 브라우저의 크기에 따른 비율(%)로 값을 설정할 수 있다.
31

5. Box 관련 속성 (CSS/basic/css_box.html)
1. <!DOCTYPE html>
2. <html>
3. <head>
5. <title>Insert title here</title>
7. #border {
8. border: 1px solid #F00;
9. }
10. #padding {
11. border: 1px solid;
12. padding: 10px
13. }
14. #margin {
15. border: 1px solid;
16. margin: 10px;
17. text-decoration:
18. }
19. #radius {
20. border: 10px groove;
21. border-radius: 10px 10px 0 0;
22. }
23. </style>
24. </head>
25. <body>
26. <div id="border">경계선의 모양을 지정합니다.</div>
27. <div id="padding">경계선의 안쪽 여백을 지정합니다.</div>
28. <div id="margin">경계선의 바깥쪽 여백을 지정합니다.</div>
29. <div id="radius">모서리를 둥글게 지정합니다.</div>
30. </body>
31. </html>
32

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, ...) 등 이 있다.
33

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>
34

7. 테이블 관련 속성
• table 속성은 HTML 표의 설정을 변경할 때 사용한다.
• border-collapse
–표의 셀 구분을 한 줄로 할 것인지, 두 줄로 할 것인지를 설정한다.
– collapse 로 지정할 경우에는 서로 이웃하는 테이블이나 셀의 테두리 선을 겹쳐서 표현(셀
구분을 한 줄로) 하고, separate(디폴트) 하였을 경우에는 이웃하는 테이블이나 셀의 테두리
선을 분리시켜 표현(셀 구분을 두 줄로) 한다.
• table-layout
–테이블 셀의 크기를 고정시키기 위해 사용한다.
– fixed 로 하였을 경우에는 셀의 내용이 셀의 크기보다 많더라도 셀의 크기가 커지지 않는다.
• border-spacing
– 경계선의 여백의 크기를 지정한다.
• caption-side
–표제목이 보일 방향을 지정한다.
35

7. 테이블 관련 속성 (CSS/basic/css_table.html)
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="utf-8">
5. <title>CSS table 속성 : border-
collapse</title>
6. </head>
7. <body>
8. 첫 번째 표
9. <table cellpadding=0 cellspacing=0 border=0>
10. <tr><td bgcolor=black>
11. <table cellspacing=1 border=0 width=300>
12. <tr>
13. <td bgcolor=white>하나</td>
14. <td bgcolor=white>둘</td>
15. </tr>
16. <tr bgcolor=white>
17. <td>셋</td><td>넷</td>
18. </tr>
19. </table>
20. </td></tr>
21. </table><br>
22. 두 번째 표
23. <table border=1 cellspacing=0 width=300>
24. <tr>
25. <td>대~한민국</td>
26. </tr>
27. </table><br>
28. 세 번째 표
29. <table style="border-collapse:collapse"
border=1 cellspacing=0 width=300>
30. <tr>
31. <td>대~한민국
32. </td>
33. </tr>
34. </table>
35. </body>
36. </html>
표의 선 두께를 1
로 하기 위해 표 안
에 표를 넣어 표현
셀과 셀 사이의 여백
을 0으로 해도 선의
두께는 2픽셀로 표현
됨
border-collapse는 셀
과 셀 사이의 구분선을
1로 해줌

8. 레이어(CSS-Positioning) 관련 속성
• 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
– 요소의 순서를 설정한다.
– 숫자 값이 클수록 우선순위가 높고 앞쪽에 나타난다.
37

8. 레이어(CSS-Positioning) 관련 속성 (CSS/basic/css_positioning.html)
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="EUC-KR">
5. <title>레이어 속성</title>
6. <style>
7. .todo {
8. position: fixed;
9. top: 0;
10. right: 0;
11. width: 180px;
12. padding: 8px 12px;
13. font-size: 0.916em;
14. opacity: 0.1;
15. border: solid 1px #e1c400;
16. color: black;
17. background: #fff7c1;
18. }
19.
20. .todo:hover {
21. opacity: 1;
22. }
23. </style>
24. </head>
25.<body>
26.<p>내용이 들어갈 수 있습니다.</p>
27.... 생략...
28.<section class="todo">
29.클래스 속성의 값이 todo 인 곳은
30.브라우저 오른쪽 상단,
31.폭 180픽셀 크기,
32.위/아래 여백 8픽셀, 좌/우 여백 12픽셀,
33.선의 두께는 1픽셀, 실선, 선의 색은 #e1c400,
34.글자 크기는 0.916em, 색은 black,
35.배경색은 #fff7c1,
36.그리고 투명도 10% 로 보여지며,
37.
38.마우스가 해당 영역위에 올라가면
39.투명도를 1으로 해서 내용이 잘 보이도록 함.
40.</section>
41.</body>
42.</html>

• 값은 left 또는 right
• left 일 경우 박스를 왼쪽에 배치하고 나머지
컨텐츠는 그 주변을 흐르도록 한다.
• right 일 경우 박스를 오른쪽에 배치하고 나
머지 컨텐츠는 그 주변을 흐르도록 한다.
• 값은 left, right, both
• left일 경우 float된 박스 중 좌측이 짧을 때
좌측의 빈 공간부터 채워 내려온다.
• both일 경우 float 된 박스 중 어느 쪽도 채
우지 않고 다시 한 단으로 배치해 준다.(가
장 중요)
float clear
9. float 와 clear 속성

9. float 와 clear 속성 (CSS/basic/css_float.html)
40
1. <!DOCTYPE html>
2. <html>
3. <head>
5. <title>Insert title here</title>
7. div { width: 100px; height: 100px; border: 1px solid #000000; margin: 5px; float: left}
8. #redbox { background: red;}
9. #greenbox { background: green;}
10. #bluebox { background: blue;}
11. #yellowbox { background: yellow;}
12. #blackbox { background: black;}
13. p { clear: both; }
14. #content { width:600px; padding: 10px; border: 2px dashed black}
15. #content:after { content: " "; display: block; clear: both; }
16. </style>
17. </head>
18. <body>
19. <section id="content">
20. <h1>문서의 내용</h1>
21. <div id="redbox"></div>
22. <div id="greenbox"></div>
23. <div id="bluebox"></div>
24. <div id="yellowbox"></div>
25. <div id="blackbox"></div>
26. <p>after를 이해하시려면 여기를 삭제해 보세요</p>
27. </section>
28. </body>
29. </html>

Lab (CSS/basic/Lab/start/css_float2.html)
41
• 제공한 파일을 실행하여 아래 화면처럼 레이아웃이 배치되도록 CSS를 완성하세요.
• 선의 색이나 굵기는 자유롭게 선택하세요.
• <!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>
• </div>
• <footer id="footer">FOOTER</footer>
• </body>
• </html>

1. body > * {
2. padding: 5px
3. }
4. #header {
5. height: 50px;
6. border: 1px solid black;
7. text-align: center;
8. }
9. #container {
10. border: 1px solid black
11. }
12. #l_content {
13. float: left;
14. border: 1px dashed blue
15. }
16. #sidemenu {
17. float: left;
18. border: 5px groove red
19. }
20. #content {
21. float: right;
22. border: 10px inset yellow;
23. width: 300px; height: 100px
24. }
25. #banner {
26. float: right;
27. border: 1px dotted green
28. }
29. #footer {
30. height: 50px;
31. border: 1px solid red;
32. clear:both;
33. }
34. #container:after {
35. content: " ";
36. display:block;
37. clear:both;
38. }
Lab (CSS/basic/Lab/start/layout.css)
42

1. body > * {
2. padding: 5px
3. }
4. #header {
5. height: 50px;
6. border: 1px solid black;
8. }
9. #container {
10. border: 1px solid black
11. }
12. #l_content {
13. float: left;
14. border: 1px dashed blue
15. }
16. #sidemenu {
17. float: left;
18. border: 5px groove red
19. }
20. #content {
21. float: right;
22. border: 10px inset yellow;
23. width: 300px; height: 100px
24. }
25. #banner {
26. float: right;
27. border: 1px dotted green
28. }
29. #footer {
30. height: 50px;
31. border: 1px solid red;
32. clear:both;
33. }
34. #container:after {
35. content: " ";
36. display:block;
37. clear:both;
38. }
Lab (CSS/basic/Lab/end/layout.css)
43

10. 다단 속성
• 다단 레이아웃 속성들을 이용하며 내용에 다단
속성을 지정할 수 있다.
• 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 column-count -webkit-column-count -webkit-column-count -moz-column-count -webkit-column-count
column-gap column-gap -webkit-column-gap -webkit-column-gap -moz-column-gap -webkit-column-gap
column-rule column-rule -webkit-column-rule -webkit-column-rule -moz-column-rule -webkit-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 : 장치의 해상도
45

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키워드는 큰 의미는 없지만 미디어
쿼리를 지원하는 브라우저를 대상으로 할 경우 적어주는 것이 좋습니다.
46

12. 미디어 쿼리 (2/5)
47
• 미디어타입
– 미디어 타입은 한 가지만 들어 올 수 있는 것은 아니다. 쉼표(,)를 통해서 미디어타입을 나
열하면 나열한 모든 미디어 타입을 사용할 수 있다.
타입명 설명
all 모든 미디어 타입
aural 음성 합성장치
braille 점자 표시 장치
handheld 손으로 들고 다니면서 볼 수 있는 작은 스크린에 대응하는 용도
print 인쇄 용도
projection 프로젝터
screen 컴퓨터 스크린
tty
디스플레이 능력이 한정된 텔렉스, 터미널, 또는 수동 이동 장치등 고정 된 글자를 사용하
는 미디어
tv 음성과 영상이 동시 출력 되는 장치
embrossed 페이지에 인쇄된 점자 표지 장치

12. 미디어 쿼리 (3/5)
48
• 속성 종류
속성명 값 설명
width 길이(px,em..) 웹페이지의 가로 길이를 판단합니다.
height 길이(px,em..) 웹페이지의 세로 길이를 판단합니다.
device-width 길이(px,em..)
단말기의 물리적인 가로길이를 판단합니다. 즉, 기기의 실제 가
로 길이를 판단합니다.
device-height 길이(px,em..)
단말기의 물리적인 세로길이를 판단합니다. 즉, 기기의 실제 세
로 길이를 판단합니다.
orientation portrait | landscape 지면을 향한 기기의 방향 (세로보기, 가로보기)
aspect-ratio ratio (ex: 16/9) width/height 비율을 판단합니다.
device-aspect-rati
o
ratio (ex: 16/9) 단말기의 물리적인 화면 비율을 판단합니다.
color
정수 기기가 표현할 수 있는 색에 관련된 정보color-index
monochrom
resolution
해상도 dpi(인치당 도
트 수) | dpcm(cm당
도트 수)
지원하는 해상도를 판단합니다.

12. 미디어 쿼리 (4/5)
1. /* 파일명 : layout.css */
2. #content {
3. column-gap: 20px;
4. column-rule: 1px solid #ddccb5;
5. }
6.
7. @media screen and (min-width:1024px) {
8. #content {
9. color: blue;
10. column-count: 4;
11. }
12. }
13.
14. @media screen and (min-width:640px) and (max-width:1023px) {
15. #content {
16. color: red;
18. }
19. }
20.
21. @media screen and (min-width:420px) and (max-width:639px) {
22. #content {
23. color: green;
25. }
26. }
27.
28. @media screen and (max-width:419px) {
29. #content {
30. color: green;
32. }
33. }
1. 
2. <!DOCTYPE html>
3. <html>
4. <head>
5. <meta charset="EUC-KR">
6. <title>media 속성</title>
7. <link rel="stylesheet" href="layout.css">
8. </head>
9. <body>
10. <section id="content">
11. 내용(여기에 다단이 보여질 만큼 충분한 내용을 입력하
자)
12. </section>
13. </body>
14. </html>
미디어 속성별로 별도의 CSS파일을 만
들 수 있지만 CSS파일에 미디어 속성을
지정할 수 있다. 이 예는 브라우저의 화
면 폭에 따라 단의 수와 글자의 색이 다
르게 보여지는 예이다.
다단속성의 경우 브라우저에서 따라 속
성의 이름이 다를 수 있음에 주의하자.
화면 방향에 따른 속성 적용
시
orientation: portrait
orientation: landscape
49

12. 미디어 쿼리 (5/5)
• media 속성의 값이 print 일 경우에는 화면이 아닌 프린터로 출력할 때 스타일이 적용되도록
한다.
• 다음 코드는 media 속성을 이용하여 프린트할 때 링크 문자열 옆에 연결되는 주소를 표시해
주도록 하는 예이다.
1. 
2. <!DOCTYPE html>
3. <html>
4. <head>
5. <meta charset="euc-kr">
6. <title>media print test</title>
7. <link rel="stylesheet" href="print.css" media="print" />
8. </head>
9. <body>
10. <a href="http://www.consolbook.com">도서출판 콘솔</a><br>
11. <a href="http://www.naver.com">네이버</a><br>
12. <a href="http://www.daum.net">다음</a><br>
13. </body>
14. </html>
1. /* 파일명 : print.css */
2. a:after {
3. content: " (" attr(href) ") ";
4. }
50

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_sharing51

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
52

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);
53

13. 웹 폰트(Web Font)
• Web Font 예제는 랩 파일에서 아래 파일들을 실행시켜 본다.
– CSS/WebFont/index.html
– CSS/WebFont/webfont.css
– CSS/WebFont/googlefont.css
54

14. CSS3 border (1/2)
55
• 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)
56
• 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
• 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
57

16. animation
• IE10, Chrome, Safari 4.0, Opera, Firefox 5.0
• 벤더 프리픽스가 붙는다.
• animation
• 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 {
}
}
벤더 프리픽스가 붙을 수 있음
크롬 브라우저에서는
@-webkit-keyframes 을 사용한
다.
58

16. animation (CSS/Animation/animation.css)
1. * { margin: 0; padding: 0; }
2. body { position: relative; }
3. #box {
4. position: absolute;
5. width: 200px; height: 200px;
6. border-radius: 100px;
8. background: linear-gradient(0deg, #cb60b3 0%, #FF0000 100%);
9. background: -webkit-linear-gradient(top, #cb60b3 0%, #FF0000 100%);
10.
11. animation-name: rint;
12. -webkit-animation-name: rint;
13. -webkit-animation-duration: 2s;
14. -webkit-animation-iteration-count: infinite;
15. -webkit-animation-direction: alternate;
16. -webkit-animation-timing-function: ease;
17. }
18. #box > h1 {
19. line-height: 200px;
20. }
21. @-webkit-keyframes rint {
22. from {
23. left: 0;
24. -webkit-transform: rotate(0deg);
25. }
26. 50% {
27. left: 500px;
28. }
29. to {
30. left: 500px;
31. -webkit-transform: rotate(360deg);
32. }
33. }
59

16. animation (CSS/Animation/animation.html)
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>CSS3 Animation</title>
5. <link rel="stylesheet" href="animation.css" />
6. </head>
7. <body>
8. <div id="box">
9. <h1>Rotation</h1>
10. </div>
11. </body>
12. </html>
60

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
– 원근법 지정 속성
61

17. transform (CSS/Transform/cube.css)
1. body {
2. width: 200px;
3. margin: 200px auto;
4. -webkit-perspective: 400;
5. }
6.
7. section {
9. position: relative;
10. -webkit-animation: rint 3s linear 0s infinite;
11. -webkit-transform-style: preserve-3d;
12. }
13.
14. @-webkit-keyframes rint {
15. from {
16. -webkit-transform: rotateX( 0deg) rotateY( 0deg) rotateZ( 0deg);
17. }
18. to {
19. -webkit-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
20. }
21. }
22.
23. div {
25. position: absolute; left: 0; top: 0;
26. opacity: 0.3;
27. }
28.
62

17. transform (CSS/Transform/cube.css)
29. div:nth-child(1) {
30. -webkit-transform: rotateY( 0deg) translate3d(0px, 0px, 100px);
31. background: red;
32. }
34. -webkit-transform: rotateY( 90deg) translate3d(0px, 0px, 100px);
35. background: green;
36. }
38. -webkit-transform: rotateY(180deg) translate3d(0px, 0px, 100px);
39. background: blue;
40. }
42. -webkit-transform: rotateY(270deg) translate3d(0px, 0px, 100px);
43. background: yellow;
44. }
46. -webkit-transform: rotateX( 90deg) translate3d(0px, 0px, 100px);
47. background: brown;
48. }
50. -webkit-transform: rotateX(270deg) translate3d(0px, 0px, 100px);
51. background: pink;
52. }
63

17. transform (CSS/Transform/cube.html)
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>CSS3 Transform Basic</title>
5. <link rel="stylesheet" href="cube.css" />
6. </head>
7. <body>
8. <section>
9. <div></div>
10. <div></div>
11. <div></div>
12. <div></div>
13. <div></div>
14. <div></div>
15. </section>
16.</body>
17.</html>
64

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/safarihtml
ref/Articles/MetaTags.html
65

18. 스마트폰 레이아웃
66
• <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 때문에…
• 익스플로러 전용 조건부 주석
– 
– 조건식
• lte, gte, lt, gt, !, &, |
• 예
– 
– <script src=“http://html5shiv.googlecode.com/svn/trunk/html5.js”/>
• HTML5 태그 및 CSS3 선택자 지원
– http://code.google.com/p/ie7-js/
– 
67

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/
68

Lab - 스타일시트 작성하기
• 주어진 HTML문서를 실행시키면 왼쪽 그림과 같다.
• CSS 파일을 작성하여 오른쪽 그림과 같이 표현되도록 하라.
스타일 적용 전 스타일 적용 후
스타일 속성의 값은 다음 페이지를 참고
69

Lab - 스타일시트 작성하기
본문(공통)
바깥여백 0, 안쪽여백 10px, 글꼴크기: 현재글꼴의 91.7%
표(공통)
레이아웃 고정, 경계선 0, 경계선 사이 여백 0, 이웃하는 셀의 테두리선 겹침
컨텐트
float: left,
넓이 800px,
높이 100%;
컨텐트 안
float: left
1
5
2
페이지 이정표 블록
위 여백10px, 아래 경
계선 1px 실선
#e1e1e1, 넓이 100%;
페이지 이정표
블록의 위치 상대,
float: right;
페이지 이정표 목록
스타일 없음, 윗 여백
13px, 오른 여백 10px,
자간 -1px;
페이지 이정표 항목
글자크기 글꼴의 90%,
색 #727272,
양쪽여백 1px;
3
컨텐트 안의 목
록
배경 아이콘 지
정, 왼쪽여백
17px, 글꼴크
기 1.2em, 자간
-1px, 위쪽 여
백 15px
4
테이블 헤더
위쪽 경계선 2px 실선
#4CA2C2,
아래 경계선 1px 실선
#4CA2C2,
오른쪽 경계선 1px 실선
#dddddd,
글자 색 #0f438a, 높이 32px
7
본문안의 표
경계선 1px 실
선 #dddddd,
글꼴크기 97%,
표 가운데 정렬,
넓이 800px
6
테이블 셀
아래와 오른쪽 경계선
1px 실선 #dddddd,
높이 28px,
텍스트 공백유지 엔터
무시,
셀 내에 글자 넘치면 숨
김
9
링크, 방문한 링크
밑줄 없음,
색 #666666;
마우스 오버 링크
밑줄,
색 #1f58b1
10
홀수번째 행
배경색
#eeeeee
8
70

Lab - Solution (CSS/Lab/end/default.css)
1. @charset "utf-8";
2.
3. body {
4. margin: 0;
5. padding:10px;
7. }
8.
9. table {
10. table-layout:fixed;
11. border-collapse:collapse;
12. border-spacing:0;
13. border:0;
14. }
15. th,td {
16. border-collapse:collapse;
17. }
18.
19. #middle_content{
20. float:left;
21. height:100%;
22. }
22. /* content area */
23. #cur_loc{
24. float:left;
25. border-bottom:1px solid #e1e1e1;
26. width:100%;
27. top:10px;
28. }
29. #cur_loc_align{
30. float:right;
31. position: relative;
32. }
33. #cur_loc ul{
34. list-style-type:none;
35. padding-top:13px;
36. padding-right:10px;
37. letter-spacing: -1px;
38. }
39. #cur_loc li{
40. display:inline;
41. font-size:0.9em;
42. color:#727272;
43. padding-right:1px;
44. padding-left:1px;
45. }

Lab - Solution (CSS/Lab/end/default.css)
47.
48. #content_field{
49. float:left;
50. }
51. #content_field h2{
52. background: url("./bl_circle.gif") no-repeat
left center;
53. vertical-align: bottom;
54. padding-left:17px;
56. letter-spacing: -1px;
57. margin-top:15px;
58. }
59.
60. .search_result_div{
61. float:left;
62. top:20px;
63. padding-bottom:0px;
64. }
65.
66. .search_result_div table {
67. border:1px solid #dddddd;
68. font-size:95%;
69. table-layout: fixed;
71. width: 800px;
72. }
73. .search_result_div table th {
74. background-color: #ecf2ff;
75. border-bottom: 1px solid #4CA2C2;
76. border-top: 2px solid #4CA2C2;
77. border-right:1px solid #dddddd;
78. color:#0f438a;
79. height: 32px;
80. }
81. .search_result_div table tr:nth-of-type(odd){
82. background: #eeeeee;
83. }
84. .search_result_div table td {
85. border-right:1px solid #dddddd;
86. border-bottom: 1px solid #dddddd;
87. line-height: 28px;
88. overflow: hidden;
89. padding-left: 0px;
90. white-space: nowrap;
91. }
92. .search_result_div a {
93. color: #666666;
94. text-decoration:none;
95. }
96. .search_result_div a:link, a:visited {
97. color: #666666;
98. text-decoration:none;
99. }
100. .search_result_div a:hover {
101. color: #1F58B1;
102. text-decoration: underline;
103. }

3-1. css

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (17)

Destaque

Destaque (20)

Semelhante a 3-1. css

Semelhante a 3-1. css (20)

Mais de JinKyoungHeo

Mais de JinKyoungHeo (8)

3-1. css

Notas do Editor