[HTML] HTML Images
- Image Map
: 이미지를 이용하여 메뉴를 만드는 방법. 클릭 시 설정해놓은 관련된 페이지로 이동함.
1) Free Oneline Image Map 홈페이지 접속
2) Active, Shape, Link, Title, Targer 설정
3) Show Me The Code 입력
- Background Image
: 사진으로 배경을 만드는 방법
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image : url('~~~이미지의 주소');
}
</style>
</head>
<body>
<h2> Background Image </h2>
<p> 밍밍먕먕묭묭 </p>
</body>
</html>- Backgound Cover
: 사진으로 배경 커버를 만드는 방법
<style>
body {
background-image: url('~~~이미지의 주소');
background-repeat: no-repeat; // 사진 반복하지 않는다
background-attachment: fixed; //
background-size: cover; // 크기를 전체사이즈로 해라
</style>- The Picture Element
: 화면의 크기에 따라 보여주는 사진을 달라지게 하는 방법
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2> 제목 작성 </h2>
<picture>
<source media="(min-width: 650px)" srcset="img_food.jpg"> // 화면의 크기가 ~ 이상이면 이 사진을 보여준다
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg" style="width:auto;">
</picture>
<p> 글 내용 작성 </p>
</body>
</html>- Image Float
: 사진을 배치할 때 사용
<!DOCTYPE html>
<html>
<body>
<h2>Floating Images</h2>
<p><strong>글 제목 작성:</strong></p>
<p>
<img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
글 내용 작성
</p>
<p><strong>글 제목 작성:</strong></p>
<p>
<img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
글 내용 작성
</p>
</body>
</html>Author And Source
이 문제에 관하여([HTML] HTML Images), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jyj1055/HTML-HTML-Images저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
