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] 반응형 웹 사이트 코딩 실무 예제 본문

<401>

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

yo-u-loo 2026. 4. 14. 11:00

 

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

 

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

[RWD AND AWD] 적응형 반응형 웹 사이트 코딩 실무 예제  (1) 2026.04.16
[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 more