4일차 : 부모/자식 태그, 문서의 구조, 태그의 제왕
오늘은 태그에 대해 조금 더 깊이 알아보는 시간입니다!
1. 부모 태그 & 자식 태그
예시로 사용된 parent와 child 태그입니다. (실제로 이런 태그는 없어요ㅎㅎ)
이런식으로 하나의 태그 아래에 다른 태그가 있을 때
두 태그 사이에 부모/자식 관계가 생깁니다.
이렇게 위치에 따라 부모/자식의 관계가 형성되는데요.
필요에 따라서 관계는 달라질 수 있겠죠.
하지만 진짜 부모/자식 관계처럼 고정적으로 함께 쓰이는 태그들이 있습니다.
- 목록 태그 <li> 와 목록 간의 경계를 나타내주는 태그 <ul>, <ol>
(ul은 unordered list의 약자고, ol은 ordered list의 약자입니다.)
ul을 사용하면 앞에 번호가 나오지 않기 때문에, 넘버링이 필요하면 직접 번호를 넣어주어야 합니다.
ol을 사용하면 순서대로 번호를 매겨주기 때문에, 따로 번호를 넣을 필요가 없습니다.
첫번째 예시는 li만 사용한 것입니다.
li를 사용하면 목록을 나타내는 표시가 생기네요.
아래는 ul과 ol의 차이를 보여줍니다.
그냥 목록은 ul로, 숫자가 필요하면 ol을 써야겠죠!
2. 구조 만들기
지난번에 간단하게 만든 페이지에 제목도 넣어주고 본문도 넣어주고 구조를 만들어 주어야겠죠?
이러한 구조를 만들 때 쓰이는 태그들이 지난번 가장 많이 사용되는 태그 1~5위를 차지했습니다.
구조를 만들기 전에, 이 웹페이지는 HTML로 만들어졌다는 것을 표현하려면 <!doctype himl>을 추가해야 합니다.
- HTML 문서의 루트 요소를 정의하는 태그 : <html>
HTML로 만들어진 문서는 html 태그로 전체를 감싸줘야 합니다.
html 태그의 사용률이 100%인 이유도 바로 여기에 있습니다.
- 문서의 머리를 나타내는 태그 : <head>
<head>태그는 해당 문서에 대한 정보인 메타데이터 집합을 정의할 때 사용된다고 합니다.
브라우저 화면에 직접적으로 보이지 않으며, 숨은 데이터를 정의하는 태그들이 들어옵니다.
head에 포함되는 요소들로 title, style, link, meta, script 등이 있습니다.
- 웹사이트 제목을 설정하는 태그 : <title>
지난번 만든 웹사이트 제목을 설정해 봤습니다.
* 제목이 깨지는 경우, meta태그를 이용해 웹브라우저에게 문자 표현 방식을 알려줘야합니다!
<meta charset="utf-8">
(문자 표현 방식은 에디터 하단에서 찾을 수 있어요)
- 본문을 적는 태그 : <body>
본문에는 오늘 배운 내용을 정리해서 모두 넣어봤습니다.
뭔가 엄청 복잡해 보였는데.. 간단한 걸 표현하는 것도 쉽지가 않네요ㅠㅎ
그래도 혁명적인 것을 알게 되었다고 축하한다고 하네요..ㅎㅎ (이 맛에 생활코딩에서 공부함)
3. 태그의 제왕(a 태그)
HTML에는 150여개의 태그가 있다고 했는데요.
많은 태그들 중 제왕이 있으니, 그것은 바로 a 태그 입니다.
a태그는 하이퍼링크를 만드는 태그입니다.
생각해보니까 HTML이 무엇의 약자인지도 아직 알아보지 않은 것 같네요;ㅎ
HTML은 HyperText Markup Languague의 약자입니다.
여기서 HyperText가 a 태그를 의미합니다.
a는 닻이라는 의미의 anchor의 첫글자에서 따왔습니다.
웹은 거미줄처럼 연결되어 있는 것인데, a태그가 없다면 웹을 만들 수 없겠죠.
우리가 항상 쓰는 검색엔진도 사용할 수 없구요.
그렇기 때문에 많은 태그들 중 a태그가 태그의 제왕이 된 것입니다.
오늘도 중요한 내용들을 알기 쉽게 배워보았습니다.
학습 내용이 조금씩이지만 심화되는 것을 느낄 수 있었어요.
다음 시간에는 웹사이트를 완성해 봅시다!
'WEB > HTML&INTERNET' 카테고리의 다른 글
| 6일차 : 원시웹, 인터넷과 웹, 서버와 클라이언트 (0) | 2021.12.06 |
|---|---|
| 5일차 : 웹사이트 완성 (0) | 2021.12.02 |
| 3일차 : 줄바꿈, HTML이 중요한 이유, 속성과 img (0) | 2021.11.26 |
| 2일차 : 기본 문법 태그/W3C/통계에 기반한 학습 (0) | 2021.11.24 |
| 1일차 : 수업소개부터 실습환경 준비까지 (0) | 2021.11.24 |
