๐Ÿ’œ HTML,CSS

HTML&CSS ์‹ค์Šต5 (์ •๋ฆฌx)

Genie_. 2024. 3. 23. 22:08
728x90
๋ฐ˜์‘ํ˜•
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>๊ฐ€์ƒ์‹ค์Šต</title>
    <link rel="stylesheet" href="240318_๊ฐ€์ƒ์‹ค์Šต.css">
</head>
<body>
    <header>
        <ul>
            <li><a href="#info">์ด์šฉ์•ˆ๋‚ด</a></li>
            <li><a href="#intro">๊ฐ์‹ค ์†Œ๊ฐœ</a></li>
            <li><a href="#price">์˜ˆ์•ฝ ๋ฐฉ๋ฒ• ๋ฐ ์š”๊ธˆ</a></li>
            <li><a href="#">์˜ˆ์•ฝํ•˜๊ธฐ</a></li>
            <li><input type="text"/></li>
        </ul>

    </header>
    <main>
        <section id="info">
            <h1>์ด์šฉ ์•ˆ๋‚ด</h1>
            <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta ipsa minus neque quae quod tempore voluptas voluptates. Nihil, porro, veniam! A alias aliquam atque eaque nam nihil numquam officia quaerat.</div>
        </section>

        <section id="intro">
            <h1>๊ฐ์‹ค ์†Œ๊ฐœ</h1>
            <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda, aut autem commodi cupiditate eaque enim et eveniet facilis magni nam non nulla obcaecati odit quibusdam quod suscipit temporibus voluptas!</div>
        </section>

        <section id="price">
            <h1>์˜ˆ์•ฝ ๋ฐฉ๋ฒ• ๋ฐ ์š”๊ธˆ</h1>
            <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, assumenda autem, cupiditate deleniti dolorem, eius eligendi et in incidunt ipsa itaque labore numquam omnis repellendus sequi soluta sunt tempora voluptatem!</div>
        </section>
    </main>
</body>
</html>
* {
    margin: 0px;
    padding: 0px;
}

header{
    display: flex;
    align-items: center;
    border-bottom: 2px solid black;
    box-sizing: border-box;
    padding: 0 10px;
    height: 50px;
}

ul{
    list-style: none;
}

li{
    display: inline-block;
}

a{
    margin: 0 10px;
    border-radius: 5px;
    padding: 5px 10px;
    text-decoration: none;
    color: white;
    background-color: black;
    box-sizing: border-box;
}

a:hover{
    /* ๋งˆ์šฐ์Šค ์ปค์„œ ์˜ฌ๋ ธ์„๋•Œ ๋ฐ”๋€Œ๋Š” ์ƒ‰ */
    background-color: white;
    color: black;
    border: 1px solid black;
}
input:focus{ /* ์ปค์„œ๋ฅผ ๋ˆŒ๋ €์„ ๋•Œ ๋ฐ”๋€Œ๋Š” ์ƒ‰ */ }

input{
    /*border:none;*/
    border: 2px solid black;
    border-radius: 8px;
    font-size: 15px;
    padding: 2px 5px;
}
/* link - visited - hover - active ์ˆœ์„œ๋กœ ์ •์˜ํ•ด์•ผํ•จ */
/*input:active{*/
/*    background-color: black;*/

input:focus{ /* input ํ…Œ๋‘๋ฆฌ ์—†์•จ๋•Œ๋Š” focus - outline !! */
    outline: none;
}

main{
    width: 500px;
    margin: 0 auto;
}

section{
    margin: 20px 0;
    padding: 20px 10px;
    border: 1px solid black;
    border-radius: 5px;
}

h1{
    margin: 10px 0;
}

section:target{
    background-color: #ffd6de;
}

728x90
๋ฐ˜์‘ํ˜•
์ €์ž‘์žํ‘œ์‹œ ๋น„์˜๋ฆฌ ๋ณ€๊ฒฝ๊ธˆ์ง€