2020.07.17일이 되어가는 저녁 11시 40분입니다. 제가 어제저녁에 쓴 글을 아침에 올린다는 것을 깜빡하고 저장만 하고 방금 막 올렸네요 ㅠㅠ. 오늘은 정말 피곤한 하루지만 그래도 기왕 하기로 한 거 빠짐없이 배우고 싶어서 오늘도 글을 남깁니다. 오늘 배울 내용들은 제목에서도 짐작이 가는 것처럼 HTML에서 가장 자주 쓰이는 태그들에 대해서 배우고 글을 남기려고 합니다. 지난 시간에 한 저장한 부분을 켜주세요!
현재 우리 웹페이지의 이름인 뭔가요? 1.html입니다. 그런데 이 이름을 다른 이름을 바꾸고 싶어요! 그럴때 쓰는 태그가 바로 <title>입니다. <title> 내용 </title>입니다. 저는 이름을 프링글스로 바꿔보겠습니다. 그럼 <title> pringles </title>을 적어주면 되겠죠? 한번 해보겠습니다.
노란색 칠한 곳 처럼 웹페이지 제목 자체가 바뀌는 것을 확인할 수 있습니다. 자 그럼 이번에는 FOOD라는 제목을 "프링글스는 스위트 마요가 맛있더라"로 바꿔보겠습니다. 즉 영어를 한글로 바꾸겠다는 의미입니다.
저처럼 <h1>프링글스는 스위트 마요가 맛있더라 </h1>으로 치시면 웹페이지에서 바로 한글로 나타나시는 분들도 계실 걸고 혹은 이상한 문자로 표시되는 분들도 계실 겁니다. 그러면 노랑 부분으로 쳐진 <meta charset="utf-8">을 쳐주시면 다음과 같이 한글이 그대로 나타나심을 볼 수 있습니다. charset은 문자 규칙을 뜻하며 utf-8로 읽어라 라는 뜻입니다.
그리고 우리는 1번 2번과 나머지 줄들을 분리하여 정리하였습니다. (14,15번줄은 지금은 떨어져 있지만 붙일 겁니다.) 위의 두줄은 본문을 설명하는 것들이고 나머지 밑에 글들은 본문을 나타냅니다. HTML을 정의한 사람들은 본문 <body>~</body>를 쓰자고 약속하였습니다. 그리고 그 본문을 설명해주는 부분은 <head>~</head>로 묶기로 약속하였습니다.
이렇게 <body>,<head>같은 태그는 상위 태그라 부르고 최상위 태그는 <html>~</html>이고 관용적으로 그 위에
<!doctype html>을 적어주시면 됩니다. 한번 실습해보겠습니다.
이런식으로이런 식으로 구조를 짜주었습니다. 물론 웹페이지에 직접적으로 변화한 것은 없지만 앞으로 우리가 Atom을 이용해서 코드를 짤 때는 이런 식으로 구조를 짜서 그 틀에 맞춰서 코드를 하면 된다는 뜻입니다. 실제로 대대분의 페이지의 첫 번째 코드는 <!doctype html> <html>로 시작함을 알 수 있을 겁니다. 아무 페이지의 페이지 소스보기 혹은 F12번을 눌러서 확인해보세요~ 오늘 배울 내용은 여기까지 입니다. 고생하셨습니다~
'웹개발' 카테고리의 다른 글
| 8강. 웹 사이트 완성하기 (0) | 2020.07.19 |
|---|---|
| 7강. 링크 태그 <a> 속성 href, title, target (0) | 2020.07.18 |
| 5강. 웹개발 목록 만들기<li>,<ol>,<ul> (0) | 2020.07.16 |
| 4강. 웹페이지에 사진 올리기<img> 태그 및 속성 (0) | 2020.07.15 |
| 3강.HTML 태그 <h1> , <br>(줄바꿈) (0) | 2020.07.14 |
