<div>
<img src="./images/tiger.jpg" title="한국산호랑이" alt="이미지가 안보일때 나오는 글자 입니다. 호랑이" />
</div>
<tr>
<td><img src="images/iyou.jpg" /></td>
<td><img src="images/kimth.jpg" /></td>
<td><img src="images/parkby.jpg" /></td>
</tr>
- <img> : 이미지(img) 태그 . 이미지 태그는 inline 방식으로 기본적으로 가로형태로 출력된다.
- ./images/tiger.jpg : 현재폴더(./)에 있는 images 폴더 아래에 있는 tiger.jpg 파일을 의미한다. ./ 은 생략가능하다. ./ : 현재 폴더 ../ : 상위 폴더
- <div> :block 방식으로 블럭에 넣어 세로형태로 출력되게 한다.
1. 이미지(img) 태그 속성값
- src : 이미지 경로
- title : 이미지에 마우스커서를 놓으면 나오는 이미지이름
- alt : 이미지가 안보일때 나오는 글자
- opacity : 광도 속성. 0.0 ~ 1.0 숫자가 적을수록 희미해진다. 0.0 은 투명, 1.0 은 원래 광도이다.
- border-radius : 테두리를 둥글게 만드는 속성. 주로 %를 사용한다. * 예) border-radius: 50% : 테두리 절반씩 깍음
/* 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: 20px 20px 20px 20px
20px 20px 20px 20px */
/* 또는 아래처럼 하면 같은 것이다. */
/* border-radius: 20px; */
/* 또는 아래처럼 하면 같은 것이다. */
/* 주로 border-radius: 20%; 와 같이 %를 사용한다. */
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이미지 더 알아보기</title>
<style type="text/css">
div#container {
/* border: solid 1px gray; */
width: 80%;
margin: 0 auto;
}
div.div_left { /* 옆에 붙일 두개의 div를 묶어서 모두에게 적용시켜야 한다. */
/* border: solid 1px red; */
float: left;
}
div#container > div:last-child { /* 마지막 div는 class="div_left" 을 설정하지 않아도 위의 div를 따라 float: left; 설정값을 따라가므로 적용을 없앤다.*/
/* border: solid 1px red; */
clear: both; /* float: left, right 모두 적용된 것을 없앤다. */
padding-left: 700px;
}
div#container > div {
/* border: solid 1px red; */
margin: 50px 30px 50px 0;
/* padding: 50px 30px 50px 0; */
}
div#title {
/* border: solid 1px green; */
margin: 0 !important; /* !important: 강제적용(최우선순위로 적용된다.) */
}
</style>
</head>
<body>
<div id="container">
<h1 align="center">멋진 숲속의 아침을 감상하세요</h1>
<img src="images/숲속의 아침.jpg" width="300px" height="200px" /> <!-- 기존의 이미지 크기를 width="300px" height="200px" 와 같이 재설정한다. -->
<img src="images/숲속의 아침.jpg" width="300px" height="200px" /> <!-- img 태그는 inline 방식으로 기본적으로 가로형태로 출력된다. -->
<div id="title">숲속의 아침1</div>
<div class="div_left"> <!-- div 태그는 block 방식으로 블럭에 넣어 세로형태로 출력되게 한다. -->
<img src="images/숲속의 아침.jpg" width="300px" height="200px" /> <!-- img 태그는 inline 방식으로 기본적으로 가로형태로 출력된다. -->
<br/>
숲속의 아침2
</div>
<div class="div_left"> <!-- div 태그는 block 방식으로 블럭에 넣어 세로형태로 출력되게 한다. -->
<img src="images/숲속의 아침.jpg" width="300px" height="200px" /> <!-- img 태그는 inline 방식으로 기본적으로 가로형태로 출력된다. -->
<br/>
숲속의 아침3
</div>
<div> <!-- div 태그는 block 방식으로 블럭에 넣어 세로형태로 출력되게 한다. --> <!-- 해당 div에는 class="div_left" 을 설정하지 않아도 위의 설정값을 따라간다. -->
<img src="images/숲속의 아침.jpg" width="300px" height="200px" /> <!-- img 태그는 inline 방식으로 기본적으로 가로형태로 출력된다. -->
<br/>
숲속의 아침4
</div>
</div>
</body>
</html>
- float: left; : <div class="div_left"> 인 "숲속의 아침2" 와 "숲속의 아침3" 를 왼쪽부터 나란히 달라붙게 정렬한다. 즉, 옆에 붙일 두개의 div를 묶어서 모두에게 float 속성을 적용시켜야 한다.
- clear: both; float: left, right 모두 적용된 것을 없앤다. 즉, 앞서 적용된 float 속성을 초기화시킨다. 마지막 div 태그는 따로 설정하지 않아도 위의 div 태그를 따라 float: left; 설정값을 따라가므로 적용을 없앤다.
- !important : 강제적용(최우선순위로 적용된다.)
div#container > table th {
border: solid 1px orange;
font-size: 14pt;
height: 40px;
opacity: 0.3; /* 광도 0.0 ~ 1.0 숫자가 적을수록 희미해진다. 0.0 은 투명, 1.0 은 원래 광도이다. */
}
--------------------------------------------------------------------------------------------------------
<body>
<div id="container">
<table>
<thead>
<tr>
<th>아이유</th>
<th>김태희</th>
<th>박보영</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="images/iyou.jpg" /></td>
<td><img src="images/kimth.jpg" /></td>
<td><img src="images/parkby.jpg" /></td>
</tr>
</tbody>
</table>
</div>
</body>
- table > thead : table의 직속자식(thead)만 적용한다.
table th : table의 직속자식이 아닌 자손 모두를 적용한다. ">" 표시없이 입력한다.
