안녕하세요 인포돈 입니다.
이번 시간부터는 본격적은 HTML에 대해서 알아볼 수 있는 기회입니다.
HTML 관련 자료를 찾아보던 중 '생활코딩'이라는 분의 영상을 보게 되었는데, 보다 쉽고 재미있게 가르쳐 주시더라고요.
그분의 강의를 따라가면 보다 쉽게 이번 프로젝트를 완성시킬 수 있다는 생각이 들어서 바로 실행에 옮겼습니다.
해당 개발 환경을 따라 구축한 뒤 하루 만에 HTML의 전반적인 내용을 다 훑어보았습니다! 그 내용을 토대로 이번 학습을 진행해보겠습니다.
내용은 방대하지만 현재 우리 HTML로 만드는 홈페이지 프로젝트에 적합한 내용만 추려보았습니다!
* Atom 이외의 개발 환경을 구축하고 싶으신 분들은 'best html editor 2021' 이런 식의 검색을 통해서 가장 최신 에디터들을 접해보실 수 있습니다~! 개인 기호에 맞게 개발 환경을 구축해도 큰 상관이 없습니다!
다만, 코딩을 처음 접해보시고 아직 잘 모르시는 분들을 위해서 Atom이라는 개발 환경을 추천해 보았습니다
바로 본론으로 들어가 중요 내용들을 짚어보면서 필요한 정보들을 학습해보죠
HTML에서 사용하는 문법을 바로 '태그' 또는 TAG라고 부릅니다.
태그는 해당 <> 기호로 표현하게 되고요. 이러한 태그를 통해 그림을 넣고 글씨 크기를 바꾸며 굵은 글씨체, 제목 등을 표현할 수 있게 해주는 문법입니다.
그러면 이러한 태그들은 무엇이 있는지 알아보도록 하죠
아래 그림은 현재 웹사이트 상에 있는 HTML 태그의 빈도수를 나타냅니다. 이중의 대부분의 태그를 알아볼 수 있었습니다. 하나하나 차근차근 배워 보도록 해요
태그의 종류와 사용법
1. strong
<strong> hello web </strong>strong 태그는 해당 태그 사이에 있는 문자를 굵은 글씨체로 강조해 주는 기능을 한다.
2. u
<u> hello web </u>u 태그는 해당 태그 사이에 있는 문자에 밑줄을 그어 주는 기능을 한다.
3. h1 ~ h6
<h1> hello web </h1>h1 ~ h6 태그의 경우 제목을 나타내는 글씨를 보여준다
*h 태그의 경우 네이버, 구글과 같은 검색엔진에서 우선시 검색되는 내용이다.
쉽게 풀어서 설명해보면 '웹'이라고 검색을 했으면 <h1> 웹 </h1>으로 되어있는 글과 그냥 본문에 있는 '웹'이라고 있는 두 가지 글이 있다면 <h1> 태그로 둘러싸여 있는 글을 더욱 상위에 노출시켜준다는 의미이다.
4. br
hello web <br>br태그는 다른 태그와 다르게 '/'의 기호가 있지 않으니 유의해서 볼 필요가 있다. 해당 태그는 Enter의 기능을 수행한다. 즉, 한 줄을 띄어쓰기 해준다.
5. p
<p> hello web </p>p태그의 경우 br로 대체할 수 있지만 보다 가독성을 높이기 위해서 문단을 나누는 역할을 하는 태그이다. 문단을 나눌 때는 이 p태그를 이용하는 게 유용하다고 한다.
6. img
<img src="사진 주소">img태그는 img를 넣을 수 있게 도와주는 태그이다. 해당 "사진 주소"에 그림을 넣을 주소를 넣으면 된다. img태그의 사용 방법은 아래 예시를 보여줄 수 있다.
여기에 있는! DOCTYPE html, html, head, body 태그들은 아래에 설명 10번을 참고 바랍니다.
7. li, ol, ul
<ul>
<li> 1. html </li>
<li> 2. css </li>
<li> 3. javascript </li>
</ul><ol>
<li> html </li>
<li> css </li>
<li> javascript </li>
</ol>해당 li, ol, ul 태그는 목록을 나타내기 위한 태그이다. li는 list의 약자로 목록을 의미하고, 목록 하나에 하나씩 묶어줘야 한다. 여기서 ol은 ordered list, ul은 unordered list의 약자이다. 이름에서부터 알 수 있듯이 ol은 순서를 나타낸 준다. 해당 두 코드는 모드 1. 2. 3. 의 번호가 모두 매겨지게 된다. 여기서 따로 번호 지정을 써주거나 ol태그를 사용하지 않으면 반점이 생성돼 목록의 나타낸다.
8. title
<title> hello web </title>title 태그는 브라우저를 열었을 경우 위에 나오는 글을 의미한다. 예시는 아래 그림과 같다.
9. meta
<meta charset="utf-8">meta태그에 대해서 깊숙이 파악하지는 못했지만, 위 코드는 해당 파일을 열 때 utf-8 방식으로 열라는 의미이다.
10. head, body, html, doctype html
<!doctype html>
<html>
<head>
</head>
<body>
</body>
</html>
해당 태그들은 html을 만든 사람이 지정한 문법들이다. 웹 사이트사 거의 대부분의 사이트들의 html 코드를 보면 모두 가지고 있다. 특별한 기능을 하기보다는 가독성을 높이기 위해 사용된다.
쉽게 구분하는 것 <head> 태그 사이에는 내부적으로 기능하는 코드 <body> 태그 사이에는 사용자에게 보이는 기능을 하는 코드로 구분 지을 수 있다.
11. a
<a href="링크 주소"> hello web </a>a태그는 링크를 거는 주소이다. 우리가 편의상 엑셀, 한글에서 많이 볼 수 있는 하이퍼링크 기능이다. 해당 태그 사이에 있는 단어를 클릭하게 되면 "링크 주소"로 이동하게 해 준다.
태그에는 속성이라는 기능도 있습니다. 위에 보시면 img에서 src라는 글자가 보일 겁니다. 여기서 src는 img의 속성이라고 볼 수 있습니다. 이러한 속성은 태그 하나만으로 기능을 모두 서술하지 못하기 때문에 생겨난 기능입니다!! 해당 태그에는 수십 개의 속성이 있고 이는 각자가 필요할 때 검색을 통해서 하나씩 찾아볼 수 있죠. 대표적인 속성 몇 개만 살펴보겠습니다.
<a href="링크 주소" target="_blank" title="welcome web"> hello web </a>a태그에서 target이라는 속성에 "-blank"라는 값을 넣으면 해당 링크를 눌렀을 때 새로운 탭으로 링크 주소를 뜨게 하는 기능입니다. title이라는 속성은 해당 링크에 마우스를 가져다 놓으면 메모 기능처럼 해당 문자 "welcome web"이라는 메모를 띄어줍니다.
이처럼 속성은 하나의 태그에 여러 개가 있으며 각자 기호에 맞게 넣으시면 됩니다. 또한 속성을 구분하는 것은 바로 space bar입니다! 공백이죠
필요한 속성이 있을 때 'html a tag property'이런 식으로 검색을 하면 원하는 답들을 얻을 실 수 있습니다.
자 이제 거의 다 왔습니다. 태그와 속성을 배웠다면 html의 전부를 배웠다고 볼 수 있죠. 물론 더 많은 태그와 속성이 있겠지만, 앞서 태그 랭킹에서 봤듯이 빈도수가 높은 태그들은 거의 다 배웠다고 볼 수 있습니다.
따라서 이제 저희는 모르는 태그, 속성이 있을 경우 검색을 통해서 해당 문제를 하나하나 해결해 나갈 수 있다는 자신감이 생겼을 겁니다.
이제 저희가 배운 것들을 1. html 파일에 하나씩 적어보면서 웹페이지의 변화를 직접 눈으로 확인해 보셔야 됩니다.
이론과 실습은 언제나 다르기 때문입니다.
마무리
여기까지 달려오셨다면 이제 html의 전부를 다 배웠다고 보셔도 충분합니다!! 모두들 고생하셨습니다.
고생의 대가로 쉬어가는 재미난 것들을 소개해 줄까 합니다.
가장 최초의 웹이 무엇인지 아시나요?? 조금 관심 있으신 분들이 이미 아시겠지만 최초의 웹은 바로 팀 버너스 리가 만든 웹인데요. 해당 링크를 들어가시거나 주소에 타이핑을 치시면 됩니다.
info.cern.ch
http://info.cern.ch - home of the first website
From here you can:
- Browse the first website
- Browse the first website using the line-mode browser simulator
- Learn about the birth of the web
- Learn about CERN, the physics laboratory where the web was born
이곳이 바로 웹의 원천 바로 세계 최초의 웹이 만들어진 주소입니다. 신기하지 않나요?
이렇게 저희는 엔지니어로써 한 걸음 더 다가가게 되었다고 볼 수 있습니다.
사실상 html은 정말로 쉬운 컴퓨터 언어이기 때문에 이렇게 간단히 html에 대해서 다 훑어볼 수 있었는데요.
좀 더 자세히 공부하고 학습하고 싶으신 분들은 해당 링크를 타고 들어가셔서 강의를 보시면서 진행해 보시는 것도 추천드립니다 ~
'토이 프로젝트 > HTML로만드는 홈페이지' 카테고리의 다른 글
| HTML로 만드는 홈페이지, 누구든 쉽고 빠르고 간단하게 - 6(CSS) (0) | 2021.03.05 |
|---|---|
| HTML로 만드는 홈페이지, 누구든 쉽고 빠르고 간단하게 - 5(CSS) (0) | 2021.03.04 |
| HTML로 만드는 홈페이지, 누구든 쉽고 빠르고 간단하게 - 4(CSS) (0) | 2021.03.03 |
| HTML로 만드는 홈페이지, 누구든 쉽고 빠르고 간단하게 - 2(개발환경구축,atom) (0) | 2021.03.02 |
| HTML로 만드는 홈페이지, 누구든 쉽고 빠르고 간단하게 - 1(계획) (0) | 2021.02.16 |
