[1일 1코딩] 코딩독학 HTML 이미지 feat. tcpschool
오늘은 HTML 이미지!
실습해본거 옮겨적기...
tcpschool 사이트에서 보면서
창 두개 띄워 놓고
바로 바로 베끼면서 코딩실습하는중
이미지 삽입 태그 : <img>
<img src = "이미지 주소" alt = "대체문자열">
이미지의 크기 설정 : width, height
이미지의 테두리 설정 : border
<style>
img {
width:100%;
border: 1px solid black;
}
</style>
이미지에 링크 설정 :
<a href="링크주소" target="_blank">
<img src="사진주소" alt="flag" style="width:320px; height:214px">
</a>
실습
오늘은 상콤한 제훈 사진으로 실습. ㅋㅋㅋㅋ
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>TCPSchool HTML Images</title>
</head>
<body>
<h2 style = "color : pink">이제훈 프로필로 이동</h2>
<a href="https://search.daum.net/search?w=tot&DA=YZR&t__nil_searchbox=btn&sug=&sugo=&q=%EC%9D%B4
%EC%A0%9C%ED%9B%88">
<img src="https://t1.daumcdn.net/cfile/tistory/9946E6345AE81E402D" alt="flag" style="width:320px; height:214px; border : 1px dotted blue">
</a>
<h4 style= "color:red">사진 클릭!</h4>
</body>
</html>
border 는 solid로 되어있었는데
점선도 될까 해서 dotted로 했는데 된닼ㅋㅋ
출처 : TCP스쿨
'[1일1코딩]' 카테고리의 다른 글
| 코딩독학 HTML 테이블 feat. tcpschool (0) | 2018.05.04 |
|---|---|
| 코딩독학 HTML 리스트 feat. tcpschool (6) | 2018.05.02 |
| 코딩독학 HTML 링크 feat. tcpschool (2) | 2018.04.30 |
| 코딩독학 HTML 색 feat. tcpschool (2) | 2018.04.27 |
| 코딩독학 HTML 스타일 feat. tcpschool (4) | 2018.04.26 |