2022-01-05
부모 자식과 목록 / 문서의 구조와 슈퍼스타들 / HTML 태그의 제왕 / 웹사이트 완성
1. 속해 있는 태그들
<parent>
<child></child>
</parent><!-- 예시 -->
<p>
<a href="https://opentutorials.org">opentutorials</a>
</p>parent 태그에 대해서 child 태그를 자식태그라고 부른다. 이처럼 한 태그에 대해 속해 있는 태그들이 있다.
<ul>
<li>1.금호</li>
<li>2.은하</li>
<li>3.동해</li>
<li>4.마요</li>
</ul><li> 태그는 <ul>태그를 꼭 필요로 한다. 목차는 영어로 list이고, 리스트를 만드는 태그는 <li>이다.
그런데 누군가가 와서, 2.은하를 빼라고 한다.
그럼 우리는 중간에 끼여있는 2.은하를 빼고 다시 숫자를 붙여야 하는 상황이 되는데, 이럴 경우를 위해 <ol>이 존재한다.
<ol> 정의와 쓰임새
- <ol> 태그는 순서가 있는 리스트를 정의한다. 순서가 있는 리스트는 숫자나 알파벳일 수 있다.
- <li> 태그는 각각의 항목 리스트에 사용 된다.
- Tip: 리스트 스타일을 적용하려면 CSS를 사용한다.
- Tip: 순서가 없는 리스트는 <ul> 태그를 사용한다.
항상 극단적인 상황을 예상하며 코딩이 왜 이렇게 만들어졌을까 공감하며 탐구하자!
2. 그럼 HTML의 슈퍼스타들은 뭘까?
<head>와 <body>는 본문을 구분시켜주는 태그이다.
<body>는 본문을 뜻하는 것이고, <head>는 <body>에 대한 설명이 적혀진다.
그리고, 이 둘 위에는 더 상위 개념이 있는데 이 문서가 html이라는 걸 나타내기 위해
제일 상단에 <!docutype html>을 적어준다.
<!docutype html>
<html>
<head>
<title>WEB1 - html</title>
<meta charest=”UTF-8”>
</head>
<body>
<h1><a href = "index.html">WEB</a></h1>
<ol>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
</body>컴퓨터는 0과 1로 정보를 저장하는데, 그 방법은 여러가지가 있다.
가끔 웹페이지에서 한글이 깨지는 경우가 있는데, 이런 경우가 바로 잘못된 방법으로 읽혔을 때이다.
이걸 방지하기 위해 컴퓨터에게 우리가 어떤 방법을 사용했는지 알려줘야 하는데,
<head> 부분에 적혀있는 <meta charest=”UTF-8”>가 이것이다.
그럼 <title>은 뭘까?
<title>WEB1 - html</title>타이틀은 말 그대로 '타이틀'을 뜻하는 것인데,
이것은 검색엔진에서 <title>을 이용해 분류하기 때문에 안 쓰면 우리만 손해이니 꼭 쓰도록 하자.
3. 태그의 제왕
우리가 여태 배운 것이 태그의 왕국이었다면, 이번에 배울 태그는 왕국의 제왕이라 볼 수 있다.
이 태그가 있기 때문에 웹페이지를 발견하고, 검색결과를 만들 수 있는데
HTML의 약자 HyperTextMarkupLanguage의 HyperText가 바로 이 태그를 의미한다.
<a>이 태그의 이름은 <a> 닻anchor. 을 의미하며, 링크 기능이 있다.
<a> 정의와 쓰임새
<a> 태그는 한 페이지에서 다른 페이지로 이동할 수 있는 하이퍼 링크를 뜻한다
<a> 태그의 가장 중요한 요소는 링크의 목적지를 나타내는 href 속성이다.
기본적으로 브라우저에서는 다음과 같이 나타난다
- 방문하지 않은 링크는 밑줄이 그어져 있고 파란색이다.
- 방문한 링크는 밑줄이 그어져 있고 보라색이다.
- 활성 링크는 밑줄이 그어져 있고 빨간색이다.
- Tip: 만약, <a> 태그가 <href> 속성이 없다면, 그것은 하이퍼링크의 플레이스홀더일 뿐이다.
- Tip: 유효한 다른 페이지가 지정된 것이 아니라면, 현재 브라우저를 노출시킨다.
- Tip: 스타일을 변경하려면 CSS Links나 CSS Button을 사용해야한다.
오늘은 부트캠프 대비 겸 맥북에어 M1을 구매하였다! 열심히 해야지!
'🔗 HTML & CSS' 카테고리의 다른 글
| 생활코딩 WEB2 - CSS (3) (0) | 2022.01.11 |
|---|---|
| 생활코딩 WEB2 - CSS (2) (0) | 2022.01.10 |
| 생활코딩 WEB2 - CSS (1) (0) | 2022.01.09 |
| 생활코딩 WEB1 - HTML & Internet (2) (0) | 2022.01.04 |
| 생활코딩 WEB1 - HTML & Internet (1) (0) | 2022.01.04 |
댓글