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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 
<style type="text/css">
    
    body>header {
        border: 10px solid red;
        width: 800px;
        margin: 0px auto;
    }
    
    body>nav {
        border: 10px solid yellow;
        width: 150px;
        height: 400px;
        
        float: left;
    }
    
    body>section {
        border: 10px solid blue;
        width: 630px;
        min-height: 400px;
        height: 400px;
        
        float: left;
    }
    
    body>footer {
        border: 10px solid orange;
        width: 800px;
        height: 100px;
        
        clear: both; /* float 속성 끊기 */
    }
    
    article>header {
        background-color: yellow;
    }
    
    article>section {
        background-color: skyblue;
    }
    
    
    
</style>
 
</head>
<body>
 
 
    <!-- ex01_semantic.htm -->
 
 
 
    <!-- 
    
        HTML5
        - http://html5test.com
        - 브라우저들이 지원 중.,(일부 태그 표준화 진행 중.,)
        
        HTML5 = HTML 4.01 + 추가 태그
        HTML5 = HTML5 + CSS3 + Javascript
    
        
        semantic 태그
        
        
    -->
 
 
 
    <!-- 
        레이아웃 구성.,
        1. 상단 : 주메뉴
        2. 중간 좌측 : 서브메뉴
        3. 중간 우측 : 컨텐츠
        4. 하단 : 기업정보, 저작권.,
    -->    
 
    <!-- 
    <div id="menu">주메뉴</div>
    <div id="sub">서브메뉴</div>
    <div id="cpntent">메인</div>
    <div id="footer">회사정보</div> 
    -->
 
    <!--  
    
        Semantic 태그
        
        1. <header> 태그
        - 머릿말
        - 문서의 상단 부분(페이지마다 공통으로 들어가는 부분)
        - 메뉴, 사이트 로고, 검색창(네이버 등) 등.,
        - <div id="header"></div>
        
        2. <nav> 태그
        - 네비게이션 역할
        - 주메뉴, 서브메뉴, 기타 메뉴 등., 
        
        3. <section> 태그
        - 전체 컨텐츠 영역
        - <header>, <footer> 태그와 동급
        - 페이지가 전달하려는 내용의 출력 영역
        
        4. <article> 태그
        - 실제 컨텐츠를 구분하기 위한 영역
        - 출력 내용끼리 구분해서 묶는 역할(컨텐츠끼리)
        
        5. <aside> 태그
        - 페이지의 주 내용과는 상관없는 부가적인 내용
        
        6. <footer> 태그
        - 하단 부분
        - 회사 정보,
        
    -->
    
    <header>
        <nav>주메뉴</nav>
        <h1>사이트 로고</h1>
    </header>
    <nav>서브메뉴</nav>
    <section>
        <article>
            <header>
                <h2>포스트 제목</h2>
                <nav>포소트 내의 소메뉴</nav>
            </header>
            <section>
                출력 내용
            </section>
        </article>
        <article>
            <header>
                <h2>포스트 제목</h2>
                <nav>포소트 내의 소메뉴</nav>
            </header>
            <section>
                출력 내용
            </section>
        </article>
        <article>
            <header>
                <h2>포스트 제목</h2>
                <nav>포소트 내의 소메뉴</nav>
            </header>
            <section>
                출력 내용
            </section>
        </article>
        <aside>사이드 내용</aside>
    </section>
    
    <footer>
        하단 부분.,
    </footer>
    
 
 
</body>
</html>
cs


'WEB > HTML5' 카테고리의 다른 글

변형하기 예제  (0) 2016.01.22
변형하기 translate / scale / rotate / skew  (0) 2016.01.22
box 예제  (0) 2016.01.22
접기,펼치기 / 수치그래프 / 진행률 / 데이터리스트 / 캔버스 태그  (0) 2016.01.22
시간태그 <time> / <form> 태그  (0) 2016.01.22

+ Recent posts

티스토리툴바