'HTML + CSS' 카테고리의 글 목록

HTML + CSS

Dark Mode - Clone Coding 2022.12.08
드림코딩 / 반응형 헤더 2022.11.24

Dark Mode - Clone Coding

2022. 12. 8. 07:20

1. navbar

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">
    <title>navbar</title>
    <link rel="stylesheet" href="style.css" type="text/css">
    <script src="https://kit.fontawesome.com/1045643a9e.js" crossorigin="anonymous"></script>
</head>
<body>
    <header>
        <div class="logo">
            <i class="fa-solid fa-house"></i>
            <span>HARIN CODE</span>
        </div>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Blod</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
</body>
</html>

CSS

html,
body {
    padding: 0;
    margin: 0;
    background-color: #292929;
}

ul {
    list-style-type: none;
}

a {
    text-decoration: none;
    color: #1B1B1B;
}

header {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #03A9FA;
    padding: 10px 0;
}

header .logo {
    margin-left: 10px;
    font-size: 17px;
    font-weight: bold;
}

header nav ul {
    display: flex;
    font-size: 17px;
    font-weight: bold;
    padding-left: 0;
    margin: 0;
}

header nav ul li {
    padding-right: 55px;
}

header a {
    display: inline-block;
}

header a::before {
    content: '';
    display: block;
    height: 4px;
    width: 0%;
    background: black;
    transition: all 1s;
    border-radius: 4px;
}

header a:hover::before {
    width: 100%;
}

문제점

header a::before {
    content: '';
    display: block;
    height: 4px;
    width: 0%;
    background: black;
    transition: all 1s;
    border-radius: 4px;
}

-> height에 4px를 줘서 텍스트들의 가로 정렬이 직선이 아니다.

해결

header nav ul li {
    margin-right: 55px;
    position: relative;
}

header a {
    display: inline-block;
}

header a::before {
    content: '';
    position: absolute;
    display: block;
    height: 4px;
    width: 0%;
    top: -4px;
    background: black;
    transition: all 1s;
    border-radius: 4px;
}

header a:hover::before {
    width: 100%;
}

-> header nav ul li의 position을 relative로 변경, 그리고 padding-right를 주면 위의 선이 길어지기 때문에 margin-right를 줬다.

또한 header a::before의 postion에 absolute를 주고 top: -4px;를 주니까 가로 직선 정렬이 가능해졌다.

도움 받은 곳

https: //stackoverflow.com/questions/30352431/css-transition-not-working-with-underline

저작자표시 (새창열림)

'HTML + CSS > Clone Coding' 카테고리의 다른 글

드림코딩 / 반응형 헤더 (0)	2022.11.24

드림코딩 / 반응형 헤더

2022. 11. 24. 20:09

22/09/28

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">
    <title>DreamCoding</title>
    <link rel="stylesheet" href="asset/style.css">
</head>
<body>
    <div class="container">
        <header>
            <div class="logo">
                <div class="logo_left">
                    <i class="fa-solid fa-star"></i>
                    <span>DreamCoding</span>
                </div>
                <i class="fa-solid fa-bars" id="toggle"></i>
            </div>
            <nav>
                <ul>
                    <li>Home</li>
                    <li>Gallery</li>
                    <li>Weddings</li>
                    <li>FAQ</li>
                    <li>Bookings</li>
                </ul>
            </nav>
            <div class="contact">
                <i class="fa-brands fa-twitter"></i>
                <i class="fa-brands fa-facebook-f"></i>
            </div>
        </header>
    </div>
    <script src="https://kit.fontawesome.com/1045643a9e.js" crossorigin="anonymous"></script>
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
}

ul {
    list-style: none;
}

header {
    background-color: #00004f;
    color: white;
}

.logo i {
    color: rgb(255, 145, 0);
}

.logo_left span {
    font-weight: bold;
    font-size: large;
}


