<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>기본구조 꼭 외우자. 자동완성이 있다하더라도 필수로 알아야 하는 것.
<b>Hello?</b> 3/5점
B태그
: Bold, 글씨를 굵게한다.
<strong>Hello?</strong> 3/5점
STRONG 태그
: 글씨를 굵게한다.
글씨를 이 두개의 태그를 이용해서 굵게하기보다는 css를 거의 100프로 사용한다.
브라우저에서 확인한 실제 결과는 두개가 똑같다.
이 두개의 차이점을 뭘까?
검색엔진에 수집을 하는 로봇이 있다.
B는 검색엔진이 중요하게 생각하지 않는다. 글씨만 굵게한다.
STRONG은 검색엔진이 중요하게 생각한다.
그런것들을 SEO라고 한다.
SEO(Search Engine Optimization)
: 검색 결과에 더 잘 노출될 수 있도록 취하는 모든 조치 혹은 그러한 것.
a,b의 순서는 관계없지만 보통 a가 먼저 쓰인다.
BR태그
Break, 텍스트 간에 개행을 하기위해 사용한다. 디자인 및 레이아웃을 잡을 목적으로 사용하여서는 안된다. 4/5
html특성상 개행이 한 개일때에는 인식하는데, 한 개를 초과하면 그 이상으로 인식하지 않는다.
< 실행 결과 >
줄 바꿈이 되지 않는다.
<a>Apple</a>
<br>
<b>Banana</b>
<br>
<strong>Cherry</strong><br>을 추가하면 줄 바꿈이 되는걸 볼 수 있다.
< 실행 결과 >
: 띄우기를 두 번 이상 할 때 사용. 스페이스바 친 것처럼 띄우기가 된다.
<a href="#" target="_self">
<b>무료</b> 호텔 숙박권 <b>즉시</b> 증정
<br>
<br>
지금 바로 이동하기
</a>한 부모 안에서도 br, 띄우기, 이미지추가 등등 뭘 쓰든 다 적용이 된다.
<i>아무내용</i>
I태그
: Italic. 기울임 꼴. SEO 의미 없다. 3/5점
<em>중요함!</em>
EM 태그
: Emphasize. 기울임 꼴. SEO 의미 있다. 3/5점 검색시에 노출이 잘 된다.
< 출력 결과 >
<s>아무내용</s>
S 태그
: Strike. 어떠한 내용이 이동/수정되었거나 더 이상 올바르지 않음을 나타낼때 사용한다. 2/5
<del>삭제됨</del>
DEL 태그
: Deleted. 어떠한 내용이 삭제되었음을 나타낸다.
2<sup>4</sup>
SUP
: Superscript, 위 첨자 1/5
H<sub>2</sub>
SUB
: Subscript, 아래 첨자 1/5
< 실행 결과 >
가령,
지난 5월, MIT<sub><a href="#">홈페이지</a></sub>에서는....< 실행 결과 >
이렇게 써서 링크를 걸 수도 있다.
<u>아무내용</u>
U 태그
: UnderLine, 밑줄 긋기 2/5
<ins>뇽뇽뇽</ins>
INS 태그
: Inserted, 밑줄 긋기, 단, 해당 내용이 작성 후에 추가되었음을 나타낸다. 1/5
< 실행 결과 >
IMG 태그
: Image, 이미지를 넣기 위해 사용, self-closing 태그이다 .
ALT 속성
: Alternative, 어떠한 이유에 의해 이미지를 정상적으로 표시하지 못하는 경우 (엑박-엑스박스)에 대신 표시할 텍스트이면서 시작장애인의 접근성을 보장하기 위한 조치
- alt를 쓰지 않으면 HTML 표준위반이다.
SRC 속성
: Source, 이미지의 주소/경로
<img alt="흰둥이" src="https://img1.daumcdn.net/thumb/R1280x0.fjpg/?fname=http://t1.daumcdn.net/brunch/service/user/cnoC/image/bA15rm1zOffsle8EVMPD_ZHtxYU.JPG">
<a href="https://www.google.com" target="_blank">
<img alt="흰둥이" src="https://img1.daumcdn.net/thumb/R1280x0.fjpg/?fname=http://t1.daumcdn.net/brunch/service/user/cnoC/image/bA15rm1zOffsle8EVMPD_ZHtxYU.JPG">
</a>=> 사진에 href 뒤에 적은 곳으로 연결할 수도 있다. 링크 연결.
https://ko.wikipedia.org/wiki/%EB%8C%80%ED%95%9C%EB%AF%BC%EA%B5%AD
연습문제로 아주 좋은 페이지다.
이렇게 될 수 있겠다....
