-
이미지 버튼 링크 만들기HTML & CSS 2020. 4. 15. 03:04
reference)) https://www.codeit.kr/learn/courses/web-publishing/620
이미지 버튼 | 코드잇
새로운 코딩 교육의 시작, 월 3만원대로 Python, JavaScript, HTML/CSS, Java 등 1,600개 이상 프로그래밍 강의를 무제한 수강하세요!
www.codeit.kr
<!DOCTYPE html> <html> <head> <title>이미지 버튼</title> <meta charset="utf-8"> <link rel="stylesheet" href="css/styles.css"> <link href="https://fonts.googleapis.com/earlyaccess/notosanskr.css" rel="stylesheet"> </head> <body> <h1>Check me out on...</h1> <main> /*이미지는 암거나 ㅇㅇ*/ <a href="https://facebook.com" class="logo"><img src="./images/facebook.png" ></a> <a href="https://instagram.com" class="logo"><img src="./images/instagram.png" ></a> <a href="https://github.com" class="logo"><img src="./images/github.png" ></a></main> </body> </html>body { margin: 50px 0; } h1 { font-family: 'Noto Sans KR', sans-serif; margin: 0; margin-bottom: 20px; text-align: center; } main { text-align: center; } .logo img { width: 70px; height: 70px; } .logo img:not(:last-child) { margin-right: 20px; }
시행결과.jpg 'HTML & CSS' 카테고리의 다른 글
memo key concept of HTML in english (0) 2020.05.01 너무너무너무 간단한 Positioning 실습 (0) 2020.04.15 CSS 최적화 (길이 줄이기) (0) 2020.04.15 페스티벌 홍보 도면 구현 (0) 2020.04.15 누구나 할 수 있는 간단한 로그인 화면 (0) 2020.04.14