Html 편집하기 (2) 메타태그
왜 중요한가요?
SEO(검색 엔진 최적화)는 웹사이트가 검색 결과에 더 잘 보이도록 최적화하는 과정이기 때문입니다.
https://developer.mozilla.org/ko/docs/Glossary/SEO
SEO - 용어 사전 | MDN
SEO(검색 엔진 최적화)는 웹사이트가 검색 결과에 더 잘 보이도록 최적화하는 과정입니다. 검색 랭크 개선이라고도 합니다.
developer.mozilla.org
이미지 소스(src)에서 사이즈 변경연습하기
https://www.w3schools.com/html/html_images.asp
HTML Images
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
스타일시트(CSS)로 사이즈 조정하기
비교해보면,
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
사이즈를 계속 유지하려면? 헤드에서 값을 지정하기
<!DOCTYPE html>
<html>
<head>
<style>
/* This style sets the width of all images to 100%: */
img {
width: 100%;
}
</style>
</head>
<body>
제목사이즈 변경하기
움짤 애니메이션 만들기
<!DOCTYPE html>
<html>
<body>
<h2>Animated Images</h2>
<p>HTML allows moving images:</p>
<img src="programming.gif" alt="Computer man" style="width:48px;height:48px;">
</body>
</html>
네이버 링크 시도하기
1. 네이버링크(주소 프로토콜 포함 http;// 복사하기)
2. 네이버이미지에서 사용하고 싶은 이미지를 찾아 '주소복사'
<!DOCTYPE html>
<html>
<body>
<h2>Image as a Link</h2>
<p>The image is a link. You can click on it.</p>
<a href="http://www.naver.com">
<img src="https://play-lh.googleusercontent.com/Kbu0747Cx3rpzHcSbtM1zDriGFG74zVbtkPmVnOKpmLCS59l7IuKD5M3MKbaq_nEaZM" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
</body>
</html>
3. 브라우징 누르면
클릭해보면, 네이버창으로 이동합니다.
그런데 저 네이버이모티콘 테두리가 보라색인거 보이시죠? 활성화되었다는 뜻이래요, 파란색 테두리일때는 비활성화래욥
뭔가 재미있는데,,,지금도 대체 내가 뭘하고 있는건지 원 ㅎㅎㅎ