css파일)
ul{
list-style: none;
text-align: center;
border-top: 1px solid red;
border-bottom: 1px solid red;
padding: 10px;
}
ul li{
display: inline;
text-transform: uppercase;
padding: 0 10px;
letter-spacing: 10px;
}
ul li a{
text-decoration: none;
color: black;
}
ul li a:hover{
text-decoration: underline;
}
summary{
color:black;
text-shadow: 0px 0px 3px red;
font-size: 30px;
text-transform: uppercase;
font-weight: 5px;
}
summary:hover{
text-decoration: underline;
cursor: pointer;
}
div#details {
display: block;
text-align: left;
margin-top: 50px;
padding-left: 100px;
padding-bottom: 100px;
display: inline-block;
}
.images_house{
position: relative;
margin-left: 250px;
margin-top: 50px;
margin-right: 100px;
width: 700;
float: left;
clear: both;
}
.images_blind{
position: absolute;
top: 134px;
left: 500px;
}
.images_blind:hover{
transform: scale(1.5,1.5);
}
.images_chair{
position: absolute;
top: 532px;
left: 442px;
}
.images_chair:hover{
transform: scale(1.5,1.5);
}
html 파일)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>self_project_1 </title>
<link rel="stylesheet" href="list.css">
<style>
</style>
</head>
<body>
<ul>
<li><a href="https://www.apple.com/kr/mac/?afid=p238%7CfIhApzCk_mtid_18707vxu38484&cid=aos-kr-kwna-brand" target="_blank">laptop</a></li>
<li><a href="https://ohou.se/productions/790368/selling" target="_blank">chair</a></li>
<li><a href="https://www.11st.co.kr/products/4903676221?NaPm=ct=l85gdzio|ci=acaca8d06b6e2d6faf8ba9604ba65c720d2434d6|tr=sls|sn=17703|hk=1e69ec79e12b6b1bf7a24aec0c386965b9e481b5&utm_term=&utm_campaign=%B3%D7%C0%CC%B9%F6pc_%B0%A1%B0%DD%BA%F1%B1%B3%B1%E2%BA%BB&utm_source=%B3%D7%C0%CC%B9%F6_PC_PCS&utm_medium=%B0%A1%B0%DD%BA%F1%B1%B3" target="_blank">coffee machine</a></li>
<li><a href="https://mall.hanssem.com/goods/goodsDetailMall.do?gdsno=927800&utm_source=naver&utm_medium=cps&NaPm=ct%3Dl85ghvy8%7Cci%3D41bac1e01f0bbe72dd4690d41244c0d9cc44572e%7Ctr%3Dslsbrc%7Csn%3D52395%7Chk%3D43c8543eb68588c3de0856f9381d64be408ac3f8" target="_blank">blind</a></li>
</ul>
<div>
<div class="images">
<div class="images_house">
<img src="../project_0917/project_image/house.jpeg" alt="house 사진" usemap="#house">
<div class="images_chair">
<a href="https://ohou.se/productions/790368/selling" target="_blank"><img src="../project_0917/project_image/chair.png" alt="chair_1" ></a>
</div>
<div class="images_blind">
<a href="https://mall.hanssem.com/goods/goodsDetailMall.do?gdsno=927800&utm_source=naver&utm_medium=cps&NaPm=ct%3Dl85ghvy8%7Cci%3D41bac1e01f0bbe72dd4690d41244c0d9cc44572e%7Ctr%3Dslsbrc%7Csn%3D52395%7Chk%3D43c8543eb68588c3de0856f9381d64be408ac3f8" target="_blank"><img src="../project_0917/blind.png" alt="blind_1"></a>
</div>
</div>
<map name="house">
<area class="laptop" shape="rect" coords="253,411,473,520"
href="https://www.apple.com/kr/mac/?afid=p238%7CfIhApzCk_mtid_18707vxu38484&cid=aos-kr-kwna-brand"
alt="노트북" target="_blank">
<area shape="rect" coords="145,256,320,389"
href="https://www.11st.co.kr/products/4903676221?NaPm=ct=l85gdzio|ci=acaca8d06b6e2d6faf8ba9604ba65c720d2434d6|tr=sls|sn=17703|hk=1e69ec79e12b6b1bf7a24aec0c386965b9e481b5&utm_term=&utm_campaign=%B3%D7%C0%CC%B9%F6pc_%B0%A1%B0%DD%BA%F1%B1%B3%B1%E2%BA%BB&utm_source=%B3%D7%C0%CC%B9%F6_PC_PCS&utm_medium=%B0%A1%B0%DD%BA%F1%B1%B3"
alt="커피머신" target="_blank">
</map>
</div>
<div id="details">
<br><br><br><br><br><br>
<details>
<summary>laptop</summary>
<p>
<ul>
<li> <a
href="https://www.samsung.com/sec/galaxybook/package-galaxy-book2-pro360-nt950qed-kw72d/NT950QED-KW72D/">삼성갤럭시북2</a> </li>
<li><a href="https://www.lge.co.kr/notebook/17z90q-ea5wk">LGgram</a>
</ul>
</p>
</details>
<details>
<summary>chair</summary>
<p>
<ul>
<li><a
href="https://www.ssg.com/item/itemView.ssg?itemId=1000501361133&siteNo=7014&salestrNo=6005&ckwhere=ssg_naver&appPopYn=n&utm_medium=PCS&utm_source=naver&utm_campaign=naver_pcs&NaPm=ct%3Dl85ho40g%7Cci%3D2d770534e41337ab7e7dee96a7f704217b636cb1%7Ctr%3Dslsc%7Csn%3D218835%7Chk%3D6a0a9a10f6b1aa01854a77ddc0ba566d9a6f6afc">회전의자</a>
</li>
<li><a
href="https://shopping.interpark.com/product/productInfo.do?prdNo=8937963428&dispNo=016001&bizCd=P01397&NaPm=ct%3Dl85hp2qg%7Cci%3D8833cc6f16950e2ee695ccf55772ff3a3bcedaa3%7Ctr%3Dslsc%7Csn%3D3%7Chk%3Db41c426bd52f2eee00eee1b5d84d2cde31d4bbe1&utm_medium=affiliate&utm_source=naver&utm_campaign=shop_20211015_navershopping_p01397_cps&utm_content=conversion_47">라탄
의자</a></li>
</ul>
</p>
</details>
<details>
<summary>coffee machine</summary>
<ul>
<li><a
href="https://www.lotteon.com/p/product/LE1208166838?sitmNo=LE1208166838_1244503287&ch_no=100067&ch_dtl_no=1000223&entryPoint=pcs&dp_infw_cd=CHT&NaPm=ct%3Dl85hz4m8%7Cci%3D2887de1fa0e8c8329f094b70ec298adbbeb958ab%7Ctr%3Dslsbrc%7Csn%3D251240%7Chk%3Da11df25ab6eb9b07042ed3270009c4b43ba34284">캡슐네스프레소</a></li>
<li><a
href="https://emart.ssg.com/item/itemView.ssg?itemId=1000466081337&siteNo=6001&ckwhere=naver&appPopYn=n&utm_medium=PCS&utm_source=naver&utm_campaign=naver_pcs&NaPm=ct%3Dl85i05nk%7Cci%3De6a314d71cbbd8685fafa8822663443763f63424%7Ctr%3Dslsc%7Csn%3D596%7Chk%3D8633746909d9bbd08fef8535b502ef0cebf6747b">필립스</a>
</li>
</ul>
</details>
<details>
<summary>blind</summary>
<ul>
<li><a href="https://shopping.naver.com/living/homeliving/stores/101440459/products/6279399039?NaPm=ct%3Dl85i311s%7Cci%3D94fdf6a76c5c093b2fa42187e85b0403198efa4c%7Ctr%3Dslsbrc%7Csn%3D177690%7Chk%3D39254863b267b99bc6e8ef6773d005d0d1830257">친환경</a></li>
<li><a href="https://smartstore.naver.com/hyuan/products/3525677927?n_media=370826&n_rank=3&n_ad_group=grp-a001-02-000000027590989&n_ad=nad-a001-02-000000187847008&n_campaign_type=2&n_mall_id=hyuan&n_mall_pid=3525677927&n_ad_group_type=2&NaPm=ct%3Dl85i3ab4%7Cci%3D0Bi0001Qmwjx0owrDeYV%7Ctr%3Dpla%7Chk%3D38061d4a3413e634e0cb4b1bc691af5be7c43e50">천연우드</a></li>
</ul>
</details>
</div>
</div>
</body>
</html>
↓결과
사진 출처 : sund_home님의 인테리어 사진 | 예쁜템들 모여사는 오늘의집 유저들의 집꾸미기 (ohou.se)
sund_home님의 인테리어 사진
주방에 새로운 조명 교체하고✨✨ 조명만 교체했을 뿐인데 또 다른 분위기의 주방이라 만족하고 있어요!
ohou.se