Image - 1

양혜정·2024년 3월 30일
day49
0

HTML/CSS/JS 실행

목록 보기
15/60
post-thumbnail

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이미지를 테이블속에 넣어주면서 이미지를 둥글게 보여지도록 합니다.</title>

<link rel="stylesheet" href="css/03_image.css">
</head>
<body>
	<div id="container">
      <table>
         <thead>
            <tr>
               <th>아이유</th>
               <th>김태희</th>
               <th>박보영</th>
            </tr>
         </thead>
         
         <tbody>
            <tr>
               <td><img src="images/iu.jpg"/></td>
               <td><img src="images/kimth.jpg"/></td>
               <td><img src="images/parkby.jpg"/></td>
            </tr>
         </tbody>
      </table>
   </div>
</body>
</html>

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 th:hover{
	background-color: navy;
	color:white;
	cursor:pointer;
}

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.5;
	/* 광도  0.0 ~ 1.0  숫자가 적을수록 희미해진다.  0.0 은 투명, 1.0 은 원래 광도이다. */
}

div#container > table td > img:hover {
	opacity: 1;
}

정리

  • ch07_image -> 03_image.html, 03_image.css
profile
양혜정
이전 포스트

Table - 6

다음 포스트

Image - 2

0개의 댓글

관련 채용 정보