HTML+CSS (기초) display 속성 이용하기 ( float와 같은 배치, 편리)

<최종 화면>

우선 최종 화면과 같이 영역을 나눈다.

최종 화면과 같이 내용을 채우자.

이제 스타일로 배경색과 배치를 하자.

(display: table-cell은 float와 같이 옆으로 배치도 된다. )

맨 아래 부분의 배경색도 적용하자.

<복붙용 코드>

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
 
    <style>
        body{
            margin: 0px;        }
        header{
            background-color: #efe5d0;
            font-family: Arial, sans-serif;
            margin: 0px;
            padding: 5px;
            text-align: center;
        }
        header h1{margin: 0px;}
 
        nav{
            display: table-cell;
            background-color: darkgoldenrod;
            padding: 15px;
        }
 
        section{
            display: table-cell;
            background-color: darkgreen;
            padding: 15px;
        }
 
        footer{
            background: brown;
            color: burlywood;
            padding: 10px;
            margin: 0px;
            font-size: 90%;
 
        }
    </style>
 
</head>
<body>
    <!-- 시멘틱 요소들은 기본적으로 div와 같은 특성 및 스타일을 가짐 -->
    <header>
        <h1>My Blog Page</h1>
    </header>
    <nav>
        <h2>Links</h2>
        <ul>
            <li><a href="http://www.w3c.org">w3c</a></li>
            <li><a href="http://www.naver.com">Naver</a></li>
            <li><a href="http://www.daum.net">Daum</a></li>
        </ul>
        <!-- 검색엔진에서 이미지 검색 되도록 figure 시멘틱요소 사용 -->
        <figure>
            <img src="./pome.png" alt="홍길동" width="85" height="85">
            <figurecaption>홍길동</figurecaption> 
        </figure>
    </nav>
    <section>
        <article>
            <h3>Semantic Tags</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis totam ratione reprehenderit architecto beatae deleniti blanditiis odit earum laboriosam praesentium ducimus cum, animi asperiores officiis dolore maxime aperiam? Dolore, fuga!</p>
        </article>
        <article>
            <h3>div와 span</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis mollitia alias error necessitatibus harum perspiciatis qui deleniti at blanditiis, sapiente, unde itaque nulla impedit nostrum quod ipsam dolore rerum hic.</p>
        </article>
    </section>
    <footer>
        Copyrigth &copy; 2013 Hong
    </footer>
 
</body>
</html>
 

저작자표시

'안드로이드 웹앱 콘테츠 개발자 양성(국비지원) > HTML+ CSS' 카테고리의 다른 글

HTML+CSS (기초) transform 속성 이용하기 (위치,기울기 등 변환) (0)	2019.12.09
HTML+CSS (기초) opacity, visibility 속성 이용하기( 투명도, 화면 표시) (0)	2019.12.09
HTML+CSS (기초) float, clear 속성 (옆으로 배치하기 위해 float 사용) (0)	2019.12.09
HTML+CSS (기초) overflow 속성 사용 ( 테두리 넘친 내용에게 적용) (0)	2019.12.09
HTML+CSS (기초) min, max 속성 사이즈 조절 (0)	2019.12.09