無제

Coding Rules 십계명

yo-u-loo — Fri, 8 May 2026 14:19:08 +0900

가독성 : 코드는 먼저 읽히게 만들지어다

작성보다 “읽는 사람”을 항상 먼저 생각하라. 미래의 너도 포함이다.

단순성 : 복잡함은 실력이 아니라 빚이다
똑똑해 보이려는 코드일수록 버그가 숨어 있다.

모듈성 : 하나의 함수는 하나의 일만 하게 하라
욕심 많은 함수는 반드시 사고 친다.

일관성 : 네이밍과 구조는 철학을 통일하라
a, b, temp는 지난 시대의 유물이다.

명확성 : “아마 이럴 거야” 코드는 금지다
추측이 들어간 코드는 결국 디버깅 지옥이다.

검증성 : 믿지 말고 테스트하라
코드는 작동하는 순간이 아니라, 테스트를 통과할 때 완성이다.

예방성 : 에러를 처리하지 말고 만들지 말라
try-catch는 보험이지 설계가 아니다.

⚙️ 자동화 : 손으로 두 번 하면 이미 지는 게임이다 ⚙️
반복 작업은 인간이 할 일이 아니다.

의존성 : 외부에 기대는 만큼 취약해진다
필요한 것만 들이고, 나머지는 과감히 버려라.

유지보수성 : 오늘의 너는 내일의 적이다
“왜 이렇게 짰지?”라는 질문이 안 나오게 설계하라.

[RWD AND AWD] 적응형 반응형 웹 사이트 코딩 실무 예제

yo-u-loo — Thu, 16 Apr 2026 17:35:21 +0900

HD 1366 최적화

http://127.0.0.1:5500/index5.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3.0">
    <title>m</title>
    <link rel="stylesheet" href="style5.css">
    <style type="text/css"></style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="script.js"></script>
    <script type="text/javascript"></script>
</head>
<body>
    <main>
        <header>
            <div>rwd and awd</div>
            <nav>≡</nav>
        </header>
        <div>
            <h1>Adorable people</h1>
            <p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.</p>
            <button>Read more</button>
        </div>
    </main>
    <article class="get-text">
        <h2>Get Choose twin train</h2>
        <p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages. <br>And more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        <div>
            <img src="https://cdn3.iconfinder.com/data/icons/picons-social/57/56-apple-512.png">
            <img src="https://cdn3.iconfinder.com/data/icons/picons-social/57/56-apple-512.png">
            <img src="https://cdn3.iconfinder.com/data/icons/picons-social/57/56-apple-512.png">
            <img src="https://cdn3.iconfinder.com/data/icons/picons-social/57/56-apple-512.png">
        </div>
    </article>
    <article class="get">
    <div>
        <h2>Get the storm</h2>
        <p>Vivamus turpis purus, fringilla id enim in, vehicula suscipit ex.<br>Phasellus a augue posuere.<br>&nbsp;</br></p>
        <p>All the Lorem Ipsum generators on the Internet tend to repeat <br>predefined chunks as necessary, making this the first true generator on the Internet.<br>It uses a dictionary of over 200 Latin words, <br>&nbsp;</br>combined with a handful of model sentence structures, <br>to generate Lorem Ipsum which looks reasonable. <br>The generated Lorem Ipsum is therefore always free from repetition, <br>injected humour, or non-characteristic words etc. <br>All the Lorem Ipsum generators on the Internet tend to repeat <br></p>
        <button>View</button>
    </div>
</article>
    <article class="bespoke-text">
        <h2>Bespoke-building</h2>
        <p>Sed faucibus condimentum dictum. <br>Fusce sed orci suscipit, molestie nulla quis, sollicitudin dui.<br> Sed ante elit, molestie sit amet nulla id, malesuada porta libero. Mauris eu felis ornare, congue odio vel, dapibus odio. <br>Maecenas laoreet quam nec justo ultricies malesuada.<br> Vivamus et metus ut risus venenatis tempus vel ac arcu. Vestibulum ultricies mollis mauris.</p>
    </article>
    <article class="bespoke">
        <section onclick="window.location.href='https://www.google.com/'">
            <div>
                <h3>Donec quis</h3>
                <button>January</button>
            </div>
        </section>
        <section onclick="window.location.href='https://www.google.com/'">
            <div>
                <h3>Laoreet</h3>
                <button>February</button>
            </div>
        </section>
        <section onclick="window.location.href='https://www.google.com/'">
            <div>
                <h3>Posuere</h3>
                <button>March</button>
            </div>
        </section>
    </article>
    <article class="design-text">
        <h2>design-award-winner</h2>
        <p>Suspendisse a blandit nibh. Praesent vel eros metus. <br>Fusce at orci nec nisi bibendum consectetur quis nec neque. <br>Aliquam mattis, ligula non fermentum dictum, nisl eros efficitur ex, quis faucibus turpis lacus sit amet velit. <br>Vestibulum aliquet vehicula rhoncus. Integer ut commodo nunc. <br>Ut fringilla lectus a eros tristique, nec fermentum velit condimentum.</p>
    </article>
    <article class="design">
        <section>
            <div>
                <button>First</button>
            </div>
        </section>
        <section>
            <div>
                <button>Second</button>
            </div>
        </section>
        <section>
            <div>
                <button>Third</button>
            </div>
        </section>
        <section>
            <div>
                <button>Fourth</button>
            </div>
        </section>
    </article>
    <article class="greetings">
        <div>⥢</div>
        <div>⥤</div>
        <h2>Greetings</h2>
        <div>
            <img src="https://cdn3.iconfinder.com/data/icons/picons-social/57/56-apple-512.png">
            <img src="https://cdn3.iconfinder.com/data/icons/picons-social/57/56-apple-512.png">
            <img src="https://cdn3.iconfinder.com/data/icons/picons-social/57/56-apple-512.png">
            <img src="https://cdn3.iconfinder.com/data/icons/picons-social/57/56-apple-512.png">
            <img src="https://cdn3.iconfinder.com/data/icons/picons-social/57/56-apple-512.png">
            <img src="https://cdn3.iconfinder.com/data/icons/picons-social/57/56-apple-512.png">
        </div>
        <div>
            <p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages. <br>And more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
    </article>
    <article class="event">
        <h2>Event</h2>
        <table>
            <tr>
                <td width="100px">No</td>
                <td width="200px">Update</td>
                <td width="700px">Title</td>
            </tr>
            <tr>
                <td>31</td>
                <td>MAR 2019</td>
                <td>Nam ut fermentum nisl. Nunc sed purus sit amet nisi finibus faucibus nec dictum turpis</td>
            </tr>
            <tr>
                <td>01</td>
                <td>SEP 2019</td>
                <td>Duis consectetur et enim scelerisque gravida. Donec leo felis.</td>
            </tr>
            <tr>
                <td>04</td>
                <td>JAN 2018</td>
                <td>Suspendisse maximus hendrerit erat, imperdiet cursus arcu ultrices non maximus.</td>
            </tr>
        </table>
    </article>
    <footer>
        <div>
            <h2>Join us</h2>
            <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. <br>The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
            <form>
                <div>
                    <label for="name">Name</label>
                    <input type="text" name="name" id="name">
                </div>
                <div>
                    <label for="email">Email</label>
                    <input type="email" name="email" id="email">
                </div>
                <div>
                    <label for="message">message</label>
                    <textarea name="message" id="message"></textarea>
                </div>
                <div>
                    <button type="submit" name="submit" id="submit">Submit</button>
                </div>
            </form>
        </div>
    </footer>
    <address>
        <div>
            <h2>Contact us</h2>
            <p>Where can I get some?<br> Museum of London, 150 London Wall, Barbican, London EC2Y 5HN England<br> 010-0000-0000</p>
        </div>
    </address>
</body>
</html>

@charset "utf-8";
@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");
@import url("https://fonts.googleapis.com/css?family=Oswald&display=swap");
@import url("https://fonts.googleapis.com/css?family=Playfair+Display&display=swap");

* {
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
    word-break: keep-all;
    outline: 0px solid red;
}

img {
    width: 100px;
}

body {
    font-family: "Roboto", sans-serif;
    font-size: 0.9rem;
    line-height: 1rem;
    color: #999;
    letter-spacing: 0.1px;
}

