TIL - 20250526

juniΒ·2025λ…„ 5μ›” 26일
TIL

TIL

λͺ©λ‘ 보기
18/317

πŸ“˜ 0526 ν•™μŠ΅ 정리

βœ… 예제 1: Google 클둠 νŽ˜μ΄μ§€

🧾 HTML (index.html)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google</title>
    <link rel="stylesheet" href="../../5-box-model/common.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#">Gmail</a></li>
                <li><a href="#">이미지</a></li>
                <li><a href="#">둜그인</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Google Logo" class="logo">
        <div class="search-bar">
            <input type="text" placeholder="Google 검색 λ˜λŠ” URL μž…λ ₯">
        </div>
        <div class="buttons">
            <button>Google 검색</button>
            <button>I'm Feeling Lucky</button>
        </div>
    </main>
    <footer>
        <div class="footer-left">
            <a href="#">κ΄‘κ³ </a>
            <a href="#">λΉ„μ¦ˆλ‹ˆμŠ€</a>
            <a href="#">κ²€μƒ‰μ˜ 원리</a>
        </div>
        <div class="footer-right">
            <a href="#">κ°œμΈμ •λ³΄</a>
            <a href="#">μ•½κ΄€</a>
            <a href="#">μ„€μ •</a>
        </div>
    </footer>
</body>
</html>

🎨 CSS (styles.css)

body {
    background: #f8f8f8;
}
header {
    height: 5vh;
}
header ul {
    display: flex;
    justify-content: right;
    padding: 10px;
}
header ul li {
    margin-left: 20px;
}
header ul li a {
    font-size: 16px;
    color: dimgray;
}
main {
    height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
main img {
    width: 30%;
    margin-bottom: 10px;
}
main .search-bar input[type=text] {
    font-weight: 700;
    width: 30vh;
    padding: 14px;
    border-radius: 25px;
    border: 1px solid #e3e3e3;
    box-shadow: 0px 0px 6px lightgray;
    transition: .4s;
}
main .search-bar input[type=text]:focus {
    width: 35vh;
    outline: none;
}
main .buttons button {
    font-weight: 700;
    background: #f8f8f8;
    border: none;
    box-shadow: 0 3px 4px #e8e8e8;
    padding: 10px;
}
footer {
    height: 5vh;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
}
footer a {
    font-size: 16px;
    color: dimgray;
}

βœ… 예제 2: Instagram 클둠 νŽ˜μ΄μ§€

🧾 HTML (index.html)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Instagram</title>
    <link rel="stylesheet" href="../../5-box-model/common.css">
    <link rel="stylesheet" href="main.css" />
</head>
<body>
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
</body>
</html>

🎨 CSS (main.css) 쀑 μ£Όμš” μŠ€νƒ€μΌ

body {
    display: flex;
    flex-direction: column;
}
header nav {
    display: flex;
    box-shadow: 0 3px 3px lightgray;
}
nav .logo { flex: 2; }
nav .search-bar { flex: 6; }
nav .nav-icons { flex: 2; display: flex; justify-content: right; }
main {
    flex: 5;
    background: #f8f8f8;
}
main .content-container {
    display: flex;
    justify-content: center;
}
footer {
    height: 10%;
    box-shadow: 0 -2px 3px lightgray;
    display: flex;
    justify-content: center;
}
profile
juni
λ‹€μŒ 포슀트

TIL - 20250527

0개의 λŒ“κΈ€