4. 1.1 CSS 개요
• Cascading Style Sheets의 약자
• “계단형 스타일시트”라고 한다.
• CSS의 표준화 작업과 신기술 및 팁을 제공하는
W3C에서 1996년 CSS레벨1 발표
• 1998년 CSS레벨2 발표
• W3C
www.w3.org/style/css
4
5. 1.1 CSS 개요
• CSS 사용 목적
– HTML의 제약성에서 탈피한다.
– 홈페이지 전체에 통일감과 일관성을 유지한다.
– 홈페이지 제작 시간을 감소시키고 문서의 용량을
줄여준다.
– 기존 홈페이지의 개념을 넘는 DHTML, XML의 기
초가 된다.
5
6. 1.1 CSS 개요
• CSS 삽입방법 세 가지
– 태그 내부 삽입형(In-line style): 태그에 직접 붙이는 방법
<태그 Style="속성:값; 속성:값; ">
– 문서 내 지정형(Embedding style): style 태그로 감싸는 방법
<Styel type="text/css">
<!-스타일내용
//-->
</Style>
– 외부 문서 삽입형(link style): 링크로 연결해 주는 방법
<link rel=stylesheet href="스타일 외부 파일 전체경로"
type="text/css">
6
8. 2.1 선택자 개요
• 선택자는 특정한 HTML 태그를 선택할 때에 사용하는 기능
– 위치를 정해야 정해진 녀석들의 스타일을 바꿀 수 있다.
• 선택자를 사용해 태그를 선택하면 원하는 스타일과 기능을
적용할 수 있다.
• 스타일을 적용할 때에 선택자는 다음 위치에 사용한다.
8
9. 2.2 CSS 선택자의 종류
• 기본 형식
<Style type="text/css">
선택자{속성:값}
</Style>
1. 태그 선택자 또는 „type 선택
자‟
2. 클래스(class) 선택자
3. 아이디(ID) 선택자
4. 복수 선택자
5. 자손(descendant) 선택자
6. 태그 선택자와 클래스 선택
자 연계
7. 태그 선택자와 아이디 선택
자를 연계
8. 가상클래스 선택자
9
10. 2.3 전체 선택자
• HTML 문서 안의 모든 태그를 선택할 때는 전체 선택
자를 사용한다.
• 다음 코드는 문서 안의 모든 태그의 color 속성을 red
로 지정한다.
10
17. 2.7 속성 선택자
• 속성 선택자는 특정한 속성을 가진 태그를 선택할 때
사용한다.
– 특정 태그 중에서 이러이러한 속성을 가지는 녀석들을 골
라내는데 사용한다.
• 기본 속성 선택자
– 기본 속성 선택자는 특정한 속성의 존재 유무와 속성 값을
판별할 때에 사용한다.
17
27. 2.10 반응 선택자
• 반응 선택자
– 반응 선택자는 사용자의 반응으로 생성되는 특정한
상태를 선택하는 선택자이다.
• 예) 마우스가 올려졌을 때, 클릭이 됐을 때
– 사용자가 마우스를 특정한 태그 위에 올리면 hover
상태가 적용되고 클릭하면 active 상태가 적용된다.
27
28. 2.10 반응 선택자
• 다음과 같은 방법으로 사용한다.
– 코드를 실행하고 마우스를 올리고
클릭하면 다음과 같이 색상이
변경된다.
28
29. 2.11 상태 선택자
• 상태 선택자
– 상태 선택자는 입력 양식의 상태를 선택할 때 사용하는 선
택자이다.
– 다음과 같은 상태를 check 상태라고 한다.
– 다음과 같은 상태를 focus 상태라고 한다.
29
46. 3.1 CSS3 단위
• CSS는 각각의 스타일 속성에 다양한 값을 입력한
다.
• 키워드 단위
– 키워드는 CSS를 개발할 때에 이미 지정된 단어들을 의미한다.
– 통합 개발 환경을 사용할 때에 다음과 같이 확인할 수 있다.
46
47. 3.1 CSS3 단위
• 크기 단위
– CSS3에서 사용하는 크기 단위는 %, em, cm, mm, inch, px이다.
– 크기 단위는 다음과 같은 방법으로 사용한다.
47
48. 3.1 CSS3 단위
• 색상 단위
– 색상을 적용하는 가장 기본 방법은 키워드를 사용하는 것이다.
– CSS3는 다음과 같은 색상 단위를 사용해 색상을 지정한다.
48
49. 3.1 CSS3 단위
• URL 단위
– 파일을 지정할 때는 URL 단위를 사용한다.
– URL 단위는 다음과 같은 방법으로 사용한다.
– URL 내부에는 상대 경로, 절대 경로가 모두 사용된다.
49
50. 3.2 가시 속성
• display 속성
– display 속성은 태그의 영역 표현 방식을 지정하는 속성이다.
– 다음 키워드를 입력할 수 있다.
– 다음과 같은 방법으로 사용한다.
50
51. 3.2 가시 속성
– none 키워드를 사용하면 태그가 완전히 화면에서 제거된
다.
– block 키워드를 사용하면 태그가 한 줄을 차지한다.
– inline 키워드 또는 inline-block 키워드를 사용하면 한 줄에
들어간다.
51
52. 3.2 가시 속성
– inline 키워드를 사용할 때와 inline-block 키워드를 사용할
때의 차이점은 margin 속성과 padding 속성을 적용할 때
에 알 수 있다.
– inline 키워드를 사용하면 margin 속성과 padding 속성이
좌우로만 적용된다.
– inline-block 키워드를 사용하면 margin 속성과 padding 속
성이 상하좌우로 적용된다.
52
53. 3.2 가시 속성
• visibility 속성
– 대상을 보이거나 보이지 않게 지정하는 속성이다.
– display 속성을 none 키워드로 지정하는 것과 달
리 영역을 유지한 채로 보이지 않게만 만든다.
53
54. 3.2 가시 속성
• opacity 속성
– 대상의 투명도를 지정하는 속성이다.
– 0부터 1 사이의 숫자를 입력한다. (0은 투명이고 1은 불투명이다.)
– 다음과 같은 방법으로 사용한다.
– 코드를 실행하면 다음과 같이 출력한다.
54
55. 3.3 박스 속성
• 박스 속성은 웹 페이지의 레이아웃을 구성할 때 가장
중요한 속성이다.
• 다음 속성을 모두 합쳐 박스 속성이라고 이야기한다.
55
56. 3.3 박스 속성
• width 속성과 height 속성
– width 속성과 height 속성은 글자를 감싸는 영역의 크기를
지정하는 속성이다.
– 다음과 같은 방식으로 사용한다.
56
58. 3.3 박스 속성
– margin 속성과 padding 속성은 width 속성과
height 속성과 별도로 적용된다.
– 박스 크기는 다음과 같은 공식을 갖는다.
58
59. 3.3 박스 속성
• box-sizing 속성
– width 속성과 height 속성은 글자를 감싸는 영역의
크기를 지정하는 속성이다. box-sizing 속성은 이
러한 공식을 변경할 수 있는 CSS3 속성이다.
– 다음과 같은 키워드를 입력할 수 있다.
59
60. 3.3 박스 속성
– 각각의 키워드를 적용할 때에 width 속성과 height 속성의
적용 범위가 다음과 같이 변경된다.
– content-box 키워드의 경우 박스의 크기를 다음 공식으로
구한다.
– border-box 키워드의 경우 박스의 크기를 다음 공식으로
구한다.
60
62. 3.4 테두리 속성
• border-style 속성
– 테두리의 형태를 지정하는 속성이다.
– 다음 키워드를 적용한다.
62
63. 3.4 테두리 속성
• border-width, border-style, border-color 속성을 사용
해야 테두리를 생성할 수 있다.
– 각각의 속성은 다음과 같은 방법으로 사용한다.
– 코드를 실행하면 다음과 같이 출력한다.
63
64. 3.4 테두리 속성
• 방금 살펴본 3가지 테두리 속성은 border 속성으로 한번에 입
력할 수 있다.
• border-radius 속성
– border-radius 속성을 사용하면 테두리가 둥근 사각형 또는 원을 만들
수 있다.
– 다음과 같은 방식으로 사용한다.
64
65. 3.4 테두리 속성
– 코드를 실행하면 다음 그림처럼 출력한다.
– 각각의 테두리의 둥글기를 설정할 수도 있다.
65
66. 3.5 배경 속성
• background-image 속성
– 배경에 넣을 그림을 지정하는 속성이다.
– 다음과 같은 방법으로 사용한다.
66
67. 3.5 배경 속성
• 배경 이미지 속성
속성
background-color
설명
배경색
값
yellow, transparent
background-image
배경 이미지 지정
url(파일명)
background-repeat
배경 이미지 정렬
repeat, repeat-x, repeat-y, no-repeat
background-position
배경 이미지 위치
80%, 90px, left, center, right, top, center, bottom
backgroundpositionX
가로축 고정 위치
left, center, right
backgroundpositionY
세로축 고정 위치
top, center, bottom
backgroundattachment
이미지 고정
fixed, scroll
background
배경 이미지 한 번에 지
정
url( 파 일 명 ),
repeat-x,
repeat-y,
norepeat, left, center, right, top, center, bottom, fixed, scrol
l
67
80. 3.6 폰트 속성
• font-size 속성
– 글자의 크기를 지정할 때에 사용하는 속성이다.
– 다음과 같은 방법으로 사용한다.
80
81. 3.6 폰트 속성
• font-family 속성
– 폰트를 지정하는 속성이다.
– 다음과 같이 폰트 이름을 입력해서 사용한다.
81
82. 3.6 폰트 속성
– 사용자의 컴퓨터에 폰트가 없으면 폰트가 적용되지 않는다.
– 만약을 대비해 여러 개의 폰트를 연속적으로 입력한다.
– 하지만 다국적 웹 페이지를 제공할 경우 사용자에게 무슨 폰트가 있는
지 일일이 확인할 수 없다.
– 이러한 경우에는 generic-family 폰트를 사용한다.
– generic-family 폰트는 웹 브라우저에서 미리 지정하고 있는 폰트이다.
82
83. 3.6 폰트 속성
– Serif 폰트(명조체), Sans-serif 폰트(고딕체), Mono space
폰트(고정 폭 글꼴)를 사용할 수 있다.
– Generic family font는 다음과 같은 방법으로 사용한다.
83
91. 3.7 위치 속성
• z-index 속성
– HTML 태그는 아래 입력한 태그가
위로 올라온다.
– 이러한 순서를 변경할 때에 z-index
속성을 사용한다.
– 큰 값을 입력할 수록 위로 올라온다.
– 다음과 같은 방법으로 사용한다.
91
92. 3.7 위치 속성
• 위치 속성과 관련된 공식
– 현재 만들고 있는 예제에서 다음과 같은 코드의 실행 결과를 예측해보
자
– 코드를 실행하면 다음과 같이 출력한다.
92
93. 3.7 위치 속성
– 다음과 같은 문제를 발견할 수 있다.
• h1 태그 두 개가 붙어 있다(div 태그가 영역을 차지하지 않는다).
• 색상이 적용된 상자가 자신의 부모를 기준으로 위치를 잡지 않는
다.
– 이를 해결할 때는 다음과 같은 공식을 사용한다.
• 자손에게 position 속성을 absolute 키워드로 적용하면 부모에게
height 속성을 입력한다.
• 자손의 position 속성을 absolute 키워드로 적용하면 부모의
position 속성을 relative 키워드로 적용한다.
– 이를 사용하면 다음과 같이 코드를 적용할 수 있다.
93
94. 3.7 위치 속성
– 코드를 실행하면 다음 그림처럼 출력한다.
• overflow 속성
– 내부의 요소가 부모의 범위를 벗어날 때 어떻게 처리할지 지정하는 속
성이다.
– 다음과 같은 키워드를 입력한다.
94
95. 3.7 위치 속성
– 다음과 같은 방식으로 사용한다.
– 각각의 키워드를 적용할 때에 다음과 같이 실행된다.
95
96. 3.8 float 속성
• float 속성 개요
– 웹 페이지 레이아웃을 구성할 때에 반드시 사용하는 속성
– 부유하는 대상을 만들 때에 사용하는 속성이다.
– 다음 키워드를 입력한다.
– float 속성을 사용하면 다음과 같이 이미지가 글자 위를 부유하게 만들
수 있다.
96
97. 3.8 float 속성
• float 속성을 사용한 수평 정렬
– 동위 위치에 있는 태그에 모두 float 속성을 적용하면 수평 정렬된다.
– 다음 코드에서 div.box 태그는 동위 위치에 있다.
– 이러한 태그에 다음과 같은 스타일을 적용한다.
97
98. 3.8 float 속성
– 코드를 실행하면 다음과 같이 수평 정렬된다.
– right 키워드를 적용했을 경우에는 위에 위치한 태그가 오
른쪽에 붙는 다는 것을 주의한다.
98
99. 3.9 그림자 속성
• text-shadow 속성
– 글자에 그림자를 부여하는 속성이다.
– 다음과 같은 형태로 값을 입력한다.
– 다음과 같이 사용한다.
99
100. 3.9 그림자 속성
• box-shadow 속성
– 박스에 그림자를 부여하는 속성이다.
– 다음과 같은 형태로 값을 입력한다.
– 다음과 같이 사용한다.
100
101. 3.9 그림자 속성
• CSS3 Generator
– text-shadow 속성과 box-shadow 속성은 CSS3
Generator를 사용해 쉽게 만들 수 있다.
101
102. 3.10 벤더 프리픽스
• 개요
– 벤더 프리픽스는 웹 브라우저 공급 업체(마이크로소프트, 구글, 모질
라, 애플, 오페라)에서 제공하는 실험적인 기능을 사용할 때 사용한다.
– 예를 들어 변환 속성은 CSS3 표준에 있지만 아직 완벽하게 제정된 상
태가 아니다. 따라서 웹 브라우저 업체가 무턱대고 속성을 추가할 수
없다.
– 하지만 다른 웹 브라우저를 이기려면 새로운 기능을 모두 제공해야 하
므로 벤더 프리픽스를 사용해 지원한다.
– 각 웹 브라우저마다 다음과 같은 벤더 프리픽스를 갖는다.
102
107. 4.1 웹 페이지 개요
• 웹 페이지
– 논문과 관련된 용도로 시작한 HTML 문서는 1995
년에 민간에 공개되면서 발전하기 시작했다.
– 다음 그림은 1996년의 야후 메인 페이지이다.
107
108. 4.1 웹 페이지 개요
– 현대의 모든 웹 페이지는 고정적인 영역으로 분리
된다.
– 다음 그림은 jQuery 홈페이지이다.
108
109. 4.1 웹 페이지 개요
– jQuery 공식 홈페이지는 물론 국내 포털의 메인
사이트도 다음 그림 처럼 영역이 구분되어 있다.
109
110. 4.2 레이아웃 구분
• 공간 분할
– 공간을 분할할 때는 다음 규칙을 지킨다.
1.
2.
3.
4.
웹 페이지를 구상한다.
웹 페이지의 구성 영역을 분리한다.
구성 영역을 행단위로 분리한다.
나누어진 행의 내부 요소를 분리한다.
– 이번 장에서 만드는 웹 페이지는 다음과 같이 공간을 분할한다.
110
111. 4.3 초기화
• 초기화 코드
– 모든 HTML 페이지의 첫 번째 스타일시트는 초기화 코드로 시작한다.
– 초기화 코드는 모든 웹 브라우저에서 동일한 출력을 만드는 데 사용한
다.
– 전 세계적으로 다음 초기화 코드를 많이 사용한다.
111
112. 4.4 헤더 구조 작성
• 헤더 구조
– body 태그에 다음과 같이 header 태그를 생성한다.
– #main_header 태그는
다음과 같이 구성한다.
112
115. 4.5 웹 폰트
• 웹 폰트
– 웹 브라우저는 사용자의 컴퓨터에 설치된 폰트만 사용할 수 있다.
– 따라서 개발자의 컴퓨터에는 설치되어 있지만 사용자의 컴퓨터에 설
치되어 있지 않은 폰트는 문제가 된다.
– 이러한 문제를 해결할 때 사용하는 방법이 바로 웹 폰트이다.
– 웹 폰트는 사용자가 웹 페이지에 접속하는 순간 폰트를 자동으로 내려
받고 해당 웹 페이지에서 사용할 수 있게 만들어주는 기능이다.
115
116. 4.5 웹 폰트
– 구글 웹 폰트에서 원하는 폰트를 선택하고 사용 방법을 복사한다.
– HTML 페이지에 다음과 같이 웹 폰트를 추가한다.
– 이렇게 웹 폰트를 추가하면 구글 웹 폰트에 나오는 방법으로 사용할
수 있다.
116
