코딩/실습

FHD 디자인 리뉴얼

haehaee 2026. 4. 10. 09:28

https://jackson-hameleon-re.netlify.app/

 

haeseung

가구의 본질적인 기능에 집중하면서도, 공간의 중심을 잡아주는 디자인을 지향합니다. 어느 각도에서 보아도 완벽한 비례감은 잭슨카멜레온이 추구하는 뉴 클래식의 정수입니다. shop

jackson-hameleon-re.netlify.app

 

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


<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3.0">
  <title>haeseung</title>
  <link rel="stylesheet" href="style.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 OnClick="location.href ='javascript:void(0)'">
      jackson chameleon
    </div>

    <nav>
      <ul>
        <li OnClick="location.href ='javascript:void(0)'">shop</li>
        <li OnClick="location.href ='javascript:void(0)'">special</li>
        <li OnClick="location.href ='javascript:void(0)'">review</li>
        <li OnClick="location.href ='javascript:void(0)'">stories</li>
        <li OnClick="location.href ='javascript:void(0)'">community</li>
      </ul>
    </nav>
  </header>


  <main>

    <div>
      <p>New Classic, Contemporary Furniture</p>
      <h1>낯설음 속에서 발견하는 익숙함</h1>
      <h3>A New Perspective for Your Space</h3>
      <p>
        우리는 일상적인 가구의 형태를 새로운 시각으로 재해석합니다.<br>
        단순히 머무는 공간을 넘어, 당신의 삶에 영감을 주는 독창적인 실루엣을 경험해 보세요.
      </p>
      <button>View Collection</button>
      <div> ● ○ ○ ○ ○</div>
    </div>

    <div></div>


  </main>

  <article class="Objet">

    <h2>❙ Furniture & Objet</h2>

    <div>
      <section>
        <img src="https://jacksonchameleon.co.kr/product/bowlsofa/table/bowl_sofa_table_04.jpg">
        <p>Mass Dining Table<br>간결한 직선과 면이 만드는 조형미</p>

        <div></div>
      </section>

      <section>
        <div class="content-box">
          <p>
            가구의 본질적인 기능에 집중하면서도, 공간의 중심을 잡아주는 디자인을 지향합니다.<br>
            어느 각도에서 보아도 완벽한 비례감은 잭슨카멜레온이 추구하는 뉴 클래식의 정수입니다.
          </p>
          <button>shop</button>
        </div>
      </section>

      <section>
        <div class="content-box">
          <p>
            일상의 평범한 순간을 특별한 예술적 경험으로 바꾸는 디자인 큐레이션.<br>
            우리는 익숙한 소재를 낯선 시각으로 재해석하여 당신만의 라이프스타일을 완성할 수 있도록 돕습니다.
          </p>
          <button>shop</button>
        </div>
      </section>

      <section>
        <img src="https://jacksonchameleon.co.kr/product/addo/addo_14.jpg">
        <p>Ink Module Shelf<br>공간의 여백을 아름답게 채우는 수납 솔루션</p>

        <div></div>
      </section>

    </div>

  </article>


  <article class="Design">
    <h2>❙&nbsp;Design&nbsp;Perspective</h2>
    <h3>Manifesto</h3>
    <p>
      우리는 가구가 단순한 도구를 넘어, 공간과 사람 사이의 관계를 정의한다고 믿습니다.<br>
      잭슨카멜레온의 디자인은 익숙한 일상 속에서 '낯설음'을 발견하는 것에서 시작합니다.<br>
      때로는 과감한 실루엣으로, 때로는 정제된 소재의 변주를 통해
      당신의 공간이 고유한 이야기와 예술적 영감으로 가득 차길 바랍니다.<br>
      우리의 목표는 시간이 흘러도 변하지 않는 가치를 지닌, 새로운 클래식을 제안하는 것입니다.
    </p>

  </article>



  <article class="Harmony">



    <h2>❙ Spatial Harmony</h2>
    <div>

      <section>
        <p>Living Scenery</p>
        <div></div>
      </section>


      <section>
        <p>
          가구는 단순히 공간을 채우는 물건을 넘어, 머무는 사람의 취향과 삶의 태도를 대변합니다.



        </p>
      </section>

      <section>
        <p>Tactile Detail</p>
        <div></div>
      </section>

      <section>
        <p>
          우리는 보이지 않는 디테일까지 집요하게 고민하여 최상의 완성도를 구현합니다.



        </p>
      </section>
      <section>
        <p>Flexible Form</p>
        <div></div>

      </section>

      <section>
        <p>기능적인 역할을 넘어 사용자의 정서적 만족을 채우는 디자인을 지향합니다.</p>
      </section>
    </div>

  </article>



  <!-- <article class="why">
    <h2>Why do we use Jackson Chameleon?</h2>
    <p>
      우리는 단순히 예쁜 가구를 만드는 것을 넘어, 일상 속에서 예술적인 영감을 주는 디자인을 지향합니다.<br>
      익숙한 소재를 낯선 시각으로 재해석하여 당신의 공간에 새로운 가치와 감도 높은 클래식을 제안합니다.
    </p>
  </article> -->



  <article class="Atelier">

    <h2>❙ Design Atelier</h2>
    <div>
      <!-- <div>
        <img src="https://jacksonchameleon.co.kr/product/cone/cone_04.jpg">
      </div> -->

      <div>
        <h3>Since 2014 to 2026</h3>&nbsp;


        <p>
          잭슨카멜레온은 2014년 런칭 이후, 변화무쌍한 디자인과 변하지 않는 가치를 동시에 추구하며 성장해왔습니다.

          단순한 가구 제작을 넘어 공간의 예술적 완성도를 높이는 디자인 스튜디오로서,

          우리는 매 시즌 새로운 소재와 형태의 조화를 연구하고 제안합니다.



          자체 디자인 연구소와 국내 공정 시스템을 통해 철저한 품질 관리를 실천하며,


          사용자의 라이프스타일에 맞춘 유연한 모듈 시스템으로 수많은 공간에 영감을 더했습니다.


          현재는 성수동 플래그십 스토어를 중심으로 다양한 아티스트들과 협업하며


          경계 없는 디자인 세계관을 확장해 나가고 있습니다.
        </p>
      </div>
    </div>

    <p>
      우리는 가구가 놓이는 그곳의 분위기뿐만 아니라, 그곳에 머무는 이의 삶의 질까지 고민합니다.
      <br>
      지난 시간 동안 쌓아온 기술력과 감각을 바탕으로, 앞으로도 당신의 일상에 가장 가까운 뉴 클래식을 선보이겠습니다.
    </p>
  </article>

  <article class="company">

    <h2>Company info</h2>
    <div>
      <section>
        <h3>Jackson</h3>
        낯설음과 익숙함 사이에서 새로운 가치를 찾아내는 컨템포러리 디자인 가구 브랜드입니다.
        우리는 당신의 일상이 예술이 되는 순간을 위해 끊임없이 연구합니다.
      </section>

      <!-- <section>
        <h3>Contact</h3>
        <strong>Showroom:</strong> 서울특별시 성동구 성수이로 7길 2 (성수동 플래그십 스토어)


        <strong>Tel:</strong> 02-1234-5678


        <strong>Email:</strong> info@jacksonchameleon.co.kr
      </section> -->

      <section>
        <h3>Latest post</h3>
        [Notice] 2026 Spring New Collection 'Layered' 런칭 안내


        [Event] 성수 플래그십 스토어 리뉴얼 오픈 기념 이벤트


        [Review] 페블 소파와 함께한 고객들의 베스트 리빙룸 큐레이션
      </section>

    </div>

  </article>

  <footer>
    <h2>Contact us</h2>
    <p>
      잭슨카멜레온의 디자인을 오프라인 쇼룸에서 직접 경험해 보세요.
    <address>서울특별시 성동구 성수이로7길 2 (성수동2가)</address>
    고객센터: 1855-2124
    </p>
  </footer>


