[HTML] HTML Images
14075 ワード
- Image Map
:画像を使用してメニューを作成する方法.クリックしたときに設定した関連ページに移動します.
1)Free Oneline Image Mapホームページ接続
2)Active、Shape、Link、Title、Target設定
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>Reference
この問題について([HTML] HTML Images), 我々は、より多くの情報をここで見つけました https://velog.io/@jyj1055/HTML-HTML-Imagesテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol