https://jackson-hameleon.netlify.app/
haeseung
Since 2014 to 2026 잭슨카멜레온은 2014년 런칭 이후, 변화무쌍한 디자인과 변하지 않는 가치를 동시에 추구하며 성장해왔습니다. 단순한 가구 제작을 넘어 공간의 예술적 완성도를 높이는 디자인
jackson-hameleon.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="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>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>
<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 offer</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>
<article class="Objet">
<h2>❙ Furniture & Objet</h2>
<div>
<section>
<p>Mass Dining Table<br>간결한 직선과 면이 만드는 조형미</p>
<div></div>
</section>
<section>
<p>
가구의 본질적인 기능에 집중하면서도, 공간의 중심을 잡아주는 디자인을 지향합니다.<br>
어느 각도에서 보아도 완벽한 비례감은 잭슨카멜레온이 추구하는 뉴 클래식의 정수입니다.
</p>
</section>
<section>
<p>
일상의 평범한 순간을 특별한 예술적 경험으로 바꾸는 디자인 큐레이션.<br>
우리는 익숙한 소재를 낯선 시각으로 재해석하여 당신만의 라이프스타일을 완성할 수 있도록 돕습니다.
</p>
</section>
<section>
<p>Ink Module Shelf<br>공간의 여백을 아름답게 채우는 수납 솔루션</p>
<div></div>
</section>
</div>
</article>
<article class="Design">
<h2>❙ Design Perspective</h2>
<h3>Manifesto</h3>
<p>
우리는 가구가 단순한 도구를 넘어, 공간과 사람 사이의 관계를 정의한다고 믿습니다.<br>
잭슨카멜레온의 디자인은 익숙한 일상 속에서 '낯설음'을 발견하는 것에서 시작합니다.<br>
때로는 과감한 실루엣으로, 때로는 정제된 소재의 변주를 통해
당신의 공간이 고유한 이야기와 예술적 영감으로 가득 차길 바랍니다.<br>
우리의 목표는 시간이 흘러도 변하지 않는 가치를 지닌, 새로운 클래식을 제안하는 것입니다.
</p>
</article>
<article class="Harmony">
<h2>❙ Spatial Harmony</h2>
<div>
<section>
<p>
가구는 단순히 공간을 채우는 물건을 넘어, 그곳에 머무는 사람의 취향과 삶의 태도를 대변합니다.
잭슨카멜레온이 제안하는 정제된 실루엣과 소재의 변주는 당신의 일상에 잔잔한 영감을 더하고,
가장 개인적인 공간을 예술적인 무드로 완성해 줍니다.
</p>
</section>
<section>
<p>Living Scenery</p>
<div></div>
</section>
<section>
<p>Tactile Detail</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>
<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 {
font-family: "pretendard", sans-serif;
font-size: 1rem;
color: #333;
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(2) {
position: absolute;
background: rgba(0, 0, 0, 0.4);
width: 100%;
height: 100%;
}
main header {
z-index: 2;
position: absolute;
background: white;
border: 1px solid silver;
width: 1000px;
bottom: -50px;
display: flex;
justify-content: space-between;
line-height: 6rem;
/* li에 줘버리면 div가 못먹어서 여기 넣음 */
color: black;
}
main header div,
main header nav ul li {
transition: 0.8s;
cursor: pointer;
}
main header div {
text-transform: uppercase;
font-weight: bold;
padding: 0 32px;
}
main header div:hover {
color: rgb(189, 143, 101);
}
main header nav {
text-transform: uppercase;
text-align: center;
}
/* main header nav ul {} */
/* nav는 플렉스로 정렬못해서 인라인 블록으로 처리함 */
main header nav ul li {
border-bottom: 2px solid transparent;
display: inline-block;
width: 120px;
padding: 0 16px;
}
main header nav ul li:hover {
color: rgb(189, 143, 101);
border-bottom: 2px solid black;
}
.Objet {
padding: 130px 0 80px;
}
.Objet>div {
display: flex;
flex-wrap: wrap;
}
.Objet div section {
position: relative;
background: #ccc;
width: 50%;
height: 800px;
/* 툴바 등등 제외하고 정한 크기*/
padding: 100px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
color: #333;
}
.Objet>div> :first-child {
background: url("https://jacksonchameleon.co.kr/product/bowlsofa/table/bowl_sofa_table_04.jpg")no-repeat;
background-size: cover;
background-position: top center;
color: white;
}
.Objet>div> :last-child {
background: url("https://jacksonchameleon.co.kr/product/addo/addo_14.jpg") no-repeat;
background-size: cover;
background-position: top center;
color: white;
}
.Objet div section p {
z-index: 1;
}
.Objet div section div {
position: absolute;
background: rgba(0, 0, 0, 0.4);
width: 100%;
height: 100%;
}
.Design {
padding: 80px 30%;
text-align: center;
background: #eee;
}
.Harmony {
width: 1000px;
margin: 0 auto;
padding: 80px 0;
}
.Harmony>div {
display: flex;
flex-wrap: wrap;
}
.Harmony div section {
position: relative;
background: #ccc;
width: 500px;
height: 500px;
padding: 100px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.Harmony>div> :nth-child(2) {
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;
}
/* 박스 만드는법(쌓는법)
백그라운드 컬러로 만듦
그 위에 앱솔루트
그 위에 z-인덱스 */
.Harmony div section p {
z-index: 1;
/* 박스위에 박스를 쌓을때 사용 z인덱스의 디폴트는 0 숫자가 커질수록 위로 올라감 */
}
/* 앱솔루트로 포지션을 지정 좌표를 정해주지 않았는데 자동으로 가서 붙음, 디폴트는 0, 0 */
.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> :first-child {}
/* 이 태그는 별로에용 하고 알려주는 역할 (주석으로 달면 안되는건가?) */
/* .Atelier div :first-child img {
width: 180px;
} */
.Atelier>div> :last-child {
width: 770px;
padding: 30px 0;
}
/* .our :last-child, .our :nth-child 도 사용은 가능하지만 맥락을 보고 사용해야함 */
.Atelier>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;
}'코딩 > 실습' 카테고리의 다른 글
| Active and fixed 디자인 리뉴얼 (1) | 2026.04.16 |
|---|---|
| Active and fixed 콘텐츠 리뉴얼 (0) | 2026.04.16 |
| FHD 디자인 리뉴얼 (1) | 2026.04.10 |
| 브라우저 넓이에 반응하는 웹사이트 실무 코딩 예제 - Flexible and fixed (0) | 2026.04.08 |
| HD 해상도에 최적화 된 웹사이트 (0) | 2026.04.07 |