My favorite things
코린이의 생활코딩 WEB1 - 13~15 본문
13. 문서의 구조와 슈퍼스타들
문장을 완성하는 법을 마스터했다. → 페이지 → 책
HTML의 구조를 작성하는 방법과
정말 빈도수가 높은 태그들을 살펴보도록 하자
슈퍼스타를 살펴보는 시간
◼︎ WEB1이라는 것을 제목으로 하고 싶을 때
<title> WEB1 - html </title>
검색엔진과 같은 기계들은 title이란 정보를 책 표지와 같은 정보로써 사용됨
정보를 글씨로 작성하면 그대로 저장되는 것이 아님
컴퓨터는 모든 것을 0 아니면 1로 최종적으로 저장함
0과 1을 어떻게 저장할 것인지에 대한 여러 약속들이 존재하는데,
그 약속들 중 하나가 UTF-8
현재 우리가 작성한 이 파일은 UTF-8 이라는 방식으로 저장된 상태
그렇다면 우리가 작성한 이 파일을 웹브라우저가 열 때도
UTF-8로 열어야만 문제가 없음
우리가 웹브라우저에게
◼︎"웹브라우저야 이 웹페이지를 열 때는 UTF-8로 열으렴"
: <meta charset="utf-8">
*char : 문자
*set : 규칙
→ UTF-8로 문자를 읽어라
어떤 차이가 있을까?
아래 쪽의 코드는 본문
위 코드는 본문을 설명한다.
즉, <title>은 본문의 제목이 무엇인지 설명하고
<meta ~>는 이 본문이 UTF-8이라는 것으로 저장되어 있다는 것을 설명
◼︎ 본문은 <body></body>로 묶기로 약속을 함
☝🏻자연적인 것이 아닌 사람 사이의 약속임
◼︎ 본문을 설명하는 즉, body를 설명하는 tag는 <head></head>로 묶기로 약속함
HTML에 있는 모든 tag는 <body>와 <head> 둘 중 하나 아래에 놓이게 된다.
*고위직 tag
또한, 고위직 tag를 감싸는 단 하나의 최고위층 tag = <html></html>
그리고 <html>의 위에다 관용적으로
이 문서는 html이다. : <!doctype html>
그런 뒤 아무 웹 페이지에서 오른쪽 클릭을 하고 'View Page Souce' 해보면,
 |
 |
슈퍼스타 tag를 배움으로써 전 세계에 있는 거의 모든 웹 페이지들이 가지고 있는 구조를
파악하게 되었다..!
14. HTML 태그의 제왕
혁명적 순간은
1. tag라는 문법을 배운 순간
2. 지금부터 설명 들을 태그를 알게 된 순간
태그가 웹의 왕국이라면 이 왕국의 제왕
검색 엔진들은 이 태그 덕분에 전 세계의 웹을 항해하면서 웹페이지를 발견할 수 있고,
이 태그 덕분에 최고의 커멧결과를 만들 수 있었다.
이 태그는 무엇일까?
HyperText Markup Language : HyperText 가 바로 이 태그를 의미함
Anchor(닻)의 첫 글자를 딴 <a>
정보의 바다에 정박한다는 의미, 시적인 표현인 <a> 태그는 어떤 기능을 표현하는 걸까?
→ Link
사용설명서를 찾을 때는
검색어 : html specification*명세,설명서
HTML을 만드는 W3C라는 국제기구에서 만든 공식 설명서
링크를 걸고자 할 때는 <a>(걸고싶은곳)</a>
정보 부족으로 인해 링크는 안 걸린다, 따라서 주소를 복사하여
hyper text : h
웹브라우저야, 링크는 이 값을 참조해 라고 할 때 '참조'
: reference, 'ref'
<a href="https://www.w3.org/TR/2011/WD-html5-20110405/">
최종적으로 링크 <a>의 활용은
<a href="(원하는 링크주소)" target="_blank" title="(커서를 올렸을 때 알리고 싶은 정보)"
링크를 통해서 정보를 탐험하고 문제를 해결하고 있다면,
또 그 과정이 즐겁다면
여러분은 이미 공부를 좋아하고, 잘하고 있는 겁니다.
그 사실을 인정하셨으면 좋겠습니다.
15. 웹사이트 완성
우리가 만든 웹페이지를 엮어 하나의 완성된 웹사이트를 만들어 봅시다.
WEB → index.html 파일을 링크로 걸 예정
1. HTML → 1. html 우리가 만들었던 웹 페이지로 이동
2. CSS → 2. html
3. JavaScript → 3. html
1) WEB이라는 가장 큰 제목을 생성한다.
: <h1>WEB</h1>
2) 각각의 필요 링크를 걸어준다.
: <a href="">___</a>
3) 링크에 필요한 파일을 editor에서 생성한다.
4) CSS의 내용은 2.html
- 소제목을 CSS로 변경한다.
- 위키디피아 페이지에 가서 CSS에 대한 페이지를 가져온다.
- title을 <title>WEB1 - CSS</title>로 변경해준다.
5) 3.html을 JavaScrip 내용으로 변경
6) 홈페이지라고 할 수 있는 index.html 내용 변경하기
우리가 만든 걸 보면서 내가 이런 걸 했다니 즐거운 마음을 갖고, 하산 준비하기
'코린이의 생활코딩 > WEB1' 카테고리의 다른 글
| 코린이의 생활코딩 WEB1 - 16~18 (0) | 2022.10.27 |
|---|---|
| 코린이의 생활코딩 WEB Page 만들기 (0) | 2022.09.04 |
| 코린이의 생활코딩 WEB1 - 10~12 (0) | 2022.09.04 |
| 코린이의 생활코딩 WEB1 - 5 (0) | 2022.08.28 |
| 코린이의 생활코딩 WEB1 - 1~4 (1) | 2022.08.28 |