h1,
h2,
h3 {
    font-family: "Oswald", sans-serif;
}

h1 {
    font-size: 4rem;
    line-height: 4rem;
    text-transform: uppercase;
}

h2 {
    font-size: 2.4rem;
    line-height: 2.4rem;
    text-transform: uppercase;
    margin-bottom: 1rem;
    text-align: center;
}

h3 {
    font-size: 1.4rem;
    line-height: 1.4rem;
}

h4,
h5 {
    font-family: "Playfair Display", serif;
}

h4 {
    font-size: 1.1rem;
    line-height: 1.1rem;
}

h5 {
    font-size: 0.7rem;
    line-height: 0.7rem;
}

a:link {
    color: #666;
    text-decoration: none;
}

a:visited {
    color: #666;
}

a:hover {
    color: red;
}

a:active {
    color: red;
}

button {
    font-size: 0.7rem;
    text-transform: uppercase;
    padding: 10px 30px;
    border: 1px solid #ccc;
    background: white;
    cursor: pointer;
    transition: 0.3s;
}

button:hover {
    background: crimson;
    color: white;
}

/* mobile start */

main {
    position: relative;
    background: url("https://images.unsplash.com/photo-1445384763658-0400939829cd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80") no-repeat;
    background-size: cover;
    background-position: top left;
    height: 600px;
    color: white;
}

main header {
    padding: 0 10%;
    text-transform: uppercase;
    line-height: 5rem;
    display: flex;
    justify-content: space-between;
}

main header div {
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    transition: 0.8s;
}

main header div:hover {
    color: yellow;
}

main header nav {
    font-size: 3rem;
    cursor: pointer;
    transition: 0.8s;    
}

main header nav:hover {
    background: black;
}

