프론트엔드 개발자 패캠 수강 후기

프론트엔드 개발자 패캠 수강 후기 - HTML?

2021. 3. 13. 12:25ㆍDev/프론트엔드

프론트엔드 개발자라면 반드시 알아야 하는 웹애플리케이션의 화면을 만들 수 있는 HTML 파일에 대해 알아보자.

우선 기본적인 index.html 파일을 만들어보자. 내가 사용하고 있는 텍스트에디터인 VS Code에서 index.html 파일을 생성한 후, ! 를 타이핑한 후 자동완성시키면 아래와 같은 코드가 자동으로 작성된다.

VS Code ?

마이크로소프트사에서 개발한 텍스트에디터 프로그램인 'Visual Studio Code' 의 약자이다.

일단 프로그램 차제가 가볍고, 수많은 라이브러리를 지원하고 있어서 현재 프론트엔드 개발자 및 백엔드 개발자를 막론하고 핫한 프로그램 중 하나이다. 한글 언어팩을 설치하면 각종 메뉴도 한글로 나오기 때문에 편하다.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

</body>

</html>

HTML(HyperText Markup Language)은 웹을 이루는 가장 기초적인 구성 요소이다.

"Hypertext(하이퍼텍스트)"란 웹 페이지를 다른 페이지로 연결하는 링크를 말한다.

HTML은 웹 브라우저에 표시되는 글, 이미지 등의 다양한 컨텐츠를 표시하기 위해 "마크업"을 사용하며, HTML 마크업은 <head>, <title>, <body>, <header>, <footer> 처럼, 수많은 "요소"를 사용한다.

이런 태그들은 HTML버전에 따라 사라지기도 하고 새로 추가되기도 한다. 따라서 프론트엔드 개발자는 이런 부분에 대한 지속적인 학습이 필요하다.

이제 html 파일의 각 요소별로 알아보자.

<!DOCTYPE html>

현재 문서의 타입과 html의 버전을 지정한다. HTML 버전 중에서 현재 웹표준은 HTML5이다.

HTML5 이전의 버전은 실제로 명시하지는 않는다. 즉, <!DOCTYPE html>이 현재 문서의 HTML버전이 HTML5라는 것을 명시해준다.

<!DOCTYPE html>

<html></html>

HTML문서의 시작과 끝을 지정하여 웹브라우에게 알려주는 역할을 담당한다.

<head></head>

해당 페이지의 제목(title), 설명(description), 설정값(meta)을 정의하고, 자바스크립트(script), CSS(link rel..) 등의 파일을 import하여 해당 페이지에서 사용하 수 있도록 각종 정보를 정의하는 용도이다.

특히 meta 태그로 지정할 수 있는 값은 여러가지가 있다. 캐릭터셋, 뷰포트 등..

<body></body>

사용자가 실제로 보는 화면을 구성하는 영역이다. 테이블, 버튼, 이미지 등의 각종 요소들이 전부 이 body 영역 안에 들어간다.

CSS 파일 연결

<link rel="stylesheet" href="./main.css">

html 파일에서 css파일을 연결하려면 위와 같은 link 태그를 사용하면 된다. href 속성에 원하는 css 파일의 상대경로를 지정하면 된다.

JS 파일 연결

<script src="./main.js"></script>

페이지의 동적 처리 or 데이터 처리/출력 등을 담당하는 JS파일은 프론트엔드 개발자들이 많이 다루게 된다.

html 파일에서 javascript 파일을 연결하려면 위와 같은 script src 태그를 사용하면 된다. src 속성에는 원하는 자바스크립트 파일의 상대경로를 지정하면 된다.

html의 기본적인 뼈대 구조는 위와 같다. 여기에 실제로 사용자들이 보게될 각종 요소들을 추가하고, CSS를 입히고, JS로 제어하는 것이다.

여담으로 HTML은 프로그래밍 언어일까? ㅎㅎㅎ

이에 대한 논쟁은 오래 전부터 계속 되어 왔지만, 결론적으로 프로그래밍 언어가 아니다. 마크업 언어이다.

이에 대해서는 구글링을 해보면 재미난 글을 많이 찾아볼 수 있다.

zetawiki.com/wiki/HTML%EC%9D%80_%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D_%EC%96%B8%EC%96%B4%EA%B0%80_%EC%95%84%EB%8B%99%EB%8B%88%EB%8B%A4

http://abit.ly/5lc7dz9

한 번에 끝내는 프론트엔드 개발 초격차 패키지 Online. | 패스트캠퍼스

시간당 1천원 대 수강료 한 번 결제로 평생소장 | 프론트엔드 공부, 뭐부터 시작해야 하지? 더 이상 고민하지 마세요! 프론트엔드 개발자가 꼭 다뤄야 할 스택 20가지 이상을 100시간 분량의 온라

www.fastcampus.co.kr

※ 추천 한마디

패스트캠퍼스 프론트엔드 개발자 초격차 패키지는 완전 기초가 되는 HTML, CSS 부터 각종 프론트엔드에서 사용되는 언어 등을 이용하여 실제로 웹사이트를 만드는 프로젝트까지 포함돼 있어 강의 구성이 정말 알찬 것 같다. 따라서 프론트엔드 프로젝트에 투입되었거나 스터디를 통해 프론트엔드 프로젝트를 진행 중인 분들 중에서 기초부터 실전 프로젝트까지 해보고 싶은 분들이 들으면 좋을 것 같다.

'Dev > 프론트엔드' 카테고리의 다른 글

프론트엔드 개발자 패캠 수강 후기 - 빈태그, 글자와 상자 (2)	2021.03.28
프론트엔드 개발자 프로젝트 패캠 수강 후기 - 브라우저 스타일 초기화 (0)	2021.03.28
프론트엔드 개발자 프로젝트 패캠 수강 후기 - 정보를 의미하는 태그 (0)	2021.03.20
프론트엔드 개발자 패캠 수강 후기 - 프론트엔트 개발자? (0)	2021.03.06

개발새발 개발자