</body>


</html>
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap');
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");


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

img {
    width: 100px;
}

body {
    background: linear-gradient(to bottom, #ffffff, #000000);
    color: white;
    font-family: "pretendard", sans-serif;
    font-size: 1rem;
    line-height: 1rem;
    letter-spacing: 0.1px;
}

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

h1 {
    font-size: 3rem;
    line-height: 3rem;
    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.8rem;
    text-transform: uppercase;
    padding: 8px 25px;
    border: 1px solid #ccc;
    background: white;
    transition: 0.3s;
}

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



main {
    position: relative;
    background: url("https://jacksonchameleon.co.kr/product/dais/leather/04.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    height: 700px;
    display: flex;
    justify-content: center;
    align-items: center;
}

main> :nth-child(1) {
    z-index: 1;
    width: 600px;
    color: white;
    text-align: center;
}

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

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

main> :nth-child(1) div {
    position: absolute;
    margin: 0 auto;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    bottom: 0px;
}

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

header {
    z-index: 100;
    position: sticky;
    top: 0;
    margin: 0 auto;
    background: white;
    border: 1px solid silver;
    width: 100%;
    display: flex;
    justify-content: space-between;
    line-height: 4rem;
    color: black;
}

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

header div {
    text-transform: uppercase;
    font-size: 1.5rem;
    font-weight: bold;
    padding: 0 32px;
}

header div:hover {
    color: rgb(189, 143, 101);
}

header nav {
    text-transform: uppercase;
    text-align: center;
}

header nav ul li {
    border-bottom: 2px solid transparent;
    display: inline-block;
    width: 120px;
    padding: 0 16px;
}

header nav ul li:hover {
    color: rgb(189, 143, 101);
    border-bottom: 2px solid black;
}

.Objet {
    position: relative;
    padding: 130px 0 80px;
}

.Objet h2 {
    position: absolute;
    top: 70px;
    left: 30px;
}

.Objet>div {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}



.Objet div section {
    position: relative;
    background: rgb(243, 243, 243);
    width: 50%;
    height: 800px;
    padding: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #333;
    overflow: hidden;
}




.Objet>div> :first-child,
.Objet>div> :last-child {
    color: white;
    transition: 0.5s;
}

.Objet div section img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    color: white;
    z-index: 0;
    transition: 0.4s;
      filter: brightness(0.7);
    pointer-events: none;
}

.Objet div section:hover img {
    transform: scale(1.2);
    filter: brightness(0.5);
}


.Objet div section p {
    z-index: 1;
    pointer-events: none;
  
}


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

}

