HTML, CSS, Javascript는 웹사이트 프론트엔드(눈에 보이는 부분)를 만들기 위해 사용되는 컴퓨터 언어이다. 간단하게 살펴자면 HTML은 컨텐츠의 구조와 내용을 나타내기 위해 사용하고, CSS는 컨텐츠가 어떻게 보일지를 나타내기 위해 사용하고, javascript는 브라우저가 사용자와 상호 작용하기 위해 사용한다. 본 포스팅에서는 HTML에 대해서 좀 더 자세히 정리해보고자 한다.
| HTML | CSS | javascript |
| 컨텐츠가 어떻게 구성되어있는 지를 나타내기 위해 사용 (구조적 측면) | 컨텐츠가 어떻게 보일 지를 나타내기 위해 사용 (디자인적 측면) | 컨텐츠가 사용자와 상호작용할 수 있도록 하기 위해 사용 |
| e.g. 내용을 제목, 내용, 헤더, 푸터, 내용, 사이드 바 등으로 구분 | e.g. 레이아웃, 폰트 색, 배경색, 경계선 두께, 폰트 스타일 등 적용 | e.g. 버튼을 클릭했을 때 내용을 사라지게 하기 등 |
태그란 ?
❓ 모든 html 문서는 태그로 이루어져 있다. 태그는 무엇이고 왜 필요한 것일까?
기본적으로 html문서는 text 이다. text들을 분류하기 위해 사용하는 것이 태그이다. 쉽게 생각하면 옷에 가격 tag을 붙여서 옷에 대한 정보(가격, 품번 등)를 나타내듯, 텍스트에 tag를 붙여서 이 부분은 제목, 이 부분은 하이퍼링크, 이 부분은 이미지... 이렇게 분류를 한다고 이해하면 된다.
태그는 < > 표시 사이에 나타내고, 대부분의 태그는 < > 여는 태그와 </ > 닫는 태그로 나타내지만, 일부 태그는 self-closing tag, 즉 스스로 닫는 태그로 < /> 하나의 태그만 사용할 수 있다.
예시를 보자. html 파일 내에 www.stay-present.tistory.com 이라고 적어놓고 저장한 후 파일을 열면 해당 주소로 이동할까?
정답은 보시다시피 아니다. 브라우저 입장에서 이는 www.stary-present.tistory.com 이라는 텍스트 일 뿐이다. 그렇기 때문에 이 주소가 '하이퍼링크' 라는 것을 브라우저에게 알려줄 수 있는 태그가 필요한 것이고, 이 역할을 하는 태그가 바로 <a> 태그이다. (태그의 사용 방법은 별도의 포스팅에서.. 여기선 태그에 대해 이해하기에 집중하도록 하자) <a> 태그로 www.stay-present.tistory.com 를 열고 닫은 후 다시 해당 파일을 열어보도록 하자.
<a href="https://stay-present.tistory.com"> www.stay-present.tistory.com</a>
이번에는 하이퍼링크의 형태로 나타났다. 클릭해보면 a 태그에 입력한 주소의 블로그로 이동한다 !
태그의 속성
일부 태그는 태그만 가지고도 모든 정보를 표현할 수 있지만, 일부 태그는 태그 자체만으로는 원하는 기능을 수행하지 못한다. 바로 위에 예시로 든 <a> 태그의 경우에도 <a> 태그만 가지고는 하이퍼링크 라는 사실은 전달할 수 있지만, 어떤 주소로 이동할 하이퍼링크인지는 전달하지 못한다. 따라서 <a href="https://stay-present.tistory.com"> 과 같이 어느 주소로 이동할지에 대한 부가 정보를 더해주게 되는데 이 href="" 부분이 바로 속성, attribute 이다.
당연히 태그마다 해당 태그에서 요구하는 정보들이 다르기 때문에 사용되는 속성이 다르다. <a> 태그의 경우 하이퍼링크를 나타내는 태그이기 때문에 링크의 주소를 나타내는 href 속성이 사용되고, 이미지를 나타내는 <img> 태그의 경우 이미지의 주소를 나타내는 src 속성이 사용된다. 속성은 여는 태그에 사용하고, 태그이름 다음 한 칸을 띄고 입력하면 된다. 아래 코드를 참고할 수 있는데 img 뒤에 한 칸을 띄고 src=""와 같이 이미지의 주소를 입력하였다.
<img src="https://cdn.pixabay.com/photo/2022/03/06/05/30/clouds-7050884__480.jpg"/>
모든 태그를 다 알아야 할까?
이와 같이 html 파일에는 텍스트에 의미를 부여하고 분류하는 많은 태그들이 있다. 약 140여개의 html 태그가 존재하는데 이 모든 태그를 다 외우고 알아야 하지는 않는다. 웹사이트에 평균적으로 사용되는 html 태그 수의 통계를 보면 웹사이트들은 평균적으로 약 32개 정도의 태그를 사용하고 있다. 많이 알수록 당연히 좋겠지만 모든 걸 알려고 하기 보다는 공부할 수 있는 시간이 한정되있는 상황에서는 많이 사용되고 중요한 태그들에 집중해서 공부해 나가면 된다.
html 파일 생성하기
html 파일을 만들려면 확장자가 html 인 파일을 생성하면 된다 (e.g. hello.html) 편집기(필자는 visual studio code를 사용)를 사용한다면 원하는 폴더를 열어 .html 로 끝나는 파일을 생성하면 된다! 이때 주의할 점은 파일명은 모두 '소문자'여야 한다는 것!
vsCode 기준으로 생성하는 방법을 간단히 기록하자면, 원하는 폴더를 열고 (나는 blog 라는 폴더를 만들어서 열었다) 파일 추가 버튼을 클릭하고 나서 파일명 뒤에 .html을 붙여 엔터를 치면 html 파일이 생성된다.
html 문서의 구조
html 문서를 작성하려면 html 문서의 구조를 알아야 한다. 기본적으로 html 문서는 공통적으로 아래의 구조를 가지고 있다. 한 줄씩 조금 더 상세하게 살펴보도록 하자. (vsCode를 쓰고 있다면 !를 누르고 엔터를 치면 기본 구조가 자동으로 완성되지만 👍 구조가 익숙해질 때까지는 하나씩 쳐보는 것을 추천한다. )
<!DOCTYPE html>
<html>
<head> </head>
<body> </body>
</html>
<!DOCTYPE html>
<html>
html 문서의 시작과 끝을 표시하는 태그이다. 즉 모든 html 문서의 내용은 <html> 여는 태그와 </html> 닫는 태그 사이에 입력한다. html 태그는 lang 속성을 통해 문서(웹페이지)의 주요 언어를 표시할 수 있다. (아래 코드 참고)
<html lang="en">
...
</html><head> </head>
html 문서에 대한 주요 정보들을 웹브라우저나, 검색 엔진에게 알려주기 위해서 사용된다. <head>와 </head> 사이에 입력하는 정보들은 웹페이지에 보이지 않는다. 중요하지만 보이지 않는 정보들을 head 태그 내에 작성하게 된다. 브라우저 탭에 나타나는 제목 및 아이콘 (favicon) 이 head 태그 내에 작성되는 예시 중 하나이다.
<body> </body>
head 태그가 보이지 않는 것들을 설정하는 곳이라면 body 태그는 눈에 보이는 것들을 입력하는 공간이다. 웹페이지에 실질적으로 나타낼 모든 내용은 body 태그 내에 쓴다.
Reference
코코아톡 클론코딩 – 노마드 코더 Nomad Coders
HTML, CSS, Github
nomadcoders.co
https://opentutorials.org/course/3084/18452
통계에 기반한 학습 - 생활코딩
--- 이번 시간에는 통계에 기반을 둬서 공부하는 방법에 대한 이야기를 해보겠습니다. 오늘날의 HTML은 약 150개가 넘는 태그가 존재합니다. 그럼 그 많은 태그를 다 외워야 할까요? 앞에서 우리가
opentutorials.org
https://www.advancedwebranking.com/seo/html-study/#fag
HTML Study
Overview This HTML usage data comes from 11.3 million index pages gathered from top twenty Google results, for about 30 million keywords - chosen by keyword volume. To learn more about this data, visit the FAQ section. Total 11,264,652 pages Doctype The
www.advancedwebranking.com
'Frontend > HTML' 카테고리의 다른 글
| [html] 브라우저 탭 아이콘 설정하는 방법 (a.k.a. favicon) (0) | 2022.03.08 |
|---|---|
| HTML (0) | 2022.02.26 |
댓글