HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이미지를 테이블속에 넣어주면서 이미지를 둥글게 보여지도록 합니다.</title>
<link rel="stylesheet" href="css/image.css">
<script type="text/javascript" src="js/image.js"></script>
</head>
<body>
<div id="container">
<table>
<thead>
<tr></tr>
</thead>
<tbody>
<tr></tr>
<tr></tr>
</tbody>
</table>
</div>
</body>
</html>JS
window.onload = function(){
const person_arr = [{name:"아이유",photo:"iyou.jpg", age:25, address: "서울시 강남구", largePhoto:"iyouLarge.jpg"}
,{name:"김태희",photo:"kimth.jpg", age:27, address: "서울시 마포구", largePhoto:"kimthLarge.jpg"}
,{name:"박보영",photo:"parkby.jpg", age:30, address: "인천시 미추홀구", largePhoto:"parkbyLarge.jpg"}];
// "name":"아이유" 가능
// 속성값에 띄어쓰기 있는 경우 "" 무조건 사용
let html_1 = ``;
person_arr.forEach(function(item,index,array){
html_1 += `<th>${item.name}</th>`;
})
const name_tr = document.querySelector("div#container > table > thead > tr");
name_tr.innerHTML = html_1;
const th_list = document.querySelectorAll("#container > table > thead > tr > th");
const photo_tr = document.querySelector("div#container > table > tbody> tr:first-child");
const info = document.querySelector("div#container > table > tbody> tr:last-child");
photo_tr.innerHTML = `<td colspan='3'>
<img src='images/${person_arr[0].photo}'/></td>`; // 기본 이미지로 0번째 등록
th_list.forEach(function(elmt,index,array){ // 태그라면 elmt라고 한다.
elmt.onmouseover = function(){
// alert("확인용 헤헤헤");
// alert(index);
// alert(person_arr[index].photo);
photo_tr.innerHTML = `<td colspan='3'>
<img src='images/${person_arr[index].photo}'/></td>`;
const img = document.querySelector("div#container > table > tbody > tr > td > img");
img.style.opacity = "1.0";
img.style.transition = "3s"; // 안되넹 ㅠㅠ
elmt.style.backgroundColor = "navy";
elmt.style.color = "white";
elmt.style.cursor = "pointer";
elmt.style.transition = "3s"; // 라벨에 마우스를 올리면 3초
elmt.innerHTML = "클릭하세요";
elmt.style.width = "33.3333%";
}
elmt.onmouseout = function(){
const img = document.querySelector("div#container > table > tbody > tr > td > img");
img.style.opacity = "";
// img.style.transition = "3s"; // 안되는중
elmt.style.backgroundColor = "";
elmt.style.color = "";
elmt.style.cursor = "";
// elmt.style.transition = "3s"; // 필요한가?? - 마우스 올릴때나 뗄때 하나만 적용해도 적용이 되는중
elmt.innerHTML = person_arr[index].name;
elmt.style.width = "";
info.innerHTML = "";
photo_tr.innerHTML = `<td colspan='3'>
<img src='images/${person_arr[index].photo}'/></td>`;
}
elmt.onclick = function(){
// alert("확인용 : 클릭하였습니다.");
info.innerHTML = `<td colspan='3'><div style="font-weight: bold;">나이 : ${person_arr[index].age}</div>
<div style="font-weight: bold;">주소 : ${person_arr[index].address}</div></td>`;
photo_tr.innerHTML = `<td colspan='3'>
<img src='images/${person_arr[index].largePhoto}'/></td>`;
const img = document.querySelector("div#container > table > tbody > tr > td > img");
img.style.opacity = "1.0";
}
}) // end of th_list.forEach(function(elmt,index,array)-----------------
} // end of window.onload = function()----------------------+CSS
@charset "UTF-8";
div#container {
border: solid 0px gray;
width: 80%;
margin: 4% auto;
}
div#container > table {
border: solid 0px red;
width: 50%; /* 여기서 width 는 80%의 50%(부모의 50%) */
margin: 0 auto;
border-collapse: collapse;
}
/* 완성하기 전(확인하면서 하기)
div#container > table th
, div#container > table td {
border: solid 1px orange;
}
*/
div#container > table th{
border: solid 1px orange;
}
div#container > table th{
height: 40px;
font-size: 14pt;
}
div#container > table td{
text-align: center;
height: 200px;
}
div#container > table td > img{
border: solid 0px red;
/* border-radius 는 테두리를 둥글게 만드는 속성이다. */
/* border-radius: 20px 20px 20px 20px / 20px 20px 20px 20px; */ /* 시계방향 */
/* border-radius: top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y */
/* border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; 절반씩 깍는다. */
/* 또는 아래처럼 같은 것이다. */
border-radius: 50%;
opacity: 0.2;
/* 광도 0.0 ~ 1.0 숫자가 적을수록 희미해진다. 0.0 은 투명, 1.0 은 원래 광도이다. */
}정리
- 09_javascriptStandardObject -> 01_Array_class
-> image.html, image.js, image.css
