반응형 웹 실전 프로젝트 #9 (그룹요소)
HTML, CSS 2020. 7. 17. 14:45반응형
그룹요소
<div>
| 요소유형 | 태그명 | 의미 및 특징 |
| 블록 레벨 | <div></div> | 요소들을 그룹으로 정의 하는 태그 |
| 그룹으로 묶어주는 이유는 CSS를 손쉽게 적용하기 위한것이다 | ||
| 텍스트, 인라인요소, 블록레벨요소를 모두 포함할수 있다 | ||
| 태그자체는 아무 의미가 없다 |
<div> 태그를 이용하여 요소들을 그룹화 하면 CSS를 적용할ㄸ 어떤 점이 편리 한지 예제를 통해 알아보자
margin: 0 auto는 header, section, footer요소들을 브라우저의 가운데 위치 하도록 표현 한다
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>사용자 입력 속성</title>
<style>
header {
width: 300px;
margin: 0 auto;
border: 1px solid #000;
}
section {
width: 300px;
margin: 0 auto;
border: 1px solid #333;
}
footer {
width: 300px;
margin: 0 auto;
border: 1px solid #999;
}
</style>
</head>
<body>
<header>헤더</header>
<section>본문</section>
<footer>푸터</footer>
</body>
</html>
|
cs |
<header>,<section>,<footer>요소들을 가운데로 정렬하기 위해서는 CSS속성 (width, margin)을 3번 정의 해야 하는데 불편함이 있다
<div>태그로 요소들을 그룹화 하여 CSS를 적용해보자
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>사용자 입력 속성</title>
<style>
#wrap {
width: 300px;
margin: 0 auto;
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="wrap">
<header>헤더</header>
<section>본문</section>
<footer>푸터</footer>
</div>
</body>
</html>
|
cs |
CSS속성(width, margin)을 한번만 정의 했음에도 요소들이 가운데로 정렬된것을 확인할수 있다
이러한 이유로 <div>태그는 마크업 할때 많이 사용된다
<span>
| 요소유형 | 태그명 | 의미 및 특징 |
| 인라인요소 | <span></span> | 인라인 요소들을 그룹으로 정의 하는 태그 |
| 요소들을 그룹으로 묶어주는 이유는 <div>태그처럼 CSS를 쉽게 적용하기 위해서임 | ||
| 텍스트, 인라인요소를 포함 할수 있음 |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>그룹요소</title>
<style>
.s1 {
background-color: #ccc;
}
.s2 {
color: #ff6600;
}
</style>
</head>
<body>
<span class="s1">
<span class="s2">웹표준</span>과 <span class="s2">웹접근성</span>
</span>
<div>
<a href="#">
<span>
<img src="./public/images/space.PNG" alt="우주">
</span>
<span class="s2">
공기정화식을 화이트스타
</span>
</a>
</div>
</body>
</html>
|
cs |
<span>요소는 텍스나 인라인 요소들을 그룹으로 묶어 CSS를 적용할때 많이 사용된다
반응형
'HTML, CSS' 카테고리의 다른 글
| 반응형 웹 실전 프로젝트 #11 (미디어 요소) (0) | 2020.07.17 |
|---|---|
| 반응형 웹 실전 프로젝트 #10 (구조 관련 요소) (0) | 2020.07.17 |
| 반응형 웹 실전 프로젝트 #8 (폼 관련요소 및 속성) (0) | 2020.07.17 |
| 반응형 웹 실전 프로젝트 #7 (표관련요소 및 속성) (0) | 2020.07.17 |
| 반응형 웹 실전 프로젝트 #6 (목록관련요소) (0) | 2020.07.17 |