Transcript CSS고급기능
Chapter 3.
CSS 고급기능
학습목표
1.
2.
3.
4.
시맨틱 마크업(66p)
HTML5의 새로운 태그(86p)
태그의 상속(128p)
선택자(138p)
① 태그 선택자, 클래스 선택자, 아이디 선택자
② 하위 선택자
③ 그룹 선택자
④ 전체 선택자
⑤ 유사 클래스 선택자
5. 좌표계 사용법(182p)
6. 레이아웃 사용법(204p)
2
시맨틱 마크업
1. 무엇인가?
① 의미있는 태그를 사용하여 검색기에서 최적의 데이터를 찾도록 한다
② <h1>….<h6> : 중요도가 점점 낮아짐을 의미함
2. 용어
① 엘리먼트(element)
• 의미를 표현하는 약속된 단어
• 단락(p), 헤딩(h1), 이미지(img), …
② 태그
• 엘리먼트에 부등호 기호(< >)로 감싸는 것 : <p> <h1> <em>
③ 블록레벨 엘리먼트
• 새로운 줄에 줄 바꿈 하여 표시된 것(줄 단위 엘리먼트)
• 너비는 브라우저 화면의 100%
• <p> <hr> <h1> <div>, …
④ 인라인레벨 엘리먼트
• 같은 줄에서 표시됨
• 너비는 자신의 콘텐츠 길이만큼 차지함
• <em> <strong>, <span> …
3
시맨틱 마크업
⑤ 예제)
p{ background-color:red;}
em{ background-color:cyan;}
strong{ background-color:pink;}
<body>
<p>블록레벨은 줄단위이며 </p><p>표시되는 영역은 브라우저의 100%입니다</p>
<em>인라인 레벨은 </em><strong>태그 영역안에서의 크기만큼 지정됩니다</strong>
</body>
4
시맨틱 마크업
3. 웹 표준 : 인라인레벨은 항상 블록레벨의 엘리먼트로 감싼다.
① 예제)
p{ background-color:red;}
em{ background-color:cyan;}
strong{ background-color:pink;}
<p>
</p>
<em>강조</em>
<strong> 더 강조 </strong>
5
시맨틱 마크업
4. 태그를 그룹으로 묶을 때
1) <div> : 블록레벨 엘리먼트를 그룹으로 묶을 때 사용
<div>
<h1> 문서의 제목</h1>
<p> 문단1</p>
<hr>
<p>문단2</p>
</div>
2) <span> : 인라인레벨 엘리먼트를 그룹으로 묶을 때 사용
<p>
<span>
<em>강조 </em>
<strong>더 강조 </strong>
</span>
</p>
6
HTML5 의 새로운 태그
header, nav, article, section, footer
1. Header : 머리말 영역
① 로고, 제목 등을 나타내는 영역
② 예문)
<header>
<h1> 제목입니다</h1>
<p>제목의 부연 설명 등이 있는 간단한 문단입니다</p>
</header>
2. Nav : 메뉴영역
① 사이트로 이동하기 위한 메뉴
② 예문)
<nav>
<a href=“#”>홈 </a>
<a href=“#”>쇼핑 </a>
</nav>
7
HTML5 의 새로운 태그
3. Article : 콘텐츠 영역
4. Section : 콘텐츠별 구분된 영역
① 콘텐츠 영역 중 세부적으로 구분된 콘텐츠 입니다
② (예문)
<article >
<section id=police>
정치면의 콘텐츠 입니다
</section>
<section id=economic>
경제면의 콘텐츠 입니다
</section>
</article>
5. Footer : 꼬리말 영역
① 저자, 연락처 등의 정보 영역
② (예문)
<footer>
Copyright ©. 2012 안산대학교 인터넷정보과 .
</footer>
8
태그의 상속
1. HTML DOM(Document Object Model) :
태그와 속성간의 관계(계층구조로 표현)
html
head
title
body
h1
a
href
p
<html>
<head>
<title></title>
</head>
<body>
<h1>헤딩</h1>
<a href=“#”>링크</a>
<p>단락</p>
</body>
</html>
2. css의 특성을 하위 태그에 물려줄 수 있다
=> 문자의 시각적인 표현만 상속됨(글꼴, 크기, 색상, 굵기, …)
9
태그의 상속
3. 예제
<style type="text/css">
p{
color:maroon;
font-family:궁서체;
}
</style>
<body>
<h1> h1 엘리먼트의 내용</h1>
<h2> h2 엘리먼트의 내용</h2>
<p> p태그가 사용된 내용</p>
<p> p태그
<em> p태그안의 em 태그의 내용</em>
</p>
</body>
html
head
title
body
h1
h2
p
p
em
4. 연습문제 : 박스_연습문제2.html
10
선택자
1. 선택자 : 태그 선택자, 클래스 선택자, 아이디 선택자
2. 하위 선택자 : 선택자 내에 있는 특정 선택자
<p>
<em> 강조 문자 </em>
</p>
p em{ color:red;}
p .test1{ }, p.test1{ } 의 차이점?
① (예제1)하위선택자_no.html
② (예제2)하위선택자1_1.html
3. 그룹 선택자
① 선택자 이름만 다르고 스타일 내용이 똑같을 때 적용
② (예문) h1, h2, h3{ color:red; }
③ (예제)그룹선택자.html
4. 전체 선택자
① 모든 엘리먼트 선택할 때
② (예문1) *{ font-size: 12px; }
③ (예문2) #contents * { background:pink; }
④ (예제) 전체선택자.html
11
선택자
5. 유사 클래스 선택자 : “:”
① 하이퍼링크에서 사용됨
• a:link => 하이퍼링크의 기본
• a:visited=> 방문한적이 있는 하이퍼링크
• a:hover => 하이퍼링크에 마우스 over일 때
• a:active => 마우스나 손가락으로 누를 때
② 위의 순서대로 지정하지 않으면 인식을 못함
③ (예제)유사클래스.html
<퀴즈>
1. DOM의 개념을 설명하시오
2. 하위 선택자의 설명과 예제를 만드시오
12
작성할 html문서 (5월10일)
① HTML5 태그(연습문제)
② 태그의 상속( 아래 두 문서 비교하기)
③ 하위선택자
13
작성할 html문서 (5월10일)
④ 전체선택자
⑤ 유사클래스 선택자
⑥ 모든 선택자(태그, 클래스, 아이디, 하위, 그룹, 전체, 유사 클래스)중
5개 이상의 선택자를 사용하여 본인의 html문서 만들기
14