testweb2/Features.html at main · swdean07/testweb2 · GitHub

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/test.css"> <!-- CSS 파일 링크 -->
    <style>
        /* 네비게이션 메뉴 스타일 */
        body {
            font-family: Arial, sans-serif;
            /* 기본 폰트 설정 */
            margin: 0;
            /* 기본 여백 제거 */
            padding: 0;
            /* 기본 패딩 제거 */
            line-height: 0.6;
        }

        .rounded-header {
            background-color: dark;
            color: white;
            padding: 20px;
            text-align: center;
            border-radius: 20px;
            /* 모서리를 둥글게 만들기 */
            margin: 20px;
            /* 헤더와 화면 사이의 여백 */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            /* 살짝 입체감을 주는 그림자 */
        }

        nav {
            display: flex;
            /* flexbox 사용 */
        }

        nav a {
            margin-left: 20px;
            /* 링크 간의 여백 */
            text-decoration: none;
            /* 밑줄 제거 */
            color: white;
            /* 링크 색상 */
            font-style: oblique;
        }

        nav a:hover {
            text-decoration: underline;
            /* 호버 시 밑줄 추가 */
        }

        main {
            display: flex;
            /* flexbox 사용 */
            flex-direction: column;
            /* 수직 정렬 */
            justify-content: center;
            /* 수직 중앙 정렬 */
            align-items: center;
            /* 수평 중앙 정렬 */
            width: 100%;
            max-width: 1200px;
            /* 최대 너비 설정 */
            margin: 280px;
            /* 페이지 중앙으로 배치 */
            padding: 15px;
            background-color: #e9e9e9;
            border: 10px solid #ccc;
            border-radius: 8px;
            box-shadow: 0 4px 8px black;
            box-sizing: border-box;
        }

        footer {
            background-color: #333;
            color: white;
            padding: 20px;
            text-align: center;
        }

        footer ul {
            list-style-type: none;
            padding: 0;
            margin: 10px 0 0 0;
        }

        footer ul li {
            display: inline;
            margin: 0 15px;
        }

        footer ul li a {
            color: white;
            text-decoration: none;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <header>
        <h1>홈페이지 구성</h1>
        <nav>
            <a href="#">홈페이지 소개</a>
            <a href="#">로그인</a>
            <a href="#">회원가입</a>
            <a href="#">문의사항</a>
        </nav>
    </header>
    <main>
        <p>
            SW 홈페이지는 실시간으로 속보 내용을 전달하는 포털 사이트입니다.
        </p>
        <p>
            SW 홈페이지는 정치, 사회, 경제, 문화, 예술, 스포츠 등과 같은 다양한 카테고리
            내용으로 구성되어 있습니다.
        </p>
        <p>
            SW 홈페이지 내용을 통해 다양한 소식과 경험을 즐겨보시길 바랍니다. 감사합니다.
        </p>
    </main>

    <footer>
        <div class="footer-container">
            <p>&copy; 2024 My Web Service. All rights reserved.</p>
            <ul>
                <li><a href="#">Privacy Policy</a></li>
                <li><a href="#">Terms of Service</a></li>
                <li><a href="#">Links</a></li>
            </ul>
        </div>
    </footer>

</body>

</html>