다연이네

[days02] 이미지 플로팅(Image Floating) 본문

Web/HTML

[days02] 이미지 플로팅(Image Floating)

　다연　 2020. 12. 1. 17:58
반응형

1. 사진 옆에 글 뜨게 하기 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex03_02.html</title>
<style>
p{
	border: 1px solid gray;
	padding: 10px;
	}
</style>
</head>
<body>
<h3>이미지 플로팅(floating ==떠가다, 유동적인, 띄우다)</h3>
<p>

	<img style = "float: left" src = "./images/img_kenik.gif" alt="">
	<!--사진 크기에 맞춰서 글자 다 띄우고싶다 (위에가 비지 않게) => style에 float주기 -->
	[황그로] [오전 11:30] 새로운 맛있는 떡볶이
	[황그로] [오전 11:30] 응응
	[배다연] [오전 11:30] 맛있대
	[황그로] [오전 11:30] 추가함
	[황그로] [오전 11:30] 새로운 떡볶이 도전 잘안하쥐만
	[황그로] [오전 11:30] 리뷰가 
	[황그로] [오전 11:30] 넘조아
	[황그로] [오전 11:30] 너 점심 뭐먹냐
	[배다연] [오전 11:32] 요르
	[배다연] [오전 11:32] 넉넉한 인생..
	[배다연] [오전 11:32] 글쎄 나 뭐 시켝머을까 나가먹을까 고민중야
</p>



<p>
	<img style = "float: right;" src = "./images/img_kenik.gif" alt="">
	[황그로] [오전 11:30] 새로운 맛있는 떡볶이
	[황그로] [오전 11:30] 응응
	[배다연] [오전 11:30] 맛있대
	[황그로] [오전 11:30] 추가함
	[황그로] [오전 11:30] 새로운 떡볶이 도전 잘안하쥐만
	[황그로] [오전 11:30] 리뷰가 
	[황그로] [오전 11:30] 넘조아
	[황그로] [오전 11:30] 너 점심 뭐먹냐
	[배다연] [오전 11:32] 요르
	[배다연] [오전 11:32] 넉넉한 인생..
	[배다연] [오전 11:32] 글쎄 나 뭐 시켝머을까 나가먹을까 고민중야
</p>

<!-- 이미지 형식 : gif, png, jpeg(jpg), ico(아이콘), apng, svg  -->


</body>
</html>

 

 

2. 이미지 클릭하면 해당 사진 링크 출력하게 하기

노트북을 클릭하면 노트북 사진이 있는 페이지로 넘어가고

핸드폰을 클릭하면 핸드폰 사진이 있는 페이지로 넘어가고

커피를 클릭하면 커피 사진이 있는 페이지로 넘어간다.

<실질적인 html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<img src = "./images/workplace.jpg" alt="Workplace" usemap="#workmap"  width="400" height="379">
<!-- map 태그 : 클릭 가능한 영역의 이미지 맵 -->
<map name="workmap">
<area alt="Computer" shape="rect" coords="34,44,270,350" href="computer.html"> <!-- coords : 좌표, 너비  -->
<area alt="Phone" shape="rect" coords="290,172,333,250" href="phone.html">
<area alt="Coffee" shape="circle" coords="337,300, 44" href="coffee.html"> <!-- 원점, 반지름 -->

</map>

</body>
</html>

<노트북>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>Computer</h3>
<img alt="" src="./images/mac.jpg">
</body>
</html>

<핸드폰>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>Phone</h3>
<img alt="" src="./images/cellphone.jpg">
</body>
</html>

<커피>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>Coffee</h3>
<img alt="" src="./images/coffeehouse2.jpg">
</body>
</html>
반응형
저작자표시 비영리

'Web > HTML' 카테고리의 다른 글

[days02] HTML 목록  (0) 2020.12.01
[days02] picture 태그  (0) 2020.12.01
[days02] a 태그를 사용해 네모 박스 클릭 / 이미지 올리기  (0) 2020.12.01
[days02] a 태그 역할 - 링크 외 책갈피, 경고창 띄우기, 메일 보내기  (0) 2020.12.01
[days02] &땡땡땡;  (0) 2020.12.01
'Web/HTML' Related Articles more
Comments