웹 언어 HTML 기본 구조 및 개발, 프론트앤드 | 백앤드 #3

jeahyun

·

지난 글에서는 코딩 프로그램인 비쥬얼 스튜디오 코드 설치 및 기본세팅에 대한 내용을 정리했었다.

그리고 이번 글에서는 본격적으로 대표적인 웹 언어에 해당하는 HTML에 대해서 알아보려 한다.

우선 웹 사이트 개발은 기본적으로 두 가지 파트로 구성되어 있으며, 그것은 각각 프론트앤드백앤드로 구분을 짓는다.


웹 사이트 개발(프론트앤드 | 백앤드)

웹 언어 HTML

앞서 설명한 것과 같이, 웹사이트 개발은 기본적으로 프론트(front)백(back)으로 구분된다. 요즘은 풀스택 개발자라고 해서 두 가지를 모두 다루는 강의들도 많은데, 사실 실제 풀스택 개발자들은 극히 드문 케이스에 해당한다.

따라서 현실적으로 보았을 때 풀스택 개발자라는 것은, 결국 백앤드 90% 프론트앤드10% 정도로 구분 짓는 것이 더욱 정확하며 말이 풀스택이지 그냥 백앤드 개발자로 분류하는 것이 맞다.

풀스택 개발자가 극히 드문 케이스에 해당하는 이유는, 개개인의 역량도 역량이지만 이 두 가지를 혼자서 처리하는 것은 물리적으로도 한계가 있으며 전혀 효율적이지 못하기 때문이다.

프론트앤드백앤드
사용자들에게 보이는 최종 화면에 필요한 것들을 개발사용자들이 볼 수 없는 언어로 서버 측에서 작동하며, 데이터베이스 개발 및 관리
HTML
CSS
Javascript
PHP, JSP, ASP : 서버측 스크립트 언어
Node.js : 모바일과 웹사이트의 백엔드 서비스를 개발
Javascript : 프론트앤드 및 백앤드 스크립트 둘 다 개발 가능
JAVA, Python

위의 표와 같이 프론트앤드 영역은 주로 사용자들의 눈에 직접적으로 노출되는 영역을 다루는 것이며, 백앤드 영역은 회원가입이나 결제 시스템과 같이 뒤에서 보이지 않은 영역을 다루는 것이라고 볼 수 있다.

그리고 각각 사용하는 프로그래밍 언어에도 차이가 있는데, 자바 스크립트(Java Script)와 같은 경우는 프론트앤드와 백앤드 언어를 모두 다룰 수가 있다.

자바 스크립트 입문자들은 보통 이클립스(Eclips)라고 부르는 통합개발환경 소프트웨어 프로그램을 활용하여 코드를 짜고 연습하는 것이 일반적인데, 이클립스에 대해 궁금한 사람들은 아래 글을 참고해보면 도움이 될 것이다.

자바(JAVA)란 무엇인가? 기본 이해

이클립스 자바 디벨로퍼를 활용한 코딩 기초 ‘HelloWorld’


HTML 문서 기본 구조

프로그래밍 언어

위의 코드는 HTML 문서의 기본 구조를 파악하기 쉬운 예시 코드이다. 위 코드들은 각 영역에서 다음과 같은 역할을 하게 된다.

  • <!DOCTYPE html1> : 해당 부분은 HTML문서가 HTML5로 작성된 것을 브라우저에 인식시킨다. (문서의 종류를 알림)
  • <html> : HTML 문서의 루트 요소를 정의한다.
  • <head> : 문서의 메타데이터를 포함하는 부분으로, 해당 태그 사이에는 웹 페이지의 제목, 스타일 시트 링크 등의 정보가 들어갈 수 있다.
  • <meta charset=”UTF-8″ : 이 메타 태그는 문서의 문자 인코딩을 UTF-8 방식으로 설정한다. UTF-8이라는 것은 대부분의 문자들을 지원하는 일반적인 인코딩 방식이다.
  • <title> : 웹 페이지의 제목을 정의하며, 브라우저에 노출되는 제목으로 사용된다.
  • <body> : 실제 내용이 들어가는 부분으로, 해당 태그 사이에는 웹 페이지의 내용, 텍스트, 이미지, 링크 등이 들어간다.
  • <h1> : 대표 제목을 정의한다. 해당 태그 내에는 텍스트로 표시되는 제목을 작성할 수 있다.
  • <p> : 단락(paragraph)을 정의하며 해당 태그 내에 텍스트로 표시되는 문장이나 문단을 작성할 수 있다.

내가 바로 위에 목록 형태로 설명한 글을 html 형식으로 변환해서 보여주자면 아래와 같다. (<ul>, <li>태그는 목록 형태의 요소들과 관련되어 있다)

html 코드

HTML 태그의 구조

<a href = “http://www.fivecurator.com”>content</a>

위의 태그를 예시로 들어보자면, 여기서 <a _____________ </a> 태그는 요소의 시작과 끝을 알리는 태그에 해당한다.

href 태그는 속성을 의미하는 태그이며, “http://www.fivecurator.com” 태그는 값(Value)을 의미하는 태그이다.

그리고 위의 모든 한 문장의 태그를 통틀어서 우리는 하나의 요소(Element)라고 정의한다.

그러면 지난 번에 설치했었던 비쥬얼 스튜디오 코드 프로그램을 활용하여, 이러한 내용들을 한번 뜯어보도록 하자.


비쥬얼 스튜디오 코드 실행(html)

batch 비쥬얼 스튜디오 코드 8

가장 먼저 비쥬얼 스튜디오 코드 프로그램을 실행시켜준다. 만약 좌측 패널이 열려 있다면 단축키 컨트롤(ctrl) + b를 동시에 누르면 간편하게 패널을 숨길 수 있다.

HTML 기초

그 다음 좌측 상단에 File 버튼을 누른 뒤, New Text File 탭을 클릭한다.

HTML 기초

New Text File 탭을 클릭하면 위와 같은 문장이 뜨게 되는데, 여기서 Selet a Language 버튼을 클릭해서 언어를 선택한다.

비쥬얼 스튜디오 코드 HTML

검색창에 ‘html’을 검색하고, 바로 아래 보이는 <>HTML(html) 언어를 선택해 준다.

HTML 기초

그러고 나면 위와 같은 공백 창이 보일텐데, 여기서 해당 창에서 ! 하나를 넣어준다.

HTML 기초

! 하나를 넣어주면 작은 스페너 모양이 뜨게 되는데, 여기서 간편하게 단축키 Tab을 클릭하면 자동으로 기본 코드가 생성된다.

HTML 기초

이런 식으로 기본적으로 생성되는 코드들을 활용해서 기초적인 코딩을 연습할 수 있다. 그러나 코드가 아직 낯선 사람들은 하나 하나의 요소들이 어떤 역할을 하는 것인지 분석해 보는 것을 권유한다.

이번 글은 여기서 마치도록 하고, 다음 글에서는 보다 심층적으로 코드를 작성해 보도록 하겠다.

함께 읽으면 좋은 글

이 포스팅은 파트너스 활동으로 소정의 수수료를 제공받을 수 있습니다.

Leave a Comment