-
HTML_생활코딩 : 웹페이지의 구조를 정의하는 태그, a태그, 웹사이트 완성Language/HTML&CSS 2022. 7. 20. 01:07
생활코딩 학습 내용 복습_1일차_2
- 날짜 : 2022.07.19.화
- 학습내용 : WEB 1-13 ~ 1-16
1. 문서의 구조와 슈퍼스타들
- <title> : 웹페이지의 제목을 사용자에게 명시적으로 알려줄 수 있고, 검색엔진에서 title에 적힌 정보를 책 표지와 같은 정보로 인식한다. 따라서 title 태그를 쓰지 않는 것은 SEO에 완전 손해다!
- <meta charset="utf-8"> : 웹브라우저야 이 웹페이지는 UTF-8로 만들어졌기 때문에 UTF-8로 열어야 해~ 라는 의미. utf-8이 뭔진 몰라도 된다.
- <body> : 본문의 내용을 구분하는 태그 이것은 약속이다
- <head> : 본문을 설명하는 태그 이것도 약속이다. 그리고 body 태그는 head태그 아래에 놓이게 된다.
- <html> : 그리고 head와 body를 감싸는 최상위 태그. 그리고 이 html태그 위에 관용적으로 <!doctype html>이라고 적는다.
2. html태그의 제왕
- <a> : 이 태그의 이름은 anchor의 첫글자 a입니다. 앵커는 배가 정박할 때 사용하는 닻을 의미합니다. 정보의 바다에 정박한다는 의미의 시적인 표현인 a 태그는 어떤 기능을 표현하는 것일까요? 바로 "링크"입니다. 그리고 속성을 적는데, 하이퍼텍스트가 링크이므로 속성은 첫글자가 h, 그리고 '웹브라우저야 이 링크를 참조해'라는 명령으로 reference의 ref를 합쳐 href 속성을 사용합니다.
-> 용례 : <a href="url">link text</a>
-> 영문설명 : The most important attribute of the <a> element is the href attribute, which indicates the link's destination.
그리고 새 탭으로 이 링크가 열리게 하고 싶다면 target="_blank" 속성을 추가합니다.
또는 이 링크가 어떤 내용을 담고 있는지를 마우스를 가져다 댔을 때 툴팁으로 보여주고 싶다면 title 속성을 추가합니다.
-> 용례 : <a href="url" target="_blank" title="설명내용">link text</a>
3. 웹사이트 완성
- 앞에서 웹페이지를 만드는 방식을 배웠다면 웹사이트는 이 웹페이지를 엮어 하나의 책을 만드는 것과 같다. 책을 만들 때 페이지 한장 한장을 풀 또는 본드, 실제본하는 것 처럼 웹사이트는 웹페이지를 a태그를 활용해 연결한다.
'Language > HTML&CSS' 카테고리의 다른 글
CSS_생활코딩 : BOX 개념, GRID 개념, 반응형 웹 (0) 2022.07.25 CSS_생활코딩 : 웹페이지에 CSS를 삽입하는 2가지 방법 (0) 2022.07.25 HTML_생활코딩 : 동영상 삽입, 댓글 기능, 채팅 기능, 방문자 분석기 (0) 2022.07.21 HTML_생활코딩 : 웹페이지의 구조를 정의하는 태그, a태그 (0) 2022.07.20 HTML_생활코딩 : 태그의 정의, 속성, 목차태그, 표태그 (0) 2022.07.20