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

Notice

Recent Posts

Recent Comments

Link

« 2026/05 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

Tags more

Archives

Today

Total

관리 메뉴

無제

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

<401>

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

yo-u-loo 2026. 4. 16. 17:35

HD 1366 최적화

<!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 */

'<401>' 카테고리의 다른 글

[RWD] 반응형 웹 사이트 코딩 실무 예제 (0)	2026.04.14
[Active and fixed] 유저의 움직임에 반응하는 웹사이트 코딩 실무 예제 (0)	2026.04.10
[Flexible and fixed] 브라우저 넓이에 반응하는 웹사이트 코딩 실무 예제 (0)	2026.04.08
[HD] HD 해상도에 최적화 된 웹사이트 코딩 실무 예제 (0)	2026.04.08
코드 해석_0327_product/flex/position/relative/absolute/wrap/overflow/hidden/opacity/transition/z-index/transform/translate (0)	2026.03.27

'<401>' Related Articles

無제

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

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

'<401>' 카테고리의 다른 글

티스토리툴바