<부모 자식과 목록> - 목차에 관련된 태그와 부모 자식이라는 비유적 특성
<li> </li> → 목차를 만듦
list (목록, 목차)의 의미를 가진 태그이다. 그리고 이 태그는 필연적으로 부모-자식의 특성을 가진다.
<li>&</li>는 자식의 성질 -> 부모의 태그로 감싸주어야 한다.
<ul> </ul> → <ul> <li> </li> </ul> 식으로 li를 감싸주는 부모 특성의 태그
unordered list 라는 의미 -> unordered : 순서가 매겨지지 않았다 -> 그냥 나열
<ol> </ol> → <ol><li> </li></ol> 식으로 li를 감싸주는 부모 특성의 태그
ordered list 라는 의미 -> ordered : 순서가 매겨져있다 -> 알아서 순서를 매겨줌 : 1. , 2. , 3. ... 이런 식으로
<ol> & <ul> 과 <li>는 무조건 같이 써야 한다!
<문서의 구조와 슈퍼스타들> - 문서, 웹페이지의 구조에서 통상적으로 쓰이는 구조 그리고 이에 가장 자주 쓰이는 슈퍼스타 태그 5가지 [ head, body, html, title, meta ]
<!DOCTYPE HTML> → 모든 웹페이지에서 이렇게 시작한다 (관용적으로 명시)
<html> → head 태그와 body 태그를 합쳐서 html로 묶는다
<head>
여기는 웹페이지의 본문 외 특성 등을 나타내는 곳
<title>웹페이지 탭에 나타나는 제목</title>
<meta charset="utf-8"> → 내가 입력한 형식이 utf-8 형식이니 웹페이지도 이 형식으로 나타내줘~
</head>
<body>
여기는 웹페이지의 본문을 나타내는 곳
<h1>heading 문구</h1>
<p>뭐 다른 설명들</p>
<ul>
<li>목차들도</li>
<li>몇 개 써주고</li>
</ul>
</body>
</html>
<HTML태그의 제왕> - <a> </a> 태그
<a> 태그를 통해서 각자 흩뿌려져있던 웹페이지들이 웹사이트를 형성하고 웹사이트간의 연결이 가능해졌다.
즉, 웹'서핑'이 가능해졌다.
<a> </a> → 클릭하면 웹사이트랑 연결시켜줌
anchor (항해하다 내리는 닻) 이라는 의미 , 웹사이트랑 연결하긴 할 건데, 무슨 사이트랑?
<a href="웹사이트 주소"> 문구 </a>
여기서 href란? hyper text reference 라는 의미로 연결하고자 하는 웹사이트를 나타낸다.
+ 특성 ① : 새로운 탭으로 열고 싶다 : target="_blank" 붙여주면 된다.
+ 특성 ② : 하이퍼링크 첨부된 글자를 클릭하기 전에 커서를 올렸을 때 설명 tool 작게 띄우는 법
title="이런 내용의 웹사이트가 연결돼있다" 붙여주면 된다.
→<a href="2.html" target="_blank" title="html certification"> 각 특성 간 순서 상관없다.
<웹사이트 완성>
웹사이트를 형성하는 데에 필요한 가장 중요한 태그들을 배웠다. 필수적인 그리고 가장 많이 이용하는 태그들을 배웠으니 이를 토대로 하나의 웹사이트를 완성할 수 있다. *웹사이트는 웹페이지라는 종이들을 묶어서 모아놓은 하나의 책을 말한다.
하는 법 : 만들어놓은 목차들에다가 <a> </a> 태그를 이용하여 연결하고싶은 또는 띄우고 싶은 페이지를 하이퍼링크를 걸어준다. 그리고 이렇게 여러개의 하이퍼링크된 목차들을 홈 화면으로 정리해놓으면 이는 웹사이트가 된다.
"HTML의 산 정상에 올랐으니, 다음 시간부터는 하산할 일만 남았다."
'Web > html & css' 카테고리의 다른 글
| 생활코딩 5일차 [21.01.13] (0) | 2021.01.13 |
|---|---|
| 생활코딩 4일차 [21.01.12] - CSS 시작 (0) | 2021.01.12 |
| 생활코딩 3일차 [21.01.06] (0) | 2021.01.06 |
| 생활코딩 공부 1일차 [21.01.04] - HTML (0) | 2021.01.04 |
| 0. 맛보기 [20.12.31] (0) | 2020.12.31 |