반응형
이미지 버튼
위 사진처럼 이미지 링크 세 개를 만들어보세요.
- 순서대로 각각 "https://facebook.com", "https://instagram.com", "https://github.com"으로 갑니다.
- 세 이미지는 브라우저에서 가운데 정렬이 되어 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>이미지 버튼</title>
<meta charset="utf-8">
<link rel="stylesheet" href="Styles.css">
<link href="https://fonts.googleapis.com/earlyaccess/notosanskr.css" rel="stylesheet">
</head>
<body>
<h1>Check me out on...</h1>
<div class="link-container">
<a href="http://facebook.com">
<img src="facebook.png" width="70">
</a>
<a href="http://instagram.com">
<img src="instagram.png" width="70">
</a>
<a href="http://github.com">
<img src="github.png" width="70">
</a>
</div>
</body>
</html>body {
margin: 50px 0;
}
h1 {
font-family: 'Noto Sans KR', sans-serif;
margin-bottom: 20px;
text-align: center;
}
.link-container {
text-align: center;
}
.link-container a:not(:last-child) {
margin-right: 20px;
}
a {
text-decoration: none;
}
본 내용은 Codeit의 '웹 퍼블리싱' 강의를
참고하여 작성한 내용입니다.
반응형
'Front-end > HTML&CSS' 카테고리의 다른 글
| [웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.08 |
|---|---|
| [웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.08 |
| [웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.08 |
| [웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.08 |
| [웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.08 |