@media screen and (max-width:480px) {
    
    header {
        display: flex;
        flex-direction: column;
        padding: 10px;
    }
    
    .logo {
        display: flex;
        justify-content: space-between;
    }

    .logo > * {
        padding: 0px 5px 0px 5px;
    }

    .logo_left :first-child {
        padding-right: 3px;
    }

    nav {
        padding: 8px 0;
    }
    
    ul {
        display: flex;
        flex-direction: column;
    }
    
    li {
        padding: 4px 0 4px 0;
        font-size: 0.8em;
        width: 100%;
        text-align: center;
    }

    nav ul li:hover{
        background-color: rgb(218, 123, 0);
        border-radius: 3px;
    }

    .contact {
        display: flex;
        justify-content: center;
        font-size: 0.75em;
        padding: 3px;
    }

    .contact > i {
        padding: 0 3px
    }
}
@media screen and (min-width:480px) {

    header {
            display: flex;
            justify-content: space-between;
            padding: 15px;
            align-items: center;
        }
    
        .logo {
            flex: 1;
        }

        .logo_left {
            display: flex;
            align-items: center;
        }

        .logo_left > * {
            padding-right: 5px;
        }
    
    
        .logo i:last-child {
            display: none;
        }
    
        nav {
            flex: 1;
        }
    
        nav ul {
            display: flex;
        }
    
        nav ul li {
            padding: 0px 13px;
            width: 100%;
            text-align: center;
        }
    
        .contact {
            flex: 1;
            display: flex;
            justify-content: flex-end;
        }
    
        .contact i {
            padding: 0 10px 0 0;
            font-size: 1em;
            padding: 0 7px;
        }
}

22/11/24

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">
    <title>Responsive Header</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/1045643a9e.js" crossorigin="anonymous"></script>
</head>
<body>
    <header>
        <div class="header__logos">
            <div class="header__logo">
                <i class="fa-solid fa-house"></i>
                <h2>Dream Coding</h2>
            </div>
            <a href="#"><i class="fa-solid fa-bars"></i></a>
        </div>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">Weddings</a></li>
                <li><a href="#">FAQ</a></li>
                <li><a href="#">Bookings</a></li>
            </ul>
        </nav>
        <div class="header__icons">
            <ul>
                <li>
                    <a href="#"><i class="fa-brands fa-twitter"></i></a>
                </li>
                <li>
                    <a href="#"><i class="fa-brands fa-facebook-f"></i></a>
                </li>
            </ul>
        </div>
    </header>
</body>
</html>

CSS

/* 초기화 */

* {
    margin: 0;
    padding: 0;
}

body,
html {
    font-family: sans-serif;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

/* 모바일 - 헤더 */

header {
    background-color: #253245;
    color: white;
}

.header__logos {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3em;
}

.header__logo {
    display: flex;
    align-items: center;
    padding-left: 1.2em;
}

.fa-house {
    font-size: 1.4em;
    margin-right: 0.3em;
    color: #D79462;
}

.fa-bars {
    font-size: 1.4em;
    padding-right: 1.2em;
    color: #D79462;
}

/* 모바일 - 네비 */

nav {
    text-align: center;
    padding: 0.7em;

}

nav li {
    padding: 0.4em;
    border-radius: 0.2em;
}

nav li:hover {
    background-color: #D79462;
}

nav ul li a{
    color: white;
    display: inline-block;
    width: 100%;
}

/* 모바일 - 아이콘 */

.header__icons {
    padding-bottom: 0.7em;
}

.header__icons ul {
    display: flex;
    justify-content: center;
    align-items: center;
}

.header__icons li {
    padding: 0.5em;
}

.header__icons a {
    color: white;
    text-align: center;
}

/* 피시버전 - 헤더 */

@media screen and (min-width: 768px) {
    /* 헤더 */
    header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.7em;
    }

    .fa-bars {
        display: none;
    }

    .header__logos {
        padding: 0;
    }

    /* 네비 */

    nav ul {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
    }

    nav ul li {
        margin-right: 0.2em;
    }

    /* 아이콘 */
    .header__icons {
        padding-bottom: 0;
    }
}

-> 9월과 비교하면 굉장히 발전했다! 하지만...

pc 버전에서 처음 HTML 파일을 열때마다, 토글 바의 display: none; 속성이 사라진다. 이유가 무엇일까? 더 찾아보자.

-해결했다!

before

 .fa-bars {
	display: none;
}

after

.header__logos :last-child i {
	display: none;
}

위 코드처럼 바꾸니까 문제가 해결됐다.

다시 작성한 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">
    <title>Responsive Header</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/1045643a9e.js" crossorigin="anonymous"></script>
    <script src="main.js" defer></script>
</head>
<body>
    <header>
        <div class="header__logos">
            <div class="header__logo">
                <i class="fa-brands fa-accusoft"></i>
                <a href="#"><p>DreamCoding</p></a>
            </div>
            <a href="#" class="toggleBtn"><i class="fa-solid fa-bars"></i></a>
        </div>
        <ul class="header__nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">Weddings</a></li>
            <li><a href="#">FAQ</a></li>
            <li><a href="#">Bookings</a></li>
        </ul>
        <ul class="header__icons">
            <li><a href="#"><i class="fa-brands fa-twitter"></i></a></li>
            <li><a href="#"><i class="fa-brands fa-facebook-f"></i></a></li>
        </ul>
    </header>
</body>
</html>

다시 작성한 CSS 코드

/* 초기화 */

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Source Sans Pro', sans-serif;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

/* 모바일 - 헤더 */

header {
    background-color: #253245;
}

.header__logos {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5em;
}

.header__logo {
    display: flex;
    align-items: center;
    padding-left: 1.0em;
    font-size: 1.4em;
}

.header__logo :first-child {
    margin-right: 0.3em;
    color: #D79462;
}

.header__logo :last-child {
    color: white;
}

.header__logos :last-child i {
    font-size: 1.4em;
    padding-right: 1.0em;
    color: #D79462;
}

/* 모바일 - 네비 */

.header__nav {
    display: none;
    text-align: center;
    padding: 0.5em 0 0 0;
}

.header__nav li {
    padding: 0.6em;
    margin: 0 0.6em ;
}

.header__nav li:hover {
    background-color: #D79462;
    border-radius: 0.2em;
}

.header__nav li a {
    color: white;
    display: inline-block;
    width: 100%;
}

/* 모바일 - 아이콘 */

.header__icons {
    display: none;
    padding: 1.5em 0;
}

.header__icons li {
    padding: 0.7em;
}

.header__icons i {
    color: white;
}

/* 토글 버튼 */

.header__nav.active {
    display: block;
}

.header__icons.active {
    display: flex;
    justify-content: center;
}

/* 피시버전 - 헤더 */

@media screen and (min-width: 768px) {

    /* 헤더 */
    header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.7em;
    }

    .header__logos :last-child i {
        display: none;
    }

    .header__logos {
        padding: 0;
    }

    /* 네비 */

    .header__nav {
        padding: 0;
        display: flex;
    }

    .header__nav li {
        margin-right: 0.2em;
    }

    /* 아이콘 */
    .header__icons {
        display: flex;
        padding: 0;
    }

    .header__nav.active {
        display: flex;
    }
}

JS 코드

const toggleBtn = document.querySelector('.toggleBtn');
const menu = document.querySelector('.header__nav');
const icons = document.querySelector('.header__icons');

toggleBtn.addEventListener('click', () => {
    menu.classList.toggle('active');
    icons.classList.toggle('active');
});

저작자표시 (새창열림)

'HTML + CSS > Clone Coding' 카테고리의 다른 글

Dark Mode - Clone Coding (0)	2022.12.08

PREV 이전 1 NEXT 다음

개발자의 꿈을 향해 항해

HTML + CSS

Dark Mode - Clone Coding

'HTML + CSS > Clone Coding' 카테고리의 다른 글

드림코딩 / 반응형 헤더

'HTML + CSS > Clone Coding' 카테고리의 다른 글

+ Recent posts

티스토리툴바