main > div {
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

main div p {
    padding: 16px 0;
}

.get-text {
    padding: 80px 10%;
    text-align: center;
}

.get-text div {
    padding: 20px;
}

.get-text div img {
    width: 80px;
    margin: 2px 2%;
    opacity: 0.4;
    cursor: pointer;
    transition: 0.8s;
}

.get-text div img:hover {
    opacity: 1;
}

.get {
    background: url("https://images.unsplash.com/photo-1500907789384-0c3b4c3bdce4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80") no-repeat;
    background-size: cover;
    background-position: center center;
    height: 500px;
    color: white;
    display: flex;
    flex-direction: row-reverse;
}

.get div {
    background: rgba(0, 0, 0, 0.5);
    width: 50%;
    height: 100%;
    padding: 80px 5%;
}

.get :nth-child(1) {
    text-align: left;
}

.get :nth-child(3) {
    display: none;
}

.get :nth-child(4) {
    margin: 32px 0 0;
}

.bespoke-text {
    padding: 80px 10%;
    text-align: center;
}

.bespoke section {
    height: 500px;
    color: white;
    text-align: center;
}

.bespoke > :nth-child(1) {
    background: url("https://images.unsplash.com/photo-1545912453-3d32e20f72bf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80") no-repeat;
    background-size: cover;
    background-position: center center;
}

.bespoke > :nth-child(2) {
    background: url("https://images.unsplash.com/photo-1513207565459-d7f36bfa1222?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=635&q=80") no-repeat;
    background-size: cover;
    background-position: center center;
}

.bespoke > :nth-child(3) {
    background: url("https://images.unsplash.com/photo-1484399172022-72a90b12e3c1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80") no-repeat;
    background-size: cover;
    background-position: center center;
}

.bespoke section div {
    background: rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 80px 25%;
    cursor: pointer;
    transition: 0.8s;
}

.bespoke section div:hover {
    background: rgba(0, 0, 0, 0.7);
}

.bespoke section div button {
    background: none;
    color: white;
}

.design-text {
    padding: 80px 10%;
    text-align: center;
}

.design section {
    height: 140px;
}

.design > :nth-child(1) {
    background: url("https://images.unsplash.com/photo-1462804993656-fac4ff489837?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80") no-repeat;
    background-size: cover;
    background-position: top center;
}

.design > :nth-child(2) {
    background: url("https://images.unsplash.com/photo-1438109491414-7198515b166b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80") no-repeat;
    background-size: cover;
    background-position: top center;
}

.design > :nth-child(3) {
    background: url("https://images.unsplash.com/photo-1567468219153-4b1dea5227ea?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80") no-repeat;
    background-size: cover;
    background-position: top center;
}

.design > :nth-child(4) {
    background: url("https://images.unsplash.com/photo-1560748526-881455a4e9b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80") no-repeat;
    background-size: cover;
    background-position: top center;
}

.design section div {
    background: rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: 0.8s;
}

.design section div:hover {
    background: rgba(0, 0, 0, 0.7);
}

.design section div button {
    background: none;
    color: white;
}

.greetings {
    position: relative;
    padding: 80px 10%;
    text-align: center;
}

.greetings > :nth-child(1),
.greetings > :nth-child(2) {
    position: absolute;
    font-size: 2rem;
    font-weight: bold;
    padding: 16px 20px;
    top: 50%;
    cursor: pointer;
    transition: 0.8s;
}

.greetings > :nth-child(1):hover,
.greetings > :nth-child(2):hover {
    background: crimson;
    color: white;
}

.greetings > :nth-child(1) {
    left: 10%;
}

.greetings > :nth-child(2) {
    right: 10%;
}

.greetings :nth-child(4) img {
    width: 80px;
    margin: 2px 2%;
    opacity: 0.4;
    cursor: pointer;
    transition: 0.4s;
}

.greetings :nth-child(4) img:hover {
    opacity: 1;
}

.event {
    display: none;
}

footer {
    background: #222;
    padding: 80px 10%;
}

footer h2 {
    color: #aaa;
    text-align: left;
}

footer div form div {
    padding: 8px 0;
    display: flex;
    flex-direction: column;
}

footer div form div label {
    line-height: 2.4rem;
}

footer div form div input {
    width: 240px;
    padding: 10px;
}

footer div form div textarea {
    width: 240px;
    height: 90px;
    padding: 10px;
}

footer div form div button {
    width: 240px;
}

address {
    background: #333;
    padding: 80px 10%;
}

address h2 {
    color: #aaa;
    text-align: left;
}

/* laptop start */

@media screen and (min-width: 1366px) {
    main {
        height: 800px;
    }
    .get :nth-child(3) {
        display: block;
}
    .bespoke {
        display: flex;
    }

    .bespoke section {
        height: 600px;
        width: 100%;
    }

    .design {
        display: flex;
        flex-wrap: wrap;
    }

    .design section {
        width: 50%;
        height: 400px;
    }
    
    .greetings {
        width: 1000px;
        margin: 0 auto;
    }

    .event {
        display: block;
        background: #eee;
        padding: 80px 0;
    }

    .event table {
        width: 1000px;
        margin: 0 auto;
        border-collapse: collapse;
    }

    .event table tr {
        border-bottom: 1px solid #ddd;
        cursor: pointer;
        transition: 0.8s;
    }

    .event table tr:hover {
        background: white;
    }

    .event table tr td {
        padding: 16px;
    }

    footer div {
        width: 1000px;
        margin: 0 auto;
    }

    address div {
        width: 1000px;
        margin: 0 auto;
    }
}

/* end */

[RWD] 반응형 웹 사이트 코딩 실무 예제

yo-u-loo — Tue, 14 Apr 2026 11:00:53 +0900

http://127.0.0.1:5500/index4.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3.0" />
    <title>m</title>
    <link rel="stylesheet" href="style4.css" />
    <style type="text/css"></style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="script.js"></script>
    <script type="text/javascript"></script>
</head>
<body>
    <header>
        <div>RWD</div>
        <nav>☰</nav>
    </header>
    <main>
        <div>
            <h2>Flagship store</h2>
            <small>Fusce lobortis porta eros.</small>
            <p>Donec accumsan gravida molestie. Suspendisse aliquet nulla vel varius volutpat.</p>
            <button>Read more</button>
        </div>
    </main>
    <article class="products">
        <h2>Products</h2>
        <img src="https://images.unsplash.com/photo-1549217272-1c31166a69f5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1867&q=80" />
        <div>
            <span>▬</span>
            <span>▬</span>
            <span>▬</span>
            <span>▬</span>
            <span>▬</span>
        </div>
    </article>
    <article class="thought">
        <h2>Thought of Lya</h2>
        <section>
            <div>
                <h4>Nullam venenatis</h4>
                <p>Morbi fermentum enim eget volutpat ornare.</p>
            </div>
        </section>
                <section>
            <div>
                <h4>Mauris</h4>
                <p>Suspendisse consequat neque at neque tincidunt porta.</p>
            </div>
        </section>
        <section>
            <div>
                <h4>Sed in risus</h4>
                <p>Nullam et porttitor lorem, ac lobortis sem. Etiam dignissim.</p>
            </div>
        </section>
    </article>
    <article class="icon">
        <section>
            <img src="https://cdn3.iconfinder.com/data/icons/picons-social/57/56-apple-512.png" />
            <p>Infor</p>
        </section>
        <section>
            <img src="https://cdn3.iconfinder.com/data/icons/picons-social/57/56-apple-512.png" />
            <p>Cs center</p>
        </section>
        <section>
            <img src="https://cdn3.iconfinder.com/data/icons/picons-social/57/56-apple-512.png" />
            <p>About</p>
        </section>
    </article>
    <article class="three">
        <div>
            <section>Infor</section>
            <section>Cs center</section>
            <section>About</section>
        </div>
    </article>
    <footer>
        <h3>Lyanature co.</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipiscing elit. <br />
        Duis faucibus nulla quam, ut venenatis dui mollis non. Integer varius
        bibendum diam vehicula pellentesque.<br />
        Suspendisse quis mattis nisi.<br />
        Duis sed placerat dui<br /></p>
    </footer>
</body>
</html>

@charset "utf-8";
@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");
@import url("https://fonts.googleapis.com/css?family=Oswald&display=swap");
@import url("https://fonts.googleapis.com/css?family=Playfair+Display&display=swap");

* {
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
    word-break: keep-all;
    outline: 0px solid red;
}

img {
    width: 100px;
}

body {
    font-family: "Roboto", sans-serif;
    font-size: 0.9rem;
    line-height: 1rem;
    color: #999;
    letter-spacing: 0.1px;
}

h1,
h2,
h3 {
    font-family: "Oswald", sans-serif;
}

h1 {
    font-size: 4rem;
    line-height: 4rem;
    text-transform: uppercase;
}

h2 {
    font-size: 2.4rem;
    line-height: 2.4rem;
    text-transform: uppercase;
}

h3 {
    font-size: 1.4rem;
    line-height: 1.4rem;
    margin-bottom: 1rem;
}

h4,
h5 {
    font-family: "Playfair Display", serif;
}

h4 {
    font-size: 1.1rem;
    line-height: 1.1rem;
    margin-bottom: 1rem;
}

h5 {
    font-size: 0.7rem;
    line-height: 0.7rem;
}

a:link {
    color: #666;
    text-decoration: none;
}

a:visited {
    color: #666;
}

a:hover {
    color: red;
}

a:active {
    color: red;
}

button {
    font-size: 0.7rem;
    text-transform: uppercase;
    padding: 10px 30px;
    border: 1px solid #ccc;
    background: white;
    transition: 0.3s;
}

button:hover {
    background: crimson;
    color: white;
    cursor: pointer;
}

/* start */

header {
    background: black;
    padding: 0 10%;
    display: flex;
    justify-content: space-between;
    line-height: 4rem;
    font-weight: bold;
}

header div {
    font-size: 1.8rem;
    cursor: pointer;
    transition: 0.8s;

}

header nav {
    font-size: 2rem;
    cursor: pointer;
    transition: 0.8s;

}

header div:hover,
header nav:hover {
    color: white;
}

main {
    background: url("https://images.unsplash.com/photo-1523885140068-cafbdc242af7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1651&q=80") no-repeat;
    background-size: cover;
    background-position: top center;
    height: 600px;
    padding: 0 10%;
    display: flex;
    justify-content: center;
    align-items: end;
    text-align: center;
}

main div {
    background: white;
    padding: 40px 40px 80px;
    margin: 0 0 60px;
}

main div * {
    margin: 0 0 16px;
}

.products {
    background: #eee;
    margin: 0 0 70px;
    padding: 96px 10%;
    text-align: center;
}

.products img {
    width: 100%;
    margin: 40px 0;
}

.products div {
    color: #aaa;
    font-size: 2.5rem;
}

.products div span {
    cursor: pointer;
    transition: 0.8s;
}

.products div span:hover {
    color: blue;
}

.thought {
    margin: 0 0 70px;
    padding: 0 10%;
    text-align: center;
}

.thought section {
    height: 450px;
    margin: 70px 0 0;
    display: flex;
    justify-content: center;
    align-items: end;
}

.thought > :nth-child(2) {
    background: url("https://images.unsplash.com/photo-1554051852-b6639645165b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1834&q=80") no-repeat;
    background-size: cover;
    background-position: top center;
}

.thought > :nth-child(3) {
    background: url("https://images.unsplash.com/photo-1548924607-fd498b796071?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80") no-repeat;
    background-size: cover;
    background-position: top center;
}

.thought > :nth-child(4) {
    background: url("https://images.unsplash.com/photo-1531972111231-7482a960e109?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1651&q=80") no-repeat;
    background-size: cover;
    background-position: top center;
}

.thought section div {
    background: white;
    width: 80%;
    padding: 40px;
}

.icon {
    background: #ccc;
    padding: 64px 10%;
    display: flex;
    text-align: center;
    color: white;
    text-transform: uppercase;
}

.icon section {
    width: 100%;
}

.icon section img {
    width: 80px;
    opacity: 0.6;
    cursor: pointer;
    transition: 0.8s;
}

.icon section img:hover {
    opacity: 1;
}

.three {
    background: #eee;
    padding: 0 10%;
    text-align: center;
    text-transform: uppercase;
    line-height: 5rem;
}

.three div {
    display: flex;
}

.three div section {
    width: 100%;
    cursor: pointer;
    transition: 0.8s;
}

.three div section:hover {
    background: #333;
    color: white;
}

footer {
    padding: 64px 10%;
    text-align: center;
}

/* end */

[Active and fixed] 유저의 움직임에 반응하는 웹사이트 코딩 실무 예제

yo-u-loo — Fri, 10 Apr 2026 15:45:25 +0900

FHD 1920 최적화

http://127.0.0.1:5500/index3.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3.0" />
    <title>m</title>
    <link rel="stylesheet" href="style3.css" />
    <style type="text/css"></style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="script.js"></script>
    <script type="text/javascript"></script>
</head>
<body>
    <main>
        <header>
            <div>Active and static</div>
            <nav>
                <div>January</div>
                <div>February</div>
                <div>March</div>
                <div>April</div>
                <div>May</div>
            </nav>
        </header>
        <div>
            <h4>All the Lorem Ipsum generators</h4>
            <h1>A perfect bouquet</h1>
            <p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.</p>
            <button>Read more</button>
        </div>
    </main>
    <article class="introducing">
        <div>
            <h2>INTRODUCING</h2>
            <span class="solid">―</span>
            <h4>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical</h4>
            <p>Many desktop publishing packages and web page editors now use Lorem
        Ipsum as their default model text, and a search for 'lorem ipsum' will
        uncover many web sites still in their infancy.<br />&nbsp;<br /></p>
        <button>Read more</button>
        </div>
        <div>
            <video width="480" controls>
                <source src="https://videos.ctfassets.net/8cd2csgvqd3m/jwIHo8C4pdbh2Z96IYyoT/c400db2da73a6cd1393be6cc40746127/15_sek_H9_4K_nographics.mp4" type="video/mp4" />
            </video>
        </div>
    </article>
    <article class="products">
        <div>
            <div>
                <h2>our products</h2>
                <span class="solid">―</span>
            </div>
            <div>
                <h4>Sed non orci ut arcu mattis facilisis</h4>
            </div>
        </div>
        <div>
            <section>
                <div>sale</div>
                <img src="https://images.unsplash.com/photo-1494337095615-b5f370aad75f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" />
                <h5>Etiam nec ligula</h5>
                <p>$40.000</p>
            </section>
            <section>
                <div>sale</div>
                <img src="https://images.unsplash.com/photo-1518709779341-56cf4535e94b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" />
                <h5>rutrum sagittis</h5>
                <p>$57.000</p>
            </section>
            <section>
                <div>sale</div>
                <img src="https://images.unsplash.com/photo-1525247923538-c105d2dd605d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=646&q=80" />
                <h5>Mauris odio</h5>
                <p>$82.000</p>
            </section>
            <section>
                <div>sale</div>
                <img src="https://images.unsplash.com/photo-1488323424590-6e1018104c27?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=652&q=80" />
                <h5>Interdum et malesuada</h5>
                <p>$160.800</p>
            </section>
        </div>
    </article>
    <article class="look">
        <div>
            <img src="https://images.unsplash.com/photo-1502089418555-ebcba08cb377?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1300&q=80" />
            <img src="https://images.unsplash.com/photo-1453372755486-254d0e724b38?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1052&q=80" />
        </div>
        <div>
            <div>
                <h2>Look book</h2>
                <span class="solid">―</span>
                <h4>2016 It has survived not only five centuries</h4>
                <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetu. <br />&nbsp; <br /></p>
                <button>Read more</button>
            </div>
            <img src="https://images.unsplash.com/photo-1484676681417-64a0ea3475fd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" />
        </div>
    </article>
    <article class="our">
        <div>
            <div>
                <h2>Our friends</h2>
                <span class="solid">―</span>
            </div>
        </div>
        <div>
            <a href="#"><img src="https://cdn3.iconfinder.com/data/icons/picons-social/57/56-apple-512.png"></a>
            <a href="#"><img src="https://cdn3.iconfinder.com/data/icons/picons-social/57/56-apple-512.png"></a>
            <a href="#"><img src="https://cdn3.iconfinder.com/data/icons/picons-social/57/56-apple-512.png"></a>
            <a href="#"><img src="https://cdn3.iconfinder.com/data/icons/picons-social/57/56-apple-512.png"></a>
            <a href="#"><img src="https://cdn3.iconfinder.com/data/icons/picons-social/57/56-apple-512.png"></a>
        </div>
    </article>
    <article class="meet">
        <div>
            <div>
                <h2>Meet our team</h2>
                <span class="solid">-</span>
            </div>
            <div>
                <h4>Contrary to popular belief that</h4>
            </div>
        </div>
        <div>
            <section>
                <div onclick="window.location.href='#'"></div>
                <img src="https://images.unsplash.com/photo-1551292831-023188e78222?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" />
                <h3>Fusce luctus</h3>
                <h5>CEO / Strategy specialist</h5>
                <p>The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters.</p>
            </section>
            <section>
                <div onclick="window.location.href='#'"></div>
                <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" />
                <h3>Ut finibus</h3>
                <h5>Designer / UX professional</h5>
                <p>In tincidunt metus sed ultrices porta. Donec venenatis nisi non pharetra lobortis.</p>
            </section>
            <section>
                <div onclick="window.location.href='#'"></div>
                <img src="https://images.unsplash.com/photo-1556632973-57d167636a3f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" />
                <h3>Etiam fermentum</h3>
                <h5>Developer / Backend</h5>
                <p>Nam tincidunt ex ut sapien rhoncus dapibus. Donec sodales diam et ipsum eleifend aliquam.</p>
            </section>
        </div>
    </article>
    <footer>
        <div>
            <section>
                <h3>NIRO</h3>
                <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters.</p>
            </section>
            <section>
                <h3>CONTACT</h3>
                <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
            </section>
            <section>
                <h3>LATEST POST</h3>
                <p>If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary.</p>
            </section>
        </div>
    </footer>
    <address>
        <p>Where can I get some?<br />
        Museum of London, 150 London Wall, Barbican, London EC2Y 5HN England<br />
        010-0000-0000</p>
    </address>
</body>
</html>

@charset "utf-8";
@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");
@import url("https://fonts.googleapis.com/css?family=Oswald&display=swap");
@import url("https://fonts.googleapis.com/css?family=Playfair+Display&display=swap");

* {
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
    word-break: keep-all;
    outline: 0px solid blue;
}

img {
    width: 100px;
}

body {
    font-family: "Roboto", sans-serif;
    font-size: 0.9rem;
    line-height: 1rem;
    color: #999;
    letter-spacing: 0.1px;
}

h1,
h2,
h3 {
    font-family: "Oswald", sans-serif;
}

h1 {
    font-size: 4rem;
    line-height: 4rem;
    text-transform: uppercase;
}

h2 {
    font-size: 2.4rem;
    line-height: 2.4rem;
    text-transform: uppercase;
}

h3 {
    font-size: 1.4rem;
    line-height: 1.4rem;
    margin-bottom: 1.6rem;
}

h4,
h5 {
    font-family: "Playfair Display", serif;
}

h4 {
    font-size: 1.1rem;
    line-height: 1.1rem;
    margin-bottom: 1.6rem;
}

h5 {
    font-size: 0.7rem;
    line-height: 0.7rem;
    margin-bottom: 1.6rem;
}

a:link {
    color: #666;
    text-decoration: none;
}

a:visited {
    color: #666;
}

a:hover {
    color: red;
}

a:active {
    color: red;
}

button {
    font-size: 0.7rem;
    text-transform: uppercase;
    padding: 10px 30px;
    border: 1px solid #ccc;
    background: white;
    cursor: pointer;
    transition: 0.3s;
}

button:hover {
    background: crimson;
    color: white;
}

/* start */

.solid {
    font-size: 4rem;
    line-height: 2rem;
    color: #999;
}

main {
    position: relative;
    background: url("https://images.unsplash.com/photo-1453372755486-254d0e724b38?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1952&q=80") no-repeat;
    background-size: cover;
    background-position: center center;
    height: 800px;
    margin: 0 0 70px;
    color: white;
    text-align: center;
}

main header {
    width: 1000px;
    margin: 0 auto;
    padding: 16px 0;
    display: flex;
    justify-content: space-between;
    text-transform: uppercase;
    font-size: 1rem;
    line-height: 4rem;
}

main > header > div {
    font-size: 1.5rem;
    font-weight: bold;
    transition: 0.8s;
    cursor: pointer;
}

main > header > div:hover {
    color: yellow;
}

main header nav {
    display: flex;
}

main header nav div {
    padding: 0 20px;
    cursor: pointer;
    transition: 0.8s;
}

main header nav div:hover {
    background: black;
}

main > div {
    position: absolute;
    width: 800px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    line-height: 3rem;
}

.introducing {
    width: 1000px;
    margin: 0 auto 70px;
    display: flex;
    justify-content: space-between;
}

.introducing > :first-child,
.introducing > :first-child {
    width: 480px;
}

.products {
    background: #eee;
    margin: 0 0 70px;
    padding: 70px 0;
}

.products > :first-child,
.products > :last-child {
    width: 1000px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.products > :last-child {
    text-align: center;
    margin: 50px auto 0;
}

.products > :last-child section {
    position: relative;
}

.products :last-child section div {
    position: absolute;
    background: red;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    color: white;
    text-transform: uppercase;
    line-height: 3.8rem;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    transition: 0.8s;
}

.products :last-child section div:hover {
    background: rgba(255, 0, 255, 0.6);
}

.products :last-child :nth-child(2) div,
.products :last-child :nth-child(4) div {
    display: none;
}

.products :last-child section img {
    background: yellow;
    width: 220px;
    height: 300px;
    margin: 0 0 30px;
    cursor: pointer;
    transition: 0.8s;
    border: 0px solid red;
}

.products :last-child section img:hover{
    border: 8px solid red;
}

.look {
    width: 1000px;
    margin: 0 auto 70px;
    display: flex;
    justify-content: space-between;
}

/* .look > :first-child,
.look > :last-child  {
} */

.look :first-child img,
.look :last-child img {
    width: 480px;
    margin: 0 0 40px;
}

.look :last-child div {
    background: #eee;
    width: 480px;
    padding: 100px 60px;
    margin: 0 0 40px;
}

.our {
    background: #ddd;
    margin: 0 0 70px;
    padding: 70px 0;
}

.our > :first-child,
.our > :last-child {
    width: 1000px;
    margin: 0 auto;
}

.our > :last-child {
    display: flex;
    justify-content: space-around;
}

.our > :last-child img {
    width: 80px;
    margin: 10px 0 0;
    opacity: 0.3;
    transition: 0.8s;
}

.our > :last-child img:hover {
    opacity: 1;
}

.meet {
    width: 1000px;
    margin: 0 auto 70px;
}

.meet > :first-child,
.meet > :last-child {
    display: flex;
    justify-content: space-between;
}

.meet :last-child section {
    position: relative;
    width: 300px;
    padding: 30px 20px;
    text-align: center;
}

.meet :last-child section div {
    position: absolute;
    background: rgba(0, 0, 0, 0.0);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    cursor: pointer;
    transition: 0.8s;
}

.meet :last-child section div:hover {
    background: rgba(0, 0, 0, 0.2);
    border: 10px solid rosybrown;
    border-radius: 20px;
}

.meet :last-child section img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin: 0 0 30px;
}

footer {
    background: #111;
    padding: 70px 0;
}

footer div {
    width: 1000px;
    margin: 0 auto;
    display: flex;
}

footer div section {
    width: 100%;
    padding: 0 20px 0 0;
}

address {
    background: #222;
    padding: 70px 0;
    text-align: center;
}

/* end */

[Flexible and fixed] 브라우저 넓이에 반응하는 웹사이트 코딩 실무 예제

yo-u-loo — Wed, 8 Apr 2026 12:38:39 +0900

FHD 1920 최적화

http://127.0.0.1:5500/index2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3.0">
    <title>m</title>
    <link rel="stylesheet" href="style2.css">
    <style type="text.css"></style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="script.js"></script>
    <script type="text/javascript"></script>
</head>
<body>
    <main>
        <div>
            <p>Flexible and hd</p>
            <h1>Variations passages available suffered</h1>
            <h3>A more beautiful world</h3>
            <p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form.</p>
            <button>View more</button>
            <div>● ● ● ● ●</div>
        </div>
        <div></div>
        <header>
            <div onclick="location.href ='javascript:void(0)'">Flexible and static</div>
            <nav>
                <ul>
                    <li onclick="location.href ='javascript:void(0)'">Janunary</li>
                    <li onclick="location.href ='javascript:void(0)'">February</li>
                    <li onclick="location.href ='javascript:void(0)'">March</li>
                    <li onclick="location.href ='javascript:void(0)'">April</li>
                    <li onclick="location.href ='javascript:void(0)'">May</li>
                </ul>
            </nav>
        </header>
    </main>
    <article class="team">
        <h2>I Team archives</h2>
        <div>
            <section>
                <p>Suspendisse facilisis luctus ullamcorper. Donec.</p>
                <div></div>
            </section>
            <section>
                <p>Phasellus sit amet lacus venenatis, bibendum ex scelerisque, faucibus orci. Suspendisse metus orci, egestas congue nulla bibendum, consectetur tincidunt libero. Sed tincidunt enim tristique tortor tempus dignissim.</p>
            </section>
            <section>
                <p>Duis ac gravida orci. Morbi ut ornare ligula. Sed tellus mauris, sagittis vitae tellus non, scelerisque ornare mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam commodo iaculis congue.</p>
            </section>
            <section>
                <p>Duis lobortis congue mauris quis.</p>
                <div></div>
            </section>
        </div>
    </article>
    <article class="brand">
        <h2>❙ Brnad social</h2>
        <h3>Manifesto</h3>
        <p>fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search</p>
    </article>
    <article class="beauty">
        <h2>I Beauty inside</h2>
        <div>
            <section>
                <p>You need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.</p>
            </section>
            <section>
                <p>If you are going</p>
                <div></div>
            </section>
            <section>
                <p>Praesent ultrices molestie</p>
                <div></div>
            </section>
            <section>
                <p>It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour</p>
            </section>
        </div>
    </article>
    <article class="why">
        <h2>Why do we use it?</h2>
        <p>It is a long established fact that a reader will be <br>distracted by the readable content of a page when looking at its layout.</p>
    </article>
    <article class="our">
        <h2>Our company</h2>
        <div>
            <div>
                <img src="https://images.unsplash.com/photo-1546538994-4f15d0aa966f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
            </div>
            <div>
                <h3>2020 year</h3>&nbsp;<br>
                &nbsp;<br>
                <p>Integer a faucibus erat. Integer tortor lectus, rhoncus nec neque eu, egestas aliquet nisi. <br>Donec porttitor dictum odio vitae porttitor. <br>Aenean efficitur est eu metus sagittis iaculis eget a justo. <br>Nunc venenatis sem in nibh dignissim elementum. <br>Pellentesque non ex et est sagittis efficitur. <br>Ut tincidunt, nunc sed pellentesque varius, purus ante faucibus quam, ac rutrum augue ipsum ac lectus. <br>Aenean sit amet condimentum erat. Maecenas a dignissim odio. Phasellus urna ante, iaculis eu venenatis vel, eleifend in arcu. <br>Integer quis luctus sapien. Suspendisse lobortis nisl leo, eget viverra libero commodo nec. <br>Ut accumsan sollicitudin lacus at ornare. Donec facilisis molestie ipsum, eget semper arcu consectetur a.</p>
            </div>
        </div>
        <p>Now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.<br> Various versions have evolved over the years, sometimes by accident.</p>
    </article>
    <article class="company">
        <h2>Company info</h2>
        <div>
            <section>
                <h3>Niro</h3>
                <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at
        its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters.</p>
            </section>
            <section>
                <h3>Contact</h3>
                <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at
        its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as
        opposed to using
        'Content here, content here', making it look like readable English.</p>
            </section>
            <section>
                <h3>Latest post</h3>
                <p>If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden
        in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as
        necessary.</p>
            </section>
        </div>
    </article>
    <footer>
        <h2>Contact us</h2>
        <p>Where can I get some? <address>of London, 150 London Wall, Barbican, London EC2Y 5HN England</address>010-0000-0000</p>
    </footer>
</body>
</html>

@charset "utf-8";
@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");
@import url("https://fonts.googleapis.com/css?family=Oswald&display=swap");
@import url("https://fonts.googleapis.com/css?family=Playfair+Display&display=swap");

* {
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
    word-break: keep-all;
    outline: 0px solid red;
}

img {
    width: 100px;
}

body {
    font-family: "Roboto", sans-serif;
    font-size: 0.9rem;
    color: #999;
    line-height: 1rem;
    letter-spacing: 0.1px;
}

h1, h2, h3 {
    font-family: "Oswald", sans-serif;
}

h1 {
    font-size: 4rem;
    line-height: 4rem;
    text-transform: uppercase;
}

h2 {
    font-size: 2.4rem;
    margin-bottom: 3rem;
    text-transform: uppercase;
    text-align: center;
}

h3 {
    font-size: 1.4rem;
    margin-bottom: 1rem;
}

h4, h5 {
    font-family: "Playfair Display", serif;
}

h4 {
    font-size: 1.1rem;
    line-height: 1.4rem;
}

h5 {
    font-size: 0.7rem;
    line-height: 2rem;
}

a:link {
    color: #666;
    text-decoration: none;
}

a:visited {
    color: #666;
}

a:hover {
    color: red;
}

a:active {
    color: red;
}

button {
    font-size: 0.7rem;
    text-transform: uppercase;
    padding: 10px 30px;
    border: 1px solid #ccc;
    background: white;
    transition: 0.3s;
}

button:hover {
    background: crimson;
    color: white;
    cursor: pointer;
}

/* start */

main {
    position: relative;
    background: url("https://images.unsplash.com/photo-1548924607-fd498b796071?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80") no-repeat;
    background-size: cover;
    background-position: center center;
    height: 1080px;
    margin: 0 0 40px;
    color: white;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1.5;
}

main > :nth-child(1) {
    z-index: 1;
    width: 600px;
    top: 200px;
}

main > :nth-child(1) * {
    padding: 0 0 16px;
}

main :nth-child(1) button {
    padding: 10px 30px;
}

main > :nth-child(2) {
    position: absolute;
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 100%;
}

main header {
    position: absolute;
    background: black;
    width: 1000px;
    bottom: -40px;
    display: flex;
    justify-content: space-between;
    text-transform: uppercase;
    line-height: 5rem;
}

main header div {
    font-weight: bold;
    padding: 0 32px;
}

/* main header nav {
} */

/* main header nav ul {
} */

main header nav ul li {
    display: inline-block;
    padding: 0 32px;
}

main header div:hover,
main header nav ul li:hover {
    background: silver;
    color: black;
}

main header div,
main header nav ul li {
    cursor: pointer;
    transition: 0.8s;
}

.team {
    padding: 80px 0;
}

.team > div {
    display: flex;
    flex-wrap: wrap;
}

.team div section {
    position: relative;
    background: #ccc;
    width: 50%;
    height: 800px;
    padding: 100px;
    color: white;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.team div section p {
    z-index: 1;
}

.team > div > :nth-child(1) {
    background: url("https://images.unsplash.com/photo-1550318708-b7aff53046e0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1834&q=80") no-repeat;
    background-size: cover;
    background-position: top center;
}

.team > div > :nth-child(4) {
    background: url("https://images.unsplash.com/photo-1549217272-1c31166a69f5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=967&q=8") no-repeat;
    background-size: cover;
    background-position: top center;
}

.team div section div {
    position: absolute;
    background:  rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 100%;
}

.brand {
    background: #eee;
    padding: 80px 30%;
    text-align: center;
}

.beauty {
    width: 1000px;
    margin: 0 auto;
    padding: 80px 0;
}

.beauty > div {
    display: flex;
    flex-wrap: wrap;
}

.beauty div section {
    position: relative;
    background: #ccc;
    width: 500px;
    height: 500px;
    padding: 100px;
    color: white;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.beauty div section p {
    z-index: 1;
}

.beauty > div > :nth-child(2) {
    background: url("https://images.unsplash.com/photo-1550318708-b7aff53046e0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1834&q=80") no-repeat;
    background-size: cover;
    background-position: top center;
}

.beauty > div > :nth-child(3) {
    background: url("https://images.unsplash.com/photo-1549217272-1c31166a69f5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=967&q=8") no-repeat;
    background-size: cover;
    background-position: top center;
}

.beauty div section div {
    position: absolute;
    background:  rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 100%;
}

.why {
    padding: 80px 0;
    text-align: center;
}

.our {
    background: url("https://images.unsplash.com/photo-1500870678590-71c79bae1e54?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80") no-repeat;
    background-size: cover;
    background-position: top center;
    background-attachment: fixed;
    padding: 80px 0;
    color: white;
}

.our > div {
    width: 1000px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

/* .our > div > :first-child {
} */

.our div :first-child img {
    width: 180px;
}

.our > div > :last-child {
    width: 770px;
    padding: 30px 0;
}

.our > p {
    padding: 32px;
    text-align: center;
}

.company {
    width: 1000px;
    margin: 0 auto;
    padding: 80px 0;
}

.company div {
    display: flex;
    justify-content: space-between;
}

.company div section {
    width: 320px;
    
}

footer {
    background: #eee;
    padding: 80px 0;
    text-align: center;
}

/* end */

[HD] HD 해상도에 최적화 된 웹사이트 코딩 실무 예제

yo-u-loo — Wed, 8 Apr 2026 12:36:22 +0900

HD 1366 최적화

http://127.0.0.1:5500/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>m</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <div>
            <a href="#" onclick="return false">hd</a>
        </div>
        <nav>
            <ul>
                <li><a href="#" onclick="return false">About</a></li>
                <li><a href="#" onclick="return false">Work</a></li>
                <li><a href="#" onclick="return false">Blog</a></li>
                <li><a href="#" onclick="return false">Recruit</a></li>
                <li><a href="#" onclick="return false">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <div>
            <h1>High definition</h1>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
        standard dummy text ever since the 1500s.</p>
        <button>Read more</button>
        </div>
    </main>
    <article class="topic">
        <section>
            <img src="https://images.unsplash.com/photo-1551369277-a930560141bb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1552&q=80">
            <h3>Hot Topic 01</h3>
            <p>2013/05/16</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
        standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make.</p>
        <button>Read more</button>
        </section>
        <section>
            <img src="https://images.unsplash.com/photo-1550856015-de3a3956c67d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80">
            <h3>Hot Topic 02</h3>
            <p>2015/02/31</p>
            <p>In blandit ultrices leo. In ut ante tortor. Pellentesque laoreet nunc felis, nec porta lectus cursus maximus.
        Ut nec risus vel velit suscipit mattis in tempus justo. Suspendisse a lacinia dui suscipit et.</p>
        <button>Read more</button>
        </section>
        <section>
            <img src="https://images.unsplash.com/photo-1550668180-3205f7bb6a9e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80">
            <h3>Hot Topic 03</h3>
            <p>2020/12/02</p>
            <p>Vestibulum massa sapien, sodales nec eros quis, ullamcorper feugiat tellus. Mauris placerat hendrerit euismod.
        Sed eget magna purus. In rutrum sed sem non faucibus. Nunc vel mollis elit. porttitor pulvinar.</p>
        <button>Read more</button>
        </section>
    </article>
    <article class="why">
        <h2>Why do we use it?</h2>
        <p>It is a long established fact that a reader will be <br>distracted by the readable content of a page when looking at its layout.</p>
    </article>
    <footer>
        <div>
            <div>
                [ facebook ] &nbsp;&nbsp;&nbsp; [twitter]
            </div>
            <address>
                70, Sanggye-ro, Nowon-gu, Seoul, Republic of Korea
            </address>
        </div>
    </footer>
</body>
</html>

@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css?family=Oswald&display=swap');
@import url('https://fonts.googleapis.com/css?family=Playfair+Display&display=swap');

* {
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
    word-break: keep-all;
    overflow-wrap: break-word;
    outline: 0px solid silver;
}

body {
    font-family: 'Roboto', sans-serif;
    font-size: 0.9rem;
    line-height: 1rem;
    color: #999;
    letter-spacing: 0.1px;
}

h1, h2, h3 {
    font-family: 'Oswald', sans-serif;
}

h1 {
    font-size: 4rem;
    line-height: 4rem;
    text-transform: uppercase;
}

h2 {
    font-size: 2.4rem;
    line-height: 2.4rem;
    text-transform: uppercase;
}

h3 {
    font-size: 1.4rem;
    line-height: 1.4rem;
}

h4, h5 {
    font-family: 'Playfair Display', serif;
}

h4 {
    font-size: 1.1rem;
    line-height: 1.1rem;
}

h5 {
    font-size: 0.7rem;
    line-height: 0.7rem;
}

a:link {
    color: #666;
    text-decoration: none;
}

a:visited {
    color: #666;
}

a:hover {
    color: red;
}

a:active {
    color: red;
}

button {
    font-size: 0.7rem;
    text-transform: uppercase;
    padding: 10px 30px;
    border: 1px solid #ccc;
    background: white;
    transform: 0.3s;
}

button:hover {
    background: crimson;
    color: white;
    cursor: pointer;
}

img {
    width: 100px;
}

/* start */

header, .topic, footer>div {
    width: 1000px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

header {
    line-height: 3.5rem;
    text-transform: uppercase;
}

header div {
    font-size: 1.6rem;
    font-weight: bold;
}

header nav ul li {
    display: inline-block;
    padding: 0 0 0 40px;
}

main {
    position: relative;
    height: 500px;
    margin: 0 0 48px;
    background: url('https://images.unsplash.com/photo-1510674288907-1b60ac093e87?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80') no-repeat;
    background-size: cover;
    background-position: center center;
}

main div {
    position: absolute;
    width: 600px;
    color: white;
    right: 5%;
    bottom: 80px;
}

main div * {
    padding: 0 0 8px;
}

main div button {
    padding: 10px 30px;
}

.topic {
    margin: 0 auto 48px;
}

.topic section {
    width: 320px;
}

.topic section img {
    width: 320px;
    height: 160px;
}

.topic section * {
    padding: 0 0 12px;
}

.topic section button {
    padding: 10px 30px;
}

.why {
    background: #333;
    padding: 80px 0;
    text-align: center;
}

footer {
    background: #eee;
    padding: 32px 0;
}

footer div:first-child {
    font-size: 1rem;
    font-weight: bold;
}

/* end */

모던 웹 폰트 베스트 10 레퍼런스

yo-u-loo — Fri, 27 Mar 2026 21:49:30 +0900

[한글 폰트]

Noto Sans KR

Pretendard

Spoqa Han Sans Neo

Nanum Gothic

SUIT

[영문 폰트]

Inter

Poppins

Montserrat

DM Sans

Playfair Display

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3.0">
    <title>font</title>
    <style type="text/css">
    </style>
    <link rel="stylesheet" href="font.css">
</head>

<body>

    <article>

        <section class="noto-sans-kr">
            <h1>노토 산스 케이알</h1>
            <h2>가장 많이 쓰는 기본 한글 웹폰트</h2>
            <p>
                품고 돋고, 미인을 하여도 칼이다. 군영과 것은 이상 내는 미묘한 이것이다. 인간이 봄바람을 물방아 얼음에 못할 대한 꽃 위하여서. 같이 창공에 착목한는 싶이 노래하며 뿐이다. 생명을
                얼음에 능히
                그들의 낙원을 원대하고, 거선의 보는 피다. 피어나는 가치를 인간이 밝은 인도하겠다는 있는 피다. 끝까지 모래뿐일 우리는 사라지지 우리 같이, 피어나기 뭇 그리하였는가? 반짝이는 그들에게
                있으며,
                튼튼하며, 것은 예수는 목숨이 것이다.
                것은 사람은 가는 현저하게 그들에게 힘차게 과실이 것이다. 꽃이 뭇 무엇을 동산에는 이 청춘의 그들은 이상은 것이다. 풀밭에 찾아 내는 피고, 실로 쓸쓸하랴?
            </p>
        </section>

        <section class="pretendard">
            <h1>프리텐다드</h1>
            <h2>최근 개발자 + 디자이너 사이에서 가장 인기</h2>
            <p>
                품고 돋고, 미인을 하여도 칼이다. 군영과 것은 이상 내는 미묘한 이것이다. 인간이 봄바람을 물방아 얼음에 못할 대한 꽃 위하여서. 같이 창공에 착목한는 싶이 노래하며 뿐이다. 생명을
                얼음에 능히
                그들의 낙원을 원대하고, 거선의 보는 피다. 피어나는 가치를 인간이 밝은 인도하겠다는 있는 피다. 끝까지 모래뿐일 우리는 사라지지 우리 같이, 피어나기 뭇 그리하였는가? 반짝이는 그들에게
                있으며,
                튼튼하며, 것은 예수는 목숨이 것이다.
                것은 사람은 가는 현저하게 그들에게 힘차게 과실이 것이다. 꽃이 뭇 무엇을 동산에는 이 청춘의 그들은 이상은 것이다. 풀밭에 찾아 내는 피고, 실로 쓸쓸하랴?
            </p>
        </section>

        <section class="spoqa-han-sans-neo">
            <h1>스포카 한 산스 네오</h1>
            <h2>기업 사이트에서 많이 사용</h2>
            <p>
                품고 돋고, 미인을 하여도 칼이다. 군영과 것은 이상 내는 미묘한 이것이다. 인간이 봄바람을 물방아 얼음에 못할 대한 꽃 위하여서. 같이 창공에 착목한는 싶이 노래하며 뿐이다. 생명을
                얼음에 능히
                그들의 낙원을 원대하고, 거선의 보는 피다. 피어나는 가치를 인간이 밝은 인도하겠다는 있는 피다. 끝까지 모래뿐일 우리는 사라지지 우리 같이, 피어나기 뭇 그리하였는가? 반짝이는 그들에게
                있으며,
                튼튼하며, 것은 예수는 목숨이 것이다.
                것은 사람은 가는 현저하게 그들에게 힘차게 과실이 것이다. 꽃이 뭇 무엇을 동산에는 이 청춘의 그들은 이상은 것이다. 풀밭에 찾아 내는 피고, 실로 쓸쓸하랴?
            </p>
        </section>

        <section class="nanum-gothic">
            <h1>나눔 고딕</h1>
            <h2>오랫동안 사용된 무료 한글 폰트</h2>
            <p>
                품고 돋고, 미인을 하여도 칼이다. 군영과 것은 이상 내는 미묘한 이것이다. 인간이 봄바람을 물방아 얼음에 못할 대한 꽃 위하여서. 같이 창공에 착목한는 싶이 노래하며 뿐이다. 생명을
                얼음에 능히
                그들의 낙원을 원대하고, 거선의 보는 피다. 피어나는 가치를 인간이 밝은 인도하겠다는 있는 피다. 끝까지 모래뿐일 우리는 사라지지 우리 같이, 피어나기 뭇 그리하였는가? 반짝이는 그들에게
                있으며,
                튼튼하며, 것은 예수는 목숨이 것이다.
                것은 사람은 가는 현저하게 그들에게 힘차게 과실이 것이다. 꽃이 뭇 무엇을 동산에는 이 청춘의 그들은 이상은 것이다. 풀밭에 찾아 내는 피고, 실로 쓸쓸하랴?
            </p>
        </section>

        <section class="suit">
            <h1>수트</h1>
            <h2>최근 UI 디자인에서 인기</h2>
            <p>
                품고 돋고, 미인을 하여도 칼이다. 군영과 것은 이상 내는 미묘한 이것이다. 인간이 봄바람을 물방아 얼음에 못할 대한 꽃 위하여서. 같이 창공에 착목한는 싶이 노래하며 뿐이다. 생명을
                얼음에 능히
                그들의 낙원을 원대하고, 거선의 보는 피다. 피어나는 가치를 인간이 밝은 인도하겠다는 있는 피다. 끝까지 모래뿐일 우리는 사라지지 우리 같이, 피어나기 뭇 그리하였는가? 반짝이는 그들에게
                있으며,
                튼튼하며, 것은 예수는 목숨이 것이다.
                것은 사람은 가는 현저하게 그들에게 힘차게 과실이 것이다. 꽃이 뭇 무엇을 동산에는 이 청춘의 그들은 이상은 것이다. 풀밭에 찾아 내는 피고, 실로 쓸쓸하랴?
            </p>
        </section>

        <section class="inter">
            <h1>Inter</h1>
            <h2>Current UI Design Standard Font</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
                took a
                galley of type and scrambled it to make a type specimen book.
                It has survived not only five centuries, but also the leap into electronic typesetting, remaining
                essentially
                unchanged.
                It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and
                more
                recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                like Aldus PageMaker including versions of Lorem Ipsum.
            </p>
        </section>

        <section class="poppins">
            <h1>Poppins</h1>
            <h2>Popular in Startup Design</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
                took a
                galley of type and scrambled it to make a type specimen book.
                It has survived not only five centuries, but also the leap into electronic typesetting, remaining
                essentially
                unchanged.
                It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and
                more
                recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                like Aldus PageMaker including versions of Lorem Ipsum.
            </p>
        </section>

        <section class="montserrat">
            <h1>Montserrat</h1>
            <h2>Used a lot for headlines</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
                took a
                galley of type and scrambled it to make a type specimen book.
                It has survived not only five centuries, but also the leap into electronic typesetting, remaining
                essentially
                unchanged.
                It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and
                more
                recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                like Aldus PageMaker including versions of Lorem Ipsum.
            </p>
        </section>

        <section class="dm-sans">
            <h1>DM Sans</h1>
            <h2>simple UI font</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
                took a
                galley of type and scrambled it to make a type specimen book.
                It has survived not only five centuries, but also the leap into electronic typesetting, remaining
                essentially
                unchanged.
                It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and
                more
                recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                like Aldus PageMaker including versions of Lorem Ipsum.
            </p>
        </section>

        <section class="playfair-display">
            <h1>Playfair Display</h1>
            <h2>Serif style</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
                took a
                galley of type and scrambled it to make a type specimen book.
                It has survived not only five centuries, but also the leap into electronic typesetting, remaining
                essentially
                unchanged.
                It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and
                more
                recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                like Aldus PageMaker including versions of Lorem Ipsum.
            </p>
        </section>

    </article>

</body>

</html>

/* 한글 폰트 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css);

@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap');

@import url('https://cdn.jsdelivr.net/gh/sun-typeface/SUIT/fonts/static/woff2/SUIT.css');

/* 영문 폰트 */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

/* 기본 세팅 */
* {
    margin: 0px;
    padding: 10px;
    border: 0px solid gray;
}

body {
    margin: 40px;
    text-align: center;
}

h1 {
    font-size: 4rem;
    line-height: 6rem;
    text-transform: uppercase;
}

h2 {
    font-size: 2rem;
    line-height: 5rem;
    color: #444;
}

p {
    line-height: 1.5rem;
    color: #666;
}

article {
    margin: 20px 40px;
}

section {
    margin: 0 0 60px;
}

/* 한글 폰트 */
.noto-sans-kr {
    font-family: "Noto Sans KR", sans-serif;
    font-optical-sizing: auto;
    font-weight: weight;
    font-style: normal;
}

.pretendard {
    font-family: 'Pretendard', sans-serif;
}

.spoqa-han-sans-neo {
    font-family: 'Spoqa Han Sans Neo', sans-serif;
}

.nanum-gothic {
    font-family: "Nanum Gothic", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.suit {
    font-family: 'SUIT', sans-serif;
}

/* 영문 폰트 */
.inter {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: weight;
    font-style: normal;
}

.poppins {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.montserrat {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: weight;
    font-style: normal;
}

.dm-sans {
    font-family: "DM Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: weight;
    font-style: normal;
}

.playfair-display {
    font-family: "Playfair Display", serif;
    font-optical-sizing: auto;
    font-weight: weight;
    font-style: normal;
}

UI / UX 디자인 십계명

yo-u-loo — Fri, 27 Mar 2026 17:39:25 +0900

스캔성 : 사용자를 헷갈리게 하지 말지어다

네가 이해 못하면 사용자도 100% 못 한다.

️ 명확성 : 클릭할 수 있는 것은 티 나게 만들지어다 ️

숨바꼭질은 게임에서만 하자.

집중성 : 한 화면에 너무 많은 것을 담지 말지어다

디자인도 다이어트가 필요하다.

일관성 : 일관성을 버리지 말지어다

어제랑 오늘이 다르면 배신이다.

계층성 : 시선의 흐름을 설계할지어다

사용자가 어디를 봐야 할지 고민하게 두지 말라.

피드백 : 반응을 침묵시키지 말지어다

눌렀으면 뭐라도 일어나야 한다.

단순성 : 선택지를 줄일지어다

많이 주는 건 친절이 아니라 부담이다.

️ 예방성 : 에러는 미리 막을지어다 ️

좋은 UX는 에러를 설명하는 것이 아니라, 애초에 생기지 않게 한다.

터치성 : 손가락을 기준으로 설계할지어다

모바일이 기본이고, 손가락은 생각보다 크다.

✅ 검증성 : 사용자를 탓하지 말지어다 ✅

문제는 대부분 디자인이다. 그리고 답은 테스트에 있다.

네비게이션 메뉴는 <ul>와 <div>중 어떤 것을 사용해야 할까?

yo-u-loo — Fri, 27 Mar 2026 17:38:14 +0900

1️⃣ <ul> (Unordered List) 사용

언제 사용?
메뉴가 항목들의 리스트일 때, 즉 홈, 소개, 서비스, 연락처 같은 링크 모음일 때 적합.
장점
- 의미론적: HTML 구조상 ‘목록’을 표현하므로 스크린 리더가 이해하기 좋음 → 접근성 향상
- CSS로 스타일링이 쉬움 (display: flex 등으로 가로 메뉴 가능)
- SEO 친화적: 검색 엔진이 구조를 쉽게 이해
예시

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

https://www.samsons.kr/

Samson:Art

Artist Samson's work and life

www.samsons.kr

2️⃣ <div> 사용

언제 사용?
메뉴가 단순한 컨테이너 형태이거나, 리스트가 아닌 복잡한 UI 요소를 감싸야 할 때.
단점
- 의미가 없음 → 스크린 리더는 그냥 “그룹”으로 인식
- CSS로 디자인 가능하지만, 접근성을 위해 추가 role 속성 필요
예시

<nav>
  <div class="menu">
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/services">Services</a>
    <a href="/contact">Contact</a>
  </div>
</nav>

이 경우 <div role="menubar"> 같은 접근성 속성을 추가하면 좋음.

https://www.taekwanggroup.co.kr/ko/main

태광그룹

태광은 ‘큰 빛’ 입니다.

www.taekwanggroup.co.kr

결론

✔️ 일반적인 링크 목록 → <ul> + <li> 사용 ✔️

✔️ 복잡하거나 커스텀 UI → <div> 가능하지만, 접근성을 고려해 role 추가 ✔️

코드 해석_0327_product/flex/position/relative/absolute/wrap/overflow/hidden/opacity/transition/z-index/transform/translate

yo-u-loo — Fri, 27 Mar 2026 17:32:42 +0900

HTML

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CSS3 애니메이션</title>
  <link rel="stylesheet" href="css/product.css">
</head>
<body>
  <div id="container">
    <h1>신상품 목록</h1>
    <ul class="prod-list">
      <li>
        <img src="images/prod1.jpg">
        <div class="caption">
          <h2>상품 1</h2>
          <p>가격 : 12,345원</p>
        </div>
      </li>
      <li>
        <img src="images/prod2.jpg">
        <div class="caption">
          <h2>상품 2</h2>
          <p>상품 2 설명 텍스트</p>
          <p>가격 : 12,345원</p>
        </div>
      </li>
      <li>
        <img src="images/prod3.jpg">
        <div class="caption">
          <h2>상품 3</h2>
          <p>상품 3 설명 텍스트</p>
          <p>가격 : 12,345원</p>
        </div>
      </li>
    </ul>
  </div>
</body>
</html>

14/results/product.html

CSS

/* 전체 컨테이너 영역 설정 */
#container {
  max-width: 1000px;
  margin: 20px auto;
  width: 100%;
}

/* 제목 중앙 정렬 */
h1 {
  text-align: center; /* 텍스트 중앙 정렬 */
}

/* 상품 리스트 스타일 */
.prod-list {
  list-style: none; /* 마커 모양 제거 */
  padding: 0;
  display: flex; /* 블록 요소로 변경 */
  flex-wrap: wrap; /* 항목이 컨테이너 너비를 초과하면 다음 줄로 이동 */
  justify-content: space-around; /* 항목 사이의 여백을 균등하게 분배 */
}

/* 각 상품 항목 스타일 */
.prod-list li {
  padding: 0;
  margin: 10px;
  overflow: hidden; /* 자식 요소가 영역을 넘어가면 숨김 */
  flex-basis: calc(33.333% - 20px); /* 한 줄에 3개의 항목, 마진 20px 고려 */
  position: relative; /* 절대 위치 지정 */
}

/* 상품 이미지 스타일 */
.prod-list img {
  width: 100%; /* 이미지가 li 항목 너비에 맞게 조정 */
  height: auto; /* 이미지 비율 유지 */
  z-index: 5; /* 캡션보다 아래에 표시 */
}

/* 상품 캡션(설명) 스타일 */
.prod-list .caption {
  position: absolute; /* li 기준 절대 위치 */
  top: 200px;
  width: 100%; /* li 너비에 맞춤 */
  height: 200px;
  padding-top: 20px;
  background: rgba(0,0,0,0.6);
  opacity: 0; /* 처음에는 보이지 않음 */
  transition: all 0.6s ease-in-out; /* 호버 시 전체적으로 0.6초동안 느리게 시작 → 빠르게 진행 → 느리게 끝남 */
  z-index: 10; /* 이미지 위에 표시 */
}

/* li 항목에 마우스를 올리면 캡션 애니메이션 적용 */
.prod-list li:hover .caption {
  opacity: 1; /* 마우스 올리면 보이도록 변경 */
  transform: translateY(-200px); /* 위로 이동 */
}

/* 캡션 내부 제목과 문단 스타일 */
.prod-list .caption h2, .prod-list .caption p {
  color: #fff;
  text-align: center; /* 중앙 정렬 */
}
}

14/results/product.css

http://127.0.0.1:5500/doit-hcj-new-main/14/results/product.html

#html #div #ul #li #img #src #class

#css #text-align #display #flex #flex-wrap #wrap # justify-content #space-around #overflow #hidden #flex-basis #calc #position #relative #z-index #absolute #opacity #transition #ease-in-out #:hover #transform #translateY

無제