JSP - 시맨틱(Semantic)을 이해하는 퀴즈 (2022-09-14)

2022. 9. 14. 23:00ㆍ3층 1구역 - 개발의 장/JSP

1. 서론

 

다음 퀴즈를 풀어보며 시맨틱에 대해 이해하는 시간을 가져보자.

 

퀴즈는 3가지이다.

 

1-1.

 

 

1-2.

 

 

1-3.

 

 

2. 본론

 

2-1-1.

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
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>quiz03</title>
<!-- http://localhost:8085/cssExam/exams/quiz03.jsp -->
<style>
 div{
 border: 3px solid black; 
 box-sizing:border-box;
 width: 800px; 
 margin : 0 auto;
 }
 header{
 border: 3px solid black; 
 background-color: red; 
 text-align: center; 
 }
 nav{
 border:3px solid black;
 float: left; 
 text-align: center;
 background-color: yellow;  
 width: 300px; 
 height: 300px; 
 }
 section{
 margin: 0 0 0 300px; 
 border: 3px solid black; 
 background-color: green; 
 text-align: center; 
 width: 490px; 
 height: 300px;
 }
 footer{
 height: 200px; 
 border: 3px solid black; 
 text-align: center; 
 background-color: pink;
 }
</style>
</head>
<body>
    <div id="wrap">
        <header><h1>&lt;header&gt;</h1></header>
            <nav>
                <h2>&lt;nav&gt;</h2>
            </nav>
            <section>
                <h2>&lt; section &gt;</h2>
            </section>
            <footer><h2>&lt; footer &gt;</h2></footer>
    </div>
</body>
</html>
cs

 

2-1-2.

 

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
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>quiz4</title>
<style>
    *{ box-sizing: border-box; }
    div.default { width:500px; height:500px; margin:0 auto; }
    header{ border-style: solid; height:20%; text-align:center; background: red; }
    nav { float: left; background:gold; width:20%; height:40%; border-style: solid; }
    section {  width:60%; height:40%; background:green;  border-style: solid; float: left;}
    aside {  float: right; background:gold; width:20%; height:40%; border-style: solid; }
    footer {  border-style: solid; height:20%; background:pink; clear: both}
    h3{ text-align:center; }
</style>
</head>
<body>
    <div class="default">
        <header><h1>&lt; header &gt;</h1></header>
        <nav>
            <h3>&lt; nav &gt;</h3>
        </nav>
        <section>
            <h3>< section ></h3>
        </section>
        <aside> <h3> &lt; aside &gt; </h3></aside>
        <footer><h3>< footer ></h3></footer>
    </div>
</body>
</html>
cs

 

 

2-1-3.

 

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
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>quiz5</title>
<style>
*{ box-sizing: border-box; }
    div.default { width:500px; height:500px; margin:0 auto; }
    header{ border-style: solid; height:20%; text-align:center; background: red; }
    nav {background:gold; height:20%; border-style: solid; }
    section {width:70%; height:40%; background:green;  border-style: solid; float: left;}
    aside {float: right; background:skyblue; width:30%; height:40%; border-style: solid; }
    footer {  border-style: solid; height:20%; background:pink; clear: both}
    h3{ text-align:center; }
    p{margin: 10px auto; border-style: solid; text-align:center; width: 300px; height: 30px; background-color: gold;}
</style>
</head>
<body>
    <div class="default">
        <header><h1>&lt; header &gt;</h1></header>
        <nav>
            <h3>&lt; nav &gt;</h3>
        </nav>
        <section>
            <h3>&lt; section &gt;</h3>
            <p>header</p>
            <p>article</p>
            <p>footer</p>            
        </section>
        <aside> 
        <h3> &lt; aside &gt; </h3>
        
        </aside>
        <footer><h3>&lt; footer &gt;</h3></footer>
    </div>
</body>
</html>
cs
저작자표시 (새창열림)

'3층 1구역 - 개발의 장 > JSP' 카테고리의 다른 글

JSP - table CSS를 이해하는 퀴즈 (2022-09-14)  (0) 2022.09.14
JSP - table CSS (2022-09-14)  (0) 2022.09.14
JSP - 시맨틱(Semantic) (2022-09-14)  (0) 2022.09.14
JSP - float, clear, overflow (2022-09-14)  (0) 2022.09.14
JSP - position (2022-09-13)  (0) 2022.09.13

관련글

티스토리툴바