240104 웹 만들기 ; menu.html

2024. 1. 4. 19:56ㆍ2023.11.21-2024.05.31

웹 만들기 ;

(자바스크립트+CSS+HTML)

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
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin:0;
            padding:0;
        }
        .navi{
            width: 100%;
            height: 50px;
            text-align: center;
            background-color:black;
        }
        .menu{
            margin: 0 auto;
            width: auto;
            height: 50px;
            text-align: center;
        }
        .menu li{
            width: 100px;
           height: 30px;
            display: inline-block;
            text-align: center;
            color: white;
            line-height: 50px;
        }
        .main{
            margin: 0px 5px;
            width: calc(100%-10px);
            height: auto;
            background-color: gray;
        }
        footer{
            position: fixed;
            bottom: 0;
            width: 100%;
            height: 50px;
            background-color: gray;
            text-align: center;
line-height: 50px;
        }
    </style>
</head>
<body>
    <div>
        <nav class="navi">
            <ul class="menu">
                <li><i class="xi-apple"></i></li>
                <li><i class="xi-shop"></i>스토어</li>
                <li><i class="xi-compass"></i>맥</li>
                <li><i class="xi-gamepad"></i>아이패드</li>
            </ul>
        </nav>
    </div class="main">
    <main>
        본문내용
        <br>
        <div style="width: 100px; height: 100px; float: left; border: 10px solid white; 
padding: 10px; background-color: aqua;">
            박스안의내용
        </div>
        <div style="width: 100px; height: 100px; float: left; border: 10px solid white; 
margin: 10px; padding: 10px; background-color: cadetblue;">
            박스안의내용
        </div>    
        <a href="./position.html">포지션</a>
    </main>
    </div>
    <footer>
        하단내역
    </footer>
    </div>
    
</body>
</html>
 cs
 
 
  

 

 

.menu li는 CSS 선택자로, HTML 문서에서 <li> 요소들을 .menu 클래스 안에서 선택하는 것을 나타낸다.

 

width: calc(100% - 10px) :CSS에서 사용되는 계산 표현식

이것은 상대적인 값인 100%에서 10px를 뺀 결과를 나타낸다

이런 계산 표현식은 주로 너비나 높이 등의 속성을 동적으로 계산할 때 사용된다.

즉, 화면 전체 너비에서 10px를 뺀 값으로 동적으로 너비가 설정된다.

 

footer:  여기서 사용된 스타일은 주로 페이지 하단에 위치한 푸터 영역을 디자인하는 데 사용 된다.

  1. position: fixed;: 푸터를 화면에 고정. 스크롤을 내려도 푸터가 항상 화면 하단에 고정.
  2. bottom: 0;: bottom 속성을 0으로 설정하면 푸터가 화면 하단에 정확하게 위치.
  3. width: 100%;: 푸터의 너비를 화면 전체 너비로 확장.
  4. height: 50px;: 푸터의 높이를 50px로 설정.
  5. background-color: gray;: 푸터의 배경 색상을 회색으로 지정.
  6. text-align: center;: 푸터 내부의 텍스트를 가운데 정렬.

이러한 스타일 속성들을 조합하여 페이지 하단에 고정된, 회색 배경의 가운데 정렬된 푸터를 생성한다.

이 푸터는 화면 크기에 대한 반응형 디자인을 가지며, 내용이나 텍스트를 가운데 정렬하는 등의 기본적인 푸터 스타일을 구현

 

 

저작자표시

'2023.11.21-2024.05.31' 카테고리의 다른 글

240104 웹 만들기 ; write.html  (1) 2024.01.04
240104 웹 만들기 ; position.html  (1) 2024.01.04
240104 웹 만들기 ; div.html  (1) 2024.01.04
240104 웹 만들기 ; main.html  (1) 2024.01.04
240104 웹 만들기 ; index.html  (1) 2024.01.04

관련글

티스토리툴바