HTML(HyperText Markup Language)
- 앞서 HTML, CSS, Javascripts에서 다루었듯이,
html은 웹에 담기는 콘텐츠를 보여주는, 틀을 만드는 역할을 하고 있습니다.
HTML을 영어 그대로 직역해보면, 아주 고도의 문서(hypertext)인데, Markup 언어로 이루어진 고도의 문서다, 라는 거죠.
마크업 언어란 마크(Mark) 혹은 태그(Tag)로 둘러싸인 언어라는 건데요.(태그: <>)
태그?
기실, html뿐만 아니라 대부분의 코딩에서 태그(tag)는 빼놓을 수 없는 부분입니다.
대부분의 언어는 태그에서 시작하여 태그에서 끝난다고 해도 과언이 아니죠.
또 태그는 시작태그(<h1>)가 있으면 종료태그(</h1>)가 있어야 합니다.
(몇 가지 태그는 닫는 태그 없이 존재하는 혼자서 존재하는 태그들도 있긴 합니다 - <br>)
예를 들어 <h1>이라는 태그가 있다면 </h1>이라는 닫는 태그가 필요합니다.
그리고 그 태그 속에 우리가 하고 싶은 내용을 적으면 하나의 코드가 완성됩니다.
<h1>hello world!</h1>
이렇게 적었던 코드를 vs코드에 입력하여 서버를 켜보면,
짠! 아주 잘 보이죠?
이때 우리가 쓰는 이런 태그들에는 각각 역할들이 있는데요.
우선 제가 방금 쓴 <h1>은 태그 안의 내용을 제목처럼 처리해주는 걸 의미해요.
우리가 블로그를 쓸 때 단어를 제목으로 처리하게 하면 좀 더 진한 글자로 표시되죠?
이처럼 h1은 "이 태그 안에 든 글자를 제목으로 처리하여 다른 글자보다 좀 더 강조해줘~"라는 의미를 가지고 있다고 볼 수 있죠. 그와 다르게 본문을 적을 때 사용하는 <p> 태그와 비교를 해본다면,
확연히 다르다는 것을 느끼실 수 있을 겁니다.
또 이때 h 태그는 h1~h6까지로 종류가 다양한데 각각은 제목을 처리한다는 점에서 같지만 그 크기가 달라요.
<h1>hello world</h1>
<h2>hello world</h2>
<h3>hello world</h3>
<h4>hello world</h4>
<h5>hello world</h5>
<h6>hello world</h6>
HTML 구성 요소 - 요소,태그,속성, 변수
태그에 대해서 이제 아시겠나요?
이제 요소,속성,변수에 대해서 알아보겠습니다.
(태그도 한번 더 요약해드립니다:>.)
html의 구성요소를 그림으로 간단하게 시각화하면 다음과 같습니다.
<태그 속성="변수"> ~ </태그>
요소(element)는 HTML에 있는 모든 명령어 및 영역을 의미합니다.
이는 내용을 포함하여 시작(여는) 태그에서 닫는 태그까지와
<br>과 같이 내용과 닫는태그가 없는 태그도 포함한 모든 명령어를 의미합니다.
이렇게 종료 태그가 없는 태그를 빈요소(empty element)라 합니다.
태그(tag)는 꺽쇠괄호(<>)로 둘러싸진 것으로 총 두가지 동류가 있습니다.
이 태그안에 우리가 표현하고 싶어하는 내용이 들어갑니다.
- 시작(여는)태그, 종료(닫는)태그
- 닫는 태그가 필요없는 태그
속성(Attribute)은 시작 태그 안에서 사용되어 지는 걸로, 좀 더 태그를 구체적으로 사용할 수 있게 해줍니다.
예를 들어 <p>에는 align이라는 속성이 있는데 이는 배열과 관계있는 속성입니다.
문단의 위치를 설정해주는 친구죠.
<p align="center">안녕 나는 지금 자료를 만들고 있지!</p>
변수(Arguments)는 속성과 관련된 값을 말합니다. 값은 쌍따옴표(" ") 혹은 외따옴표(' ')로 둘러싸여 사용하게 됩니다.
위에 예시에서 보자면, "center"가 변수입니다. "center" 뿐만 아니라 "right","left" 등과 같이 속성 align의 변수들을 사용할 수 있습니다. 이런 속성과 변수는 다 외우는 것이 아니라, 그때그때 인터넷에 찾아보며 사용하시면 됩니다:D.
<p align="right">안녕 나는 지금 자료를 만들고 있지!</p>
HTML "핵심" 태그 3가지
자, 이제 직접적으로 사용되는 html 문서의 태그에 대해 이야기해보겠습니다.
html문서는 기본적으로 head와 body로 구분이 되는데요.
저는 여기서 조금 더 나누어 세 가지가 있다고 표현해보겠습니다.
1. 우선 이 문서가 html로 작성된 문서라는 걸 알려주는 태그입니다.
<!DOCTYPE html><html></html>라는 태그들인데요.
<!DOCTYPE html>는 웹이 등장한 후 꾸준히 바꾸어진 html의 버전 중 html5 버전을 의미하는 코드입니다.
이 <html>안에 <head>와 <body>가 들어가게 됩니다.
2. 두번째는 화면에 직접적으로 등장하지는 않지만 문서를 설명해주는 태그인데요.
<head></head>가 이에 해당합니다.
예로 웹의 title 등을 들 수 있습니다. 이는 웹페이지의 이름을 의미합니다.
3. 직접적으로 화면에 등장하는 화면에 보이는 태그입니다.
<body><body>는 화면에 보이는 내용들을 담는 태그로,
아까 우리가 사용했던 <h1>, <p>등이 들어가게 됩니다.
화면에 보이는 태그들은 다 body 안에 넣어주시면 됩니다.
<html>, <head>, <body> 태그는 우리가 html을 만들 때 꼭!!! 넣고 시작해야 하는 태그입니다.
이때 문서에 등장하는 태그는 <h1>, <p> 뿐만 아니라 정말 많은 태그들이 있는데요.
우리는 이에 대해 다 알 필요는 없습니다.
그때그때 구글을 통해 찾아서 사용하면 되거든요.
예를 들어 "html 텍스트 태그"라고 입력하면 <h>,<p>를 비롯하여 수많은 태그들이 나올거에요.
실습
이제 여기까지 한 내용에 대해 실습도 해봐야겠죠?
자 빈 폴더를 하나 만든 다음, VS 코드를 열어주세요.
그리고 open folder를 통해 만들었던 빈 폴더를 열어줍니다.
그리고는 마우스를 만들었던 폴더에 가져다 대면
파일을 만들 수 있는 버튼을 확인하실 수 있습니다.
이때 만들 때 꼭 .html을 붙여주세요. 이는 이 문서가 html에 문서라는 걸 알려주는 역할을 합니다.
알려주어야 VS 코드가 html에 맞는 기능을 제공해줄 수 있겠죠?
자 그다음 화면에 보이는 태그를 붙여 아무 말이나 입력해주세요.
<h1>hello world!</h1>그 후 ALT+L을 누른 후, ALT+O를 누르시면 방금 우리가 입력한 글을 웹 브라우저에서 확인하실 수 있으실 거예요.
*이는 Live server라는 확장 프로그램을 설치해야 사용할 수 있습니다.
혹시 아직 설치하지 않으셨다면, 다음 주소에서 설치하실 수 있습니다.
https://free-eunb.tistory.com/6
01_VS code 확장프로그램 추천_Live server,Auto close tag,Indent-rainbow
안녕하세요!:D 설치를 했으니, 이제 편집기의 기능을 확실하게 사용하려면 몇 가지 확장 프로그램들을 설치해주어야 합니다. VS 코드에 들어가 좌측에 여러 이모티콘들을 볼 수 있죠? 그 중에서 네번째 있는 아이..
free-eunb.tistory.com
자 여기까지 웹 브라우저에 여러분의 코드가 나타나는 걸 확인하셨다면!!
이제는 정말 실습입니다.
아래의 구조를 그대로 가지고 가면서, 여러 태그들을 직접 사용해보면 되는데요.
참고로 아래의 구조는 vs코드에서 !+tap을 눌러주면 자동으로 설정을 해줍니다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>이와 관련한 실습 영상을 첨부할 테니, 보면서 따라 하시면 정말 도움이 많이 되실 것 같습니다:>!!
클래스라이언과 생황코딩 영상 중 하나를 선택해서 꼭 들어주세요!
멋사에서 제공하는 클래스 라이언 영상↓
https://www.youtube.com/watch?time_continue=541&v=ik4W_Rgz45U&feature=emb_title
https://www.youtube.com/watch?v=lCM1eJvjVHc&feature=emb_title
또 다른 영상은 생활코딩영상입니다.
클래스라이언보다 조금 더 풀어 설명해주어 이해하기 좀 더 쉬울 것 같습니다:).
다만 생활코딩은 여러 스토리들이 많아서, 필요 없는 내용을 많이 들으실 수 있습니다,,,
생활코딩 ↓(통계에 기반한 학습~웹사이트의 완성)
https://opentutorials.org/course/3084/18452
통계에 기반한 학습 - 생활코딩
--- 이번 시간에는 통계에 기반을 둬서 공부하는 방법에 대한 이야기를 해보겠습니다. 오늘날의 HTML은 약 150개가 넘는 태그가 존재합니다. 그럼 그 많은 태그를 다 외워야 할까요? 앞에서 우리가 살펴본 혁명적인 변화로 인해서 태그가 무엇인지를 알고 있다면 여러분은 모든 태그를 다 알고 있는 것과 다름없습니다. 1분이면 찾을 수 있거든요. 그런데도 여러분이 태그를 하나도 모르고 있다면 코딩하는 것이 너무 불편해요. 여기서는 여러분에게 통계를 보여드리면
opentutorials.org
'개발 > Web(html_css)' 카테고리의 다른 글
| 프론트엔드? 백엔드? 차이 (0) | 2020.04.22 |
|---|---|
| CSS선택자 및 이용하는 방법 -style 속성, 태그, 파일 분리하기 (0) | 2020.04.19 |
| HTML 기본 태그 정리 (0) | 2020.04.17 |
| 웹 기초) HTML,CSS,Javascripts개념과 차이 (0) | 2020.04.11 |
| 웹 기초) 웹, 웹서버란? - 클라이언트와 서버의 개념 (0) | 2020.04.05 |
댓글