본문 바로가기
html

html 하단바 만드는 방법

by Antonio Bae 2023. 6. 7.

안녕하세요 오늘은 앱에서 하단바 만드는 법을 알려드리겠습니다.

 

크게 3가지로 CSS를 구성하면 됩니다.

 CSS는 Title 밑에 Style 안에 넣으면 됩니다.

 

1.Outbox 바 생성

2.ul / li 태그 생성 - 원 생성

3.a / img 태그 -원 안에 채워 넣은 요소

 

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin:0; padding:0; list-style-type: none; text-decoration: none;}       
        .outBox{
            width: 100%;
            height: 20%;
            text-align:center;
            background-color: rgb(16, 235, 162);
            box-shadow: 5px 3px 4px rgba(0, 0, 220, 0.4);
        }

        ul{
            height: 80vh;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
        }

        li{
            width: 250px;
            height: 250px;
            background-color: aliceblue;
            border-radius: 50%;
            box-shadow: 1px 1px 4px rgb(206, 240, 206);
            display: flex;
            flex-direction: column;
            /* 안의 내용들을 세로로 */
            justify-content: center;
            /* 가로가 아닌 세로의 기준으로 간격 조절 */
            align-items: center;
        }

        a{
            width: 80%;
            margin-top: 2px;
        }
        img{
            padding: 1%;
            top: 20px;
            width: 150px;
            height: 150px;
            background-color: rgb(206, 240, 206);
            border-radius: 50%;
        }
        img:hover{
            filter:brightness(150%);
            /* 밝아져라! */
            cursor: pointer;
            /* 마찬가지로 마우스가 올라갔을때인데 마우스모양이 손가락 모양으로 변함 */
            
        }

    </style>
</head>
<body>
    <ul class="outBox">
        <li>
            <a href="http://www.naver.com"></a>
            <img src="./img/traschcan02.png" alt="trashcan">
            <h3>분리배출</h3>
            <h2>image1 text</h2>
        </li>
        <li>
            <a href="http://www.naver.com"></a>
            <img src="./img/calendar01.png" alt="calendar">
            <h3>행사일정</h3>
            <h2>image2 text</h2>
        </li>
        <li>
            <a href="http://www.naver.com"></a>
            <img src="./img/content01.png" alt="content">
            <h3>컨텐츠</h3>
            <h2>image3 text</h2>
        </li>
        <li>
            <a href="http://www.naver.com"></a>
            <img src="./img/community.png" alt="community">
            <h3>커뮤니티</h3>
            <h2>image4 text</h2>
        </li>
        <li>
            <a href="http://www.naver.com"></a>
            <img src="./img/mypage02.png" alt="mypage">
            <h3>image1</h3>
            <h2>image2 text</h2>
        </li>
    </ul>
</body>
</html>

하단바를 포함한 전체 html 코드

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Dongle:wght@700&display=swap" rel="stylesheet">
    <!-- font-family: 'Dongle', sans-serif; -->
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style-type: none;
            text-decoration: none;
            font-family: Dongle;
            font-size: 1rem;
        }

        body {
            width: 100vw;
            height: 100vh;
        }

        header {
            width: 100%;
            /* height: 3rem; */
            /* 지정된 배수 */
            background-color: darkred;
            color: white;
            font-size: 3rem;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        nav {
            width: 100%;
            background-color: darkcyan;
            font-size: 2rem;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        section {
            width: 100%;
            height: 70%;
            /* background-color: lightpink; */
            display: flex;
            justify-content: center;
            align-items: center;
        }

        aside {
            width: 25%;
            height: 100%;
            background-color: lightgreen;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .b {
            width: 75%;
            height: 100%;
            background-color: rgb(235, 240, 212);
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 2rem;
        }

        footer {
            /* width: 100%; */
            /* height:1%; */
            background-color: khaki;
        }

        .outBox {
            /* width: 100%; */
            height: 6rem;
            text-align: center;
            background-color: rgb(234, 241, 234);

            box-shadow: 5px 3px 4px rgba(0, 0, 220, 0.4);
            display: flex;
            justify-content: space-evenly;
            align-items: center;
        }

        li {
            width: 5rem;
            height: 5rem;
            background-color: aquamarine;
            border-radius: 50%;
            box-shadow: 1px 1px 4px #66CDAA;
            display: flex;
            flex-direction: column;
            /* 안의 내용들을 세로로 */
            justify-content: center;
            /* 가로가 아닌 세로의 기준으로 간격 조절 */
            align-items: center;

        }

        li:hover {
            filter: brightness(120%);
            /* 밝아져라! */
            cursor: pointer;
            /* 마찬가지로 마우스가 올라갔을때인데 마우스모양이 손가락 모양으로 변함 */
        }

        a {
            margin-top: 4px;
        }

        img {
            padding: 3%;
            margin-top: 5px;
            width: 3rem;
            height: 3rem;
            background-color: rgb(16, 235, 162);
            border-radius: 50%;
        }

        .font {
            font-size: 1.2rem;
        }
    </style>
</head>

<body>
    <header>Header</header>
    <nav>Nav</nav>
    <section>
        <aside>aside</aside>
        <div class="b"> bside</div>
    </section>
    <footer>
        <ul class="outBox">
            <li>
                <a href="http://www.naver.com">
                    <img src="./img/traschcan02.png" alt="trashcan">
                </a>
                <div class="font">분리배출</div>
            </li>
            <li>
                <a href="http://www.naver.com">
                    <img src="./img/calendar01.png" alt="calendar">
                </a>
                <div class="font">행사일정</div>
            </li>
            <li>
                <a href="http://www.naver.com">
                    <img src="./img/content01.png" alt="content">
                </a>
                <div class="font">컨텐츠</div>
            </li>
            <li>
                <a href="http://www.naver.com">
                    <img src="./img/community.png" alt="community">
                </a>
                <div class="font">커뮤니티</div>
            </li>
            <li>
                <a href="http://www.naver.com">
                    <img src="./img/mypage02.png" alt="mypage">
                </a>
                <div class="font">마이페이지</div>
            </li>
        </ul>

    </footer>
</body>

</html>
저작자표시 (새창열림)

'html' 카테고리의 다른 글

html 레이아웃 만드는 방법  (0) 2023.06.11
CSS의 absolute position 및 애니메이션 작동 메커니즘 이해  (0) 2023.06.09
다운로드 바 만드는 방법  (0) 2023.06.08
vscode 단추 만드는 방법 및 CSS 이모티콘 활용하는 방법  (0) 2023.06.02

관련글

티스토리툴바