.content-box {
    position: absolute; 
    z-index: 1; 
    display: flex;
    justify-content: center;
    flex-direction: column; 
    align-items: center;  
    gap: 20px;  
    pointer-events: auto;
}

.content-box p {
    color: rgb(37, 37, 37);
    margin-bottom: 10px; 
    
}


.Design {

    padding: 80px 30%;
    text-align: center;
    /* background: #bbbbbb; */
}

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

.Harmony>div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.Harmony div section {
    position: relative;
    background: #c7c7c7;
    width: 300px;
    height: 300px;
    padding: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.Harmony>div> :nth-child(1) {
    background: url("https://jacksonchameleon.co.kr/product/ink_joia/11.jpg") no-repeat;
    background-size: cover;
    background-position: top center;
    color: white;
}

.Harmony>div> :nth-child(3) {
    background: url("https://jacksonchameleon.co.kr/product/dough%20fabric/14.jpg") no-repeat;
    background-size: cover;
    background-position: top center;
    color: white;
}

.Harmony>div> :nth-child(5) {
    background: url("https://jacksonchameleon.co.kr/product/pesca/pesca_5.jpg") no-repeat;
    background-size: cover;
    background-position: top center;
    color: white;
}

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

.Harmony>div> :nth-child(2), 
.Harmony>div> :nth-child(4), 
.Harmony>div> :nth-child(6) {
color: black;
}

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

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

.Atelier {
    padding: 80px 0;
    position: relative;
    background: url("https://jacksonchameleon.co.kr/web/product/extra/small/202312/0f3a20b013585667e94c82fa46bf9cd2.jpg") no-repeat;
    background-size: cover;
    background-position: top center;
    background-attachment: fixed;
    color: white;
    text-align: center;
}

.Atelier::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 0;
}

.Atelier>* {
    position: relative;
    z-index: 1;
}

.Atelier>div {
    width: 1000px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

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

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

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

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

.company div section {
    width: 320px;
}

footer {
    background: black;
    padding: 80px 0;
    text-align: center;
    color: #666;
}

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

Active and fixed 디자인 리뉴얼  (1) 2026.04.16
Active and fixed 콘텐츠 리뉴얼  (0) 2026.04.16
FHD 콘텐츠 리뉴얼  (0) 2026.04.08
브라우저 넓이에 반응하는 웹사이트 실무 코딩 예제 - Flexible and fixed  (0) 2026.04.08
HD 해상도에 최적화 된 웹사이트  (0) 2026.04.07

'코딩/실습'의 다른글

  • 현재글FHD 디자인 리뉴얼

관련글

티스토리툴바