코딩/실습

RWD 콘텐츠 리뉴얼

haehaee 2026. 4. 16. 16:50

https://rwd-c-re.netlify.app/

 

Modern Gallery Docent

LYA GALLERY ARCHIVE 리아 갤러리는 예술과 일상의 경계를 허물고, 시대를 관통하는 거장들의 작품을 현대적 공간에서 재해석하여 새로운 영감을 제안합니다. © 2026 LYA GALLERY. ALL RIGHTS RESERVED.

rwd-c-re.netlify.app

 

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern Gallery Docent</title>
<link rel="stylesheet" href="style.css">
</head>

<body>

    <header>
        <h4>LYA GALLERY</h4>
        <span>☰</span>
    </header>

    <main>

        <div>
            <h2>THE LINE <br />&<br /> CURVE</h2>
            <p>고전의 유려한 곡선과 현대의 정제된 직선이 교차하는 지점.<br />
                LYA 갤러리가 제안하는 새로운 시각의 전시를 만나보세요.</p>
            <button>전시 예약하기</button>
        </div>

    </main>

    <article class="category">

        <h3>ARTIST CATEGORY</h3>
        <img
            src="https://plus.unsplash.com/premium_photo-1706548911842-7162d4bd2c98?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
        <div class="list">
            <div>ALL</div>
            <div>CLASSIC</div>
            <div>MODERN</div>
            <div>SPACE</div>
            <div>GUIDE</div>
        </div>

    </article>

    <article class="about">

        <h3>ABOUT EXHIBIT</h3>

        <div>
            <section>
                <div>
                    <h4>ALPHONSE MUCHA</h4>
                    <p>아르누보의 꽃, 무하가 그려낸 유려한 선과 화려한 장식미를 통해 고전의 생명력을 느껴보세요.</p>

                </div>
            </section>

            <section>

                <div>

                    <h4>EDWARD HOPPER</h4>
                    <p>현대인의 고독을 포착한 호퍼. 그 정적인 빛과 그림자 속에 머물러 봅니다.</p>

                </div>
            </section>

            <section>

                <div>

                    <h4>PIET MONDRIAN</h4>
                    <p>가장 단순한 선과 면으로 세상의 본질을 꿰뚫는 몬드리안의 차가운 추상을 만나보세요.</p>

                </div>
            </section>
        </div>
    </article>

    <article class="icon">
        <div>
            <section>
                <img
                    src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FbG5KLJ%2FdJMcabDQI8z%2FAAAAAAAAAAAAAAAAAAAAAJBPdCJ0HpLuQyUHdk8hjRaQvPayX5CiEvUckWSd0O0N%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1777561199%26allow_ip%3D%26allow_referer%3D%26signature%3DjkriknsgqI3359O5V6Opl%252BvSM80%253D">
                <p>AUDIO GUIDE</p>
            </section>

            <section>
                <img
                    src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2Fbs5cXm%2FdJMcacpdMez%2FAAAAAAAAAAAAAAAAAAAAAN793Hk7ulug_G1DKiSdczMNmStKTTjNoUVJy77r3RYn%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1777561199%26allow_ip%3D%26allow_referer%3D%26signature%3DpG8C6WaRkyAZmNgfCPBN6otn0ts%253D">
                <p>VISIT GUIDE</p>
            </section>

            <section>
                <img
                    src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2Fc2YQmi%2FdJMcabcKiAu%2FAAAAAAAAAAAAAAAAAAAAAIvgWx-yZ6LeRP1I-GY-VbWPV9N0gI58c1VwhxkHQ8NH%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1777561199%26allow_ip%3D%26allow_referer%3D%26signature%3DBAMKcgM%252B7IPeyP8y%252B2sq3cwxySg%253D">
                <p>OUR VISION</p>
            </section>
        </div>
    </article>


    <footer>
        <div>
            <h3>LYA GALLERY ARCHIVE</h3>
            <p>리아 갤러리는 예술과 일상의 경계를 허물고, 시대를 관통하는 거장들의 작품을 현대적 공간에서 재해석하여 새로운 영감을 제안합니다.<br />
                © 2026 LYA GALLERY. ALL RIGHTS RESERVED.
            </p>
        </div>
    </footer>


    <address>
        <p>서울특별시 강남구 예술로 123 리아 갤러리 빌딩<br />
            화요일 - 일요일 | 10:00 AM - 07:00 PM (월요일 휴관) <br />
            02-123-4567 | info@lyagallery.com</p>
    </address>

</body>

</html>
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;600;700&display=swap');


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: 0px solid silver;
}

img {
    width: 100px;
}

body {
    font-family: 'Playfair Display', 'Nanum Myeongjo', serif;
    font-size: 1rem;
    line-height: 1.4rem;
    color: #555;
    letter-spacing: 0.1px;
}

