10주차 - jsp (9) <img>, 반응형&고정형
2022. 9. 8. 18:09ㆍjsp/html
오늘의 목표
01. <img> 태그 사용
02. 반응형, 고정형의 차이
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ex09</title>
</head>
<body>
<h2>이미지</h2>
<!-- 사이즈를 픽셀로 고정하게되면 화면의 크기를 변경해도 바뀌지 않는다. 이를 고정형이라고 부른다. -->
<img src="images/icon1.png" width="200px" height="200px" />
<!-- http://localhost:8085/html_exam/images/icon2.png -->
<h2>이미지</h2>
<!-- 사이즈를 퍼센트로 넣으면 화면의 크기의 비율에 맞춰서 변동한다. 이를 반응형이라고 한다. -->
<img src="/html_Exam/images/icon2.png" width="10%" height="30%" />
</body>
</html>
동영상이 아닌지라 말로 설명을 해서 이해가 어려울 수도 있습니다.
위의 이미지는 픽셀로 사이즈를 설정했기 떄문에 화면을 줄이거나 늘여도 고정적인 크기를 갖습니다.
하지만 아래의 이미지는 %로 사이즈를 설정했기 때문에 화면을 줄이거나 늘이면 그에 맞는 비율로 크기가 변경 됩니다.
이렇게 사용자의 작동에 따라 변동하는 것을 반응형, 변동이 없는 것을 고정형이라고 부릅니다.
*src가 뭔지 모를 수 있는데 src는 source 의 약자입니다.
안쓰다보면 종종 했갈릴 수도있는거니까 쓰면서 아무생각없이 쓰지말고 가끔씩은 이게 어떤 약자였는지도 떠올려보면 코드 이해가 쉽습니다.
'jsp > html' 카테고리의 다른 글
| 10주차 - jsp (11) <table>, <th>, <td> (0) | 2022.09.08 |
|---|---|
| 10주차 - jsp (10) id, class, <style> (0) | 2022.09.08 |
| 10주차 - jsp (8) <div>, <big>, <small> (0) | 2022.09.08 |
| 10주차 - jsp (7) <a>, href, target, title (0) | 2022.09.08 |
| 10주차 - jsp (6) <ol>, <ul> (0) | 2022.09.08 |