[코딩야학] 4일차 정리
4일차 진도는 부모 자식과 목록부터 HTML 태그의 제왕까지이다.
부모 자식과 목록
: 태그 간의 관계를 나타는 표현. 필요에 따라 관계가 달라질 수 있다.
BUT, 몇몇 태그는 고정된 관계인 태그가 있다. Ex.<ul><li>
<li> 태그
대표적인 태그인 <li> 태그는 목록을 만들어 주는 list 태그이다.
<ul> 태그 : unordered list
li 태그를 쓰면 목록을 만들어주지만 여러 개의 목록이 필요할 때, 구분이 안된다는 단점이 있다.
목록을 다른 목록과 구분할 수 있게 해주는 태그가 <ul>태그이다.
ul 태그와 li 태그는 서로가 반드시 필요한 관계이므로 고정적인 부모자식 관계이다.
<ol> 태그 : Ordered list
목록이 3-4개가 아니라 엄청 많다면?
많은 목록 중에서 하나를 삭제한 후에 번호를 수정해야 한다면?
많은 시간이 필요하다.
이런 비효율을 효율적으로 바꿔주는 태그가 ol 태그이다.
문서의 구조와 슈퍼스타들
문장 <<< 페이지 <<< 책
코드 <<< 웹페이지 <<< 웹사이트
정보가 많아짐에 따라 정보를 정리정돈하기 위한 체계, 즉 구조가 필요하다.
<title> 태그 : 웹페이지 제목을 지정해주는 태그
만든 웹페이지에 tile을 달지 않으면 파일명이 제목이 된다.
제목을 달아서 페이지 제목을 이쁘게 바꿔주자.
title 태그는 검색엔진이 웹페이지를 분석할 때 가장 중요하게 생각하는 태그이므로 꼭 사용하는 것이 좋다.
<meta> 태그 : 웹 서버와 웹 브라우저간 상호 교환되는 정보를 정의하는 태그
디자인에는 영향을 미치지 않고, 문서의 내용, 키워드, 작성자, 언어체계 등 문서 자체의 특성을 담고 있다.
예로 언어체계를 보면 영어가 아닌 문자로 웹페이지를 만들면 문자가 깨지는 경우가 있다.
editor의 하단을 보면
웹페이지의 언어체계 방식이 UTF-8 방식으로 저장되어 있는 것을 확인 할 수 있다.
웹페이지가 UTF-8로 저장되었다면 웹페이지를 열 때도 UTF-8 방식으로 해석해서 열어야한다.
이 해석방식이 일치하지 않을 때, 문자가 깨지는 것이다.
문자가 깨지지 않게 열어주기 위해 정보를 정의하는 태그인 meta 태그를 사용해서 방식을 지정해주는 것이다.
<head> 태그 : 본문을 설명하는 태그를 감싸는 태그
<body> 태그 : 본문을 감싸는 태그
<html> 태그 : <head>태그와 <body>태그를 감싸는 태그
<!doctype html> : 해당 웹페이지가 HTML로 만들어졌다는 것을 표현하는 코드
<title>WEB1 - HTML</title>
<meta charset="utf-8"><title>태그와 <meta> 태그는 본문에 해당하는 것이 아닌 본문을 설명하는 정보로 본문 밖에서 다른 태그로 분리하여 정리해야 한다.
본문은 <body>태그로
본문을 설명하는 태그는 <head>태그로 정리한다.
웹페이지의 구조 완성!
HTML 태그의 제왕
매일 백 번 넘게 사용하는 기능을 표현하는 태그!
HyperText Markup Language(HTML)의 HyperText가 의미하는 태그!
닻을 의미하는 anchor의 첫글자 a!
<a> 태그 : 링크(link)를 의미하는 태그
HTML의 공식 사용설명서 페이지를 링크를 걸어보자.
HTML Standard
html.spec.whatwg.org
target="_blank" : 새창에서 페이지 열기 속성
title="html5specification" : 링크가 어떤 내용을 담고 있는지를 툴팁으로 보여주는 속성
4일차 정리 끝!