h1,
h2,
h3,
h4,
h5 {
    font-family: 'Lora', 'Nanum Myeongjo', 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: 2.4rem;
    line-height: 2.4rem;
    margin-bottom: 1rem;
}

h4 {
    font-size: 1.3rem;
}

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


button {
    font-size: 0.9rem;
    padding: 8px 15px;
    border: 0px solid black;
    border-radius: 20px;
    background: white;
    transition: 0.3s;
    cursor: pointer;
}

button:hover {
    background: rgb(255, 216, 107);
    border: 1px solid black;
}

header {
    background: rgb(255, 216, 107);
    display: flex;
    justify-content: space-between;
    padding: 20px;
}

header h4 {
    font-weight: bold;
    color: #444;
    font-size: 1.2rem;
    cursor: pointer;
    transition: 0.3s;
}

header h4:hover {
    color: white;
}

header span {
    color: #444;
    font-size: 1.3rem;
    cursor: pointer;
    transition: 0.3s;
}

header span:hover {
    color: white;
}

main {
    position: relative;
    background: url(https://images.unsplash.com/photo-1601130200455-cdd4befa65fc?q=80&w=1935&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D) no-repeat;
    background-size: cover;
    background-position: center;
    height: 600px;
}

main div {
    position: absolute;
    background: rgba(255, 255, 255, 0.8);
    width: 80%;
    height: 300px;
    margin: 0 10%;
    padding: 40px 20px;
    bottom: 2rem;
    text-align: center;
}

main div p {
    margin: 18px 10%;
    color: #333;
}

.category {
    width: 80%;
    margin: 0 auto;
    text-align: center;
    padding: 50px 0;
}

.category img {
    width: 100%;
}


.list {
    width: 100%;
    margin: 20px auto;
    font-size: 1rem;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
}

.list div {
    cursor: pointer;
    transition: 0.3s;
}

.list div:hover {
    color: #adadad;
}


.about {
    background: rgb(255, 216, 107);
    text-align: center;
    padding: 50px 0 10px;
}

.about>div>section {
    position: relative;
    margin: 50px auto 100px;

}

.about>div>section>div {
    position: absolute;
    background: rgba(255, 255, 255, 0.8);
    width: 80%;
    height: auto;
    min-height: 160px;
    bottom: 0;
    margin: 0 10%;
    text-align: center;
    padding: 30px 15px;
    border-radius: 10px 10px 0 0;
    cursor: pointer;
    transition: 0.5s;
}

.about>div>section>div:hover {
    background: rgba(0, 0, 0, 0.3);
    color: white;
}

.about>div> :nth-child(1) {
    background: url(https://rugandkilim.com/wp-content/uploads/2024/05/Screenshot-2024-05-15-at-5.09.28%E2%80%AFPM.jpg) no-repeat;
    background-size: cover;
    background-position: top center;
    height: 450px;
    width: 80%;
}

.about>div> :nth-child(2) {
    background: url(https://media.newyorker.com/photos/5ed15bcdd80080a01f980a1a/master/w_1920,c_limit/200608_r36593.jpg) no-repeat;
    background-size: cover;
    background-position: top center;
    height: 450px;
    width: 80%;
}

.about>div> :nth-child(3) {
    background: url(https://www.artmajeur.com/media/cache/resolve/standard/a/r/artmajeur-9074499/blog/piet-mondriaan-1921-composition-en-rouge-jaune-bleu-et-noir.jpeg) no-repeat;
    background-size: cover;
    background-position: top center;
    height: 450px;
    width: 80%;
}

.about>div>section>div>h4 {
    font-size: 1.4rem;
    margin: 0 0 20px;
}

.icon {
    text-align: center;
}

.icon div {
    display: flex;
    justify-content: space-around;
    padding: 50px 0;
}

.icon div section img {
    opacity: 0.4;
    cursor: pointer;
    transition: 0.4s;
}

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

footer {
    background: rgb(255, 216, 107);
    text-align: center;
    padding: 50px 30px;
    line-height: 1.3rem;
}

footer h3 {
    font-size: 2.2rem;
}

address {
    background: white;
    text-align: center;
    padding: 40px 30px;
    line-height: 1.2rem;
}

'코딩 > 실습' 카테고리의 다른 글

AWD 콘텐츠 리뉴얼  (0) 2026.04.17
RWD 디자인 리뉴얼  (0) 2026.04.16
Active and fixed 디자인 리뉴얼  (1) 2026.04.16
Active and fixed 콘텐츠 리뉴얼  (0) 2026.04.16
FHD 디자인 리뉴얼  (1) 2026.04.10

'코딩/실습'의 다른글

  • 현재글RWD 콘텐츠 리뉴얼

관련글

티스토리툴바