-
기초 코드2 - 이미지, 링크웹 Web/HTML & CSS & Javascript 2022. 1. 12. 12:21
이미지 활용
이미지를 다운받아서 c드라이브의 html 폴더에 넣기
a하고 탭 누르면 링크 삽입용 코드 자동 완성
img 하고 탭 누르면 이미지 삽입용 코드 자동완성
<img src="강태현.jpg" alt=""> //이미지 나타나기 <h2><a href="https://naver.com"><img src="강태현.jpg" alt=""></a></h2> <br> //이미지에 링크 삽입 <h2><a href="https://naver.com">네이버</a></h2> <br> //네이버 글씨에 링크 삽입이 코드를 활용해서 아래처럼 구현해보자
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ background-color: beige; font-family: fantasy; } a{ border-radius: 30px; background-color: aqua; border: 2px red solid; padding: 10px; } </style> </head> <body> <h1>반가워요</h1> <h2><a href="https://naver.com">네이버</a></h2> <br> <h2><a href="https://naver.com">네이버</a></h2> <br> <img src="강태현.jpg" alt=""> </body> </html>
<br>은 줄바꿈페이지 안에 페이지
index2.html로 새파일 생성하여 미리보기에 index1.html 띄우기
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> iframe{ margin-right: 20px; } ol> li { display: inline; margin: 20px; font-size: 20px; background: yellow; padding: 5px; border: 3px solid blue; } </style> </head> <body> <h1>홈페이지</h1> <ol> <li><a href="index.html" target="ifr"> html5(css)</a></li> <li><a href="#"> jsp(css)</a></li> <li><a href="#"> spring(css)</a></li> <li><a href="#"> board(css)</a></li> </ol> <div> <iframe name ="ifr" width=600 height=600 border=1> </iframe> </div> </body> </html>링크 삽입된 글자에 커서를 갖다대면 글씨효과 바뀌기
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> iframe{ margin-right: 20px; } ol> li { display: inline; margin: 15px; font-size: 15px; background: yellow; padding: 5px; border: 3px solid blue; } a:hover{ background-color: coral; font-weight: bold; color: white; font-style: italic; } a:link{ text-decoration: none; letter-spacing: 2px } </style> </head> <body> <h1>홈페이지</h1> <ol> <li><a href="index.html" target="ifr"> html5(css)</a></li> <li><a href="#"> jsp(css)</a></li> <li><a href="#"> spring(css)</a></li> <li><a href="#"> board(css)</a></li> </ol> <div> <iframe name ="ifr" width=600 height=600 border=1> </iframe> </div> </body> </html>'웹 Web > HTML & CSS & Javascript' 카테고리의 다른 글
연도와 월 입력하여 달력 출력하기 (0) 2023.02.07 HTML파일에서 외부 CSS, JS파일 불러오기 (0) 2023.02.03 DOM, Document (0) 2023.02.02 기초 코드3 - form태그 (0) 2022.01.12 브라켓 기본세팅 및 CSS 기초 코드 (0) 2022.01.12