프론트엔드 HTML 프로그래밍 기초

1. 월드와이드웹과 HTML

이번 강좌에서는 프론트엔드 프로그래밍의 근간이 되는 월드와이드웹을 살펴보고 월드와이드웹 콘텐츠 제작을 위해 필수적인 HTML 의 기본 개념과 구조등을 살펴봅니다.

이 강의를 통해 월드와이드웹의 기본 개념과 HTML 문서의 기본 구조를 이해하고 css, javascript 와의 관계를 배우게 됩니다.

Youtube 에서 동영상 강좌 보기

01: 월드와이드웹(WWW: World Wide Web)

월드와이드웹은 대표적인 인터넷 서비중 하나로 언제 어디서나 접속 가능한 정보 서비스 입니다.

월드와이드웹은 1989년 유럽물리입자연구소(CERN)의 팀 버너스-리에 의해 개발되어 보편적인 인터넷 서비스로 확대되었습니다. 인터넷은 전세계를 하나로 연결해주는 물리적인 네트워크망으로 TCP/IP라고 하는 통신프로토콜(규약)에 의해 동작 합니다.

www개념

웹 프로그래밍 구조

월드와이드웹 서비스를 제공하기 위해서는 서버(Server) 컴퓨터와 서버에서 동작하는 일련의 프로그램들이 필요 합니다. 서버에서 동작하는 프로그램 영역을 백엔드(Backend) 라고 합니다.

서비스를 이용하는 쪽은 클라이언트(Client) 라고 하며 클라이언트는 스마트폰, 데스크탑 이 대표적입니다. 최근에는 냉장고나 TV에도 인터넷 접속을 위한 모니터가 탑재되어 있는 경우도 있습니다. 클라이언트에서 월드와이드웹 서비스를 이용하려면 웹브라우저 라고 하는 소프트웨어가 필요하며 클라이언트에서 동작하는 프로그램 영역을 프론트엔드(Frontend) 라고 합니다.

웹프로그래밍구조

02: HTML, CSS, JavaScript

앞에서 설명한것 처럼 HTML, CSS, JavaScript는 프론트엔드 즉 클라이언트 영역을 구성하는 핵심 프로그램 기술들 입니다. 이들은 개별적으로 사용하지 않고 HTML을 중심으로 각각의 역할에 맞게 기능을 구현해 통합해서 사용하게 됩니다.

HTML(Hyper Text Markup Language)

CSS(Cascading Style Sheet)

JavaScript

다음은 html 만으로 이루어진 콘텐츠와 css 가 적용된 실제 사례 입니다. 왼쪽은 네이버 소스에서 css 부분만 제거한 것이고 오른쪽은 css 를 포함해 디자인을 적용한 화면입니다. 기본 소스는 수정하지 않고 css포함 부분 3줄만 제거한 것으로 css 에 따라 화면이 완전히 새롭게 구성되는 것을 확인할 수 있습니다.

디자인이 적용된 화면에서 실시간으로 변하는 날씨나 인기검색어, 뉴스 속보, 변하는 광고이미지 등이 자바스크립트 로 동작하는 것입니다.

html css

03. HTML 태그

태그(Tag)

HTML의 기본 구성요소는 태그(Tag) 이며 태그는 < >를 사용하여 나타냅니다. 태그는 일반적으로 시작과 끝을 표시하는 2개의 쌍으로 이루어져 있으며, 종료태그 앞에는 /을 붙여줍니다. 태그의 이름은 규칙으로 정해져 있고 태그마다 역할이 다릅니다.

<시작태그 속성="값" 속성="값"...>태크콘텐츠</종료태그>

<!-- 주석 입니다. -->
<body>
<h2>Hello World</h2>
<hr>
</body>

속성(Attribute)

속성은 HTML 태그에 부가적인 정보를 제공하는 방법 입니다. 예를 들어 그림을 넣기 위해 사용하는 <img> 태그의 경우 그림파일의 위치를 지정하기 위한 src 속성이 있습니다.

<img src="/img/smile.jpg" width="500" height="300">

태그 바디(Tag Body)

태그와 태그 사에의 콘텐츠를 의미 합니다. 태그 바디에는 다른 태그를 포함할 수 있으며 단순 텍스트만 올수도 있습니다.

<h2>Hello World</h2>
<ul>
    <li>item1</li>
    <li>item2</li>
</ul>

04: HTML 기본 문서 구조

HTML 문서의 기본 골격은 <!DOCTYPE html>, <HTML>, <HEAD>, <TITLE>, <BODY> 태그로 이루어져 있습니다.

HTML문서구조
[그림 : HTML문서구조]

다음은 일반적으로 사용하는 기본 HTML 문서 템플릿입니다. VS Code 에서는 HTML 파일을 생성한 다음 !를 입력하고 엔터를 치면 다음과 같은 기본 코드가 자동 생성 됩니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Page Title</title>
</head>
<body>
    
</body>
</html>

레이아웃

레이아웃은 화면의 구성요소들을 배치하는 것을 말하는 것으로 웹페이지 디자인을 시작할때 제일 먼저 해야하는 작업입니다. 레이아웃 자체를 표현하는 것은 CSS 영역 이지만 문서의 구조를 레이아웃에 맞춰 설계하는 것은 HTML에서 해야하는 일입니다. 보통 <div> 태그를 이용해 구획을 나누기도 하고 HTML5의 시멘틱태그를 이용하기도 합니다.

웹페이지 레이아웃
[그림 : 웹페이지 레이아웃]

참고 자료