[Do it! HTML+CSS+자바스크립트]웹 개발 기본, HTML

22.12.13 배운 내용 정리
(웹 개발 이론, 웹 개발 환경 만들기, HTML 시작하기)

 

웹 개발

 

정적 사이트 = 취업을 위한 포트폴리오 사이트나 기업 홍보 사이트처럼 방문자에게 정보를 보여주기만 하는 웹 사이트로 미리 작성한 내용을 웹 사이트에 올려놓으면 방문자는 그 정보를 확인하는 방식이므로 제작하기 쉬움

동적 사이트 = 화면에 보이는 모습뿐아니라 여러 서비스 기능(ex.페이스북의 친구추가, 좋아요, 공유하기 등)도 포함하는 웹 사이트

웹 개발 = 웹 사이트를 만드는 것 뿐만이 아니라 웹 사이트에서 사용자에게 제공할 기능과 서비스까지 담을 수 있어야함. 

 

서버와 클라이언트

 

서버 = 사용자가 웹 브라우저에서 정보를 입력하거나 링크를 클릭하면

웹 사이트는 인터넷에 연결된 컴퓨터에게 정보를 가져와서 웹 브라우저에 보여줌.

이때 인터넷에 연결된 컴퓨터를 서버라하며, 서버에는 웹 사이트에 접속하면 보이는 텍스트, 이미지, 동영상 등의

웹 요소와 사용자 정보, 상품 정보 등의 여러 정보가 저장됨.

클라이언트 = 사용자가 웹 사이트에 접근하려고 사용하는 PC나 태블릿 PC, 스마트폰 등.

좁은 의미로 웹 브라우저를 클라이언트라고 함.

 

※ 웹 사이트에서 로그인 하는 과정에서 서버와 클라이언트 설명

사용자가 웹 브라우저에서 아이디와 비밀번호를 입력하여 웹 사이트에 로그인 요청 →

웹 사이트는 사용자에게 입력받은 정보를 서버로 전달 →

서버는 저장된 여러 정보 중에서 로그인을 요청한 사용자의 정보가 있는지 검색 후

일치하는 정보가 있다면 그 결과를 사용자의 웹 브라우저에 전달하고 로그인에 성공한 화면을 보여줌.

하지만 일치하는 정보가 없다면 로그인에 실패한 결과를 보여줌.

웹 사이트에서 정보를 검색하거나 처리하는 일은 서버에서 하고, 사용자의 요청을 받아 처리한 결과는 클라이언트에서 보여줌.

즉 클라이언트는 사용자와 서버 사이에서 화면으로 보여주는 역할을 함.

 

프런트엔드와 백엔드 개발

 

웹 개발은 크게 프런트엔드 개발과 백엔드 개발로 나뉨.

 

프런트엔드 = 사용자 앞에 보이는 영역. 즉 웹 브라우저 화면에 보이는 것을 다룸.

웹 사이트를 디자인하거나 사용자 동작에 반응하는 기능을 만들 수 있으며,

또한 스마트폰, 태블릿 PC에서 사용하는 모바일 웹 브라우저용 사이트를 만들려면 프런트엔드 개발을 알아야함.

특히 다양한 웹 브라우저의 종류와 버전에 따라 작동할 수 있게 만드는 것이 중요하며,

이러한 프런트엔드 개발에는 HTML과 CSS, 자바스크립트를 사용함.

 

백엔드 = 사용자 뒤에서 보이지 않는 영역으로 웹 사이트의 회원 정보나 게시판 글 등은

서버에 데이터베이스 형태로 저장되는데 이러한 데이터베이스를 설계하거나 데이터를 처리하는 것이

백엔드 개발의 영역임. 이러한 백엔드 개발에는 자바, PHP, 파이썬 등의 다양한 프로그래밍 언어를 사용함.

 

---

 

웹 개발을 위해 공부해야 할 기술

 

기본 영역(프런트 엔드 개발, 백엔드 개발 어느 것을 하든 반드시 알아 두어야 하는 기술)

= HTML, CSS, 자바스크립트, 깃/깃허브

 

프런트엔드 영역

① 다양한 라이브러리(ex.제이쿼리, D3.js, 부트스트랩 등)

② 프레임워크(ex.리액트, 앵귤러, 뷰 등)

 

백엔드 영역

① 리눅스 서버, 네트워크, 데이터베이스 구축 기술

② 서버 언어(ex.파이썬, 자바, PHP, 닷넷 등)

③ 프레임워크(ex.노드제이에스, 스프링, 장고, 코드이그나이터 등)

 

웹 개발의 기본 HTML, CSS, 자바스크립트

 

HTML = 웹 문서의 뼈대를 만드는 것으로 웹 브라우저 창에 웹 문서의 내용을 보여 주는 데 필요한 약속이라고 할 수 있음.

HTML은 웹 브라우저의 여러 내용 중에서 제목과 본문, 이미지, 표와 같은 웹 요소를 알려 주는 역할을 하며,

웹 개발을 하면서 웹 브라우저에 보여 주고 싶은 내용이 있다면 HTML에 맞는 표기법을 사용해야 함.

 

CSS = 웹 문서를 꾸미는 것으로 HTML로 만든 내용을 사용자가 알아보기 쉽게 꾸미거나 사용하기 편리하도록 배치할 때  사용함.

규격이 정해진 PC나, 모바일 화면에 여러 내용을 보여 줘야 하므로

CSS를 이용해서 웹 요소를 적절하게 배치하고 필요한 곳을 강조할 수 있음.

특히 다양한 디바이스에 따라 화면이 자동으로 바뀌는 반응형 웹 디자인을 만들려면 CSS를 공부해야 함.

 

자바스크립트 = 사용자의 동작에 반응하는 것으로 예를 들어 팝업 창을 보여주거나

상품 목록을 자동으로 스크롤하는 것처럼 동적인 효과를 사용하려면 자바스크립트가 필요함.

그리고 규모가 큰 웹 사이트 개발에서는 리액트나 뷰같은 자바스크립트 *프레임워크를 사용하는데,

자바스크립트 기본 문법을 알고 있다면 이러한 프레임워크를 배우기가 훨씬 쉬워짐.

 

*프레임워크 = 프로그램을 만들 때 필요한 여러 기능을 쉽게 구현하도록 도와주는 도구.

예를 들어 웹 프레임워크는 로그인이나 댓글처럼 자주 쓰는 기능을 제공해 개발자가 웹 사이트를 쉽게 만들도록 도와줌.

 

프런트엔드 개발을 위한 기술

 

순수 자바스크립트로만 처음부터 끝까지 프로그램을 코딩해 개발하는 것은 어려운 일임.

따라서 미리 만들어진 자바스크립트의 라이브러리와 프레임워크를 알아 두면 좋음.

 

※ 바닐라 자바스크립트 = 라이브러리나 프레임워크를 사용하지 않고 자바스크립트로만 개발하는 것

 

※ 프런트엔드 개발에서 주로 사용하는 자바스크립트 라이브러리와 프레임워크

 

종류	특징	관련 사이트
제이쿼리 (jQuery)	DOM을 활용해 웹 요소를 조작하기 쉽고 사용하기 편리한 라이브러리 도구로, 최근에는 웹 애플리케이션 개발에 적합한 다른 라이브러리나 프레임워크에 자리를 내주고 있음.	jquery.com
D3.js	웹 브라우저에서 실시간으로 변하는 정보를 시각적으로 표시하기에 적합한 라이브러리 도구로, 데이터를 시각화해 주는 자바스크립트 라이브러리는 D3.js 외에도 라파엘, Three.js 등이 있음.	d3js.org
부트스트랩 (Bootstrap)	웹 사이트 디자인을 쉽게 만들어 주는 라이브러리 도구로, CSS로 PC, 태블릿 PC, 휴대 전화 등에서 동작하는 반응형 디자인을 만들 수 있게 해줌.	getbootstrap.com
리액트 (React)	페이스북처럼 한 화면에서 모든 내용을 볼 수 있는 사이트를 SPA(Single Page Application)라고 하고, SPA나 복잡한 사이트를 개발할 때 프레임워크를 사용함. 이때 가장 많이 사용하는 프레임워크가 리액트이며 페이스북에서 개발함.	ko.reactjs.org
앵귤러 (Angular)	앵귤러는 구글에서 개발한 언어로 웹 애플리케이션을 제작하는 프레임워크임. 프로젝트 성격에 따라 리액트나 앵귤러 중에서 선택하여 사용함.	angular.io
뷰 (Vue)	웹 애플리케이션에서 사용자 인터페이스를 만드는 프레임워크로, 화면에 보이는 부분에만 초점을 맞추기 때문에 다른 라이브러리나 프레임워크와 함께 사용 가능함.	vuejs.org

 

※ 라이브러리 도구와 프레임워크의 차이점

라이브러리 도구와 프레임워크의 가장 큰 차이는 개발 흐름의 주도권을 누가 가지고 있는가에 달림.

개발자가 코딩할 때 라이브러리는 자신에게 필요한 기능만 사용해도됨. 즉 개발 주도권이 개발자에게 있음.

반면 프레임워크는 개발주도권이 프레임워크에 있음. 그래서 웹 개발을 시작하는 방법부터 기능을 구현하는

모든 것을 프레임워크에서 정해 놓은 대로 따라야 함.

 

백엔드 개발을 위한 기술

 

웹 개발에서 브라우저 화면에 보이는 영역 외에는 모두 백엔드 영역이므로 개발 분야가 다양함.

백엔드 개발자가 되려면 서버뿐만 아니라 클라이언트와 서버 사이의 정보를 저장·관리하는 데이터베이스 등의

기본 개념을 알아야하며, 백엔드 개발 언어와 관련 프레임워크도 선택해서 공부해야 함.

백엔드 개발은 서버 운영체제에 따라 사용하는 언어도 프레임워크도 달라짐.

 

※ 최근 자주 사용하는 백엔드 개발 언어와 프레임워크

 

종류	특징	관련 사이트
노드제이에스(Node.js), 익스프레스(Express)	이미 프런트엔드 개발을 해본 경험이 있거나 자바스크립트에 익숙하다면 노드제이에스로 실력을 발휘해 백엔드 개발에 사용할 수 있음. 노드제이에스는 서버에서 자바스크립트를 실행할 수 있는 환경, 즉 플랫폼이라고 생각하면 됨. 그래서 자바스크립트만 익숙하면 웹 개발의 전체를 다룰 수 있음. 노드제이에스에서 주로 사용하는 웹 개발 프레임워크는 익스프레스임.	nodejs.org/ko, expressjs.com
자바(Java), 스프링(Spring)	자바는 오랫동안 백엔드 개발용으로 사랑받는 언어이고, 그만큼 관련 커뮤니티나 오픈 소스가 많음. 자바를 사용하면 안드로이드 앱을 개발할 수도 있고, 셋톱 박스나 하드웨어용 애플리케이션을 만들 수도 있음. 자바의 웹 개발 프레임워크로는 스프링을 많이 사용함.	java.com, spring.io
파이썬(Python), 장고(Django)	파이썬은 배우기도, 사용하기도 쉬워서 개발 입문자가 처음 공부할 때 선택하는 언어임. 특히 데이터를 많이 다뤄야 하는 분야에서는 파이썬이 훨씬 유리함. 백엔드 개발을 할 때 파이썬의 프레임워크로는 장고를 사용함.	python.org, djangoproject.com
PHP, 코드이그나이터(Codelgniter)	PHP는 백엔드 개발에서 오랫동안 사용된 개발 언어로, 이전 버전은 개인 웹 사이트에서 주로 사용했지만 PHP7 버전부터는 백엔드 개발을 위한 프레임워크로 탈바꿈함. 코드이그나이터는 PHP의 대표적인 웹 프레임워크임.	php.net, codeigniter.com

 

이 밖에 백엔드 개발 언어로 루비(Ruby)와 루비에서 사용하는 루비 온 레일즈(Ruby on rails)라는 프레임워크가 있으며,

최근에는 고(Go)와 고의 레벨(Revel)이라는 프레임워크도 소개됨.

 

---

 

웹 브라우저

 

웹 브라우저 = 웹 사이트를 방문할 때 사용하거나 웹 개발자가 웹 편집기로 작성한 문서를 화면에 나타나는 프로그램

 

※ 웹 브라우저의 종류

 

종류	제조업체	특징	관련 사이트
크롬	구글	HTML5가 등장할 때 가장 빨리 지원한 웹 브라우저로 사용자가 가장 많음. 다양한 확장 프로그램으로 필요한 기능을 추가해 사용할 수 있다는 장점이 있음.	google.com/chrome
엣지	마이크로소프트	2020년 1월에 출시된 웹 브라우저로, 크롬 브라우저와 같은 엔진을 사용하여 같은 기능을 대부분 제공함.	microsoft.com/ko-kr/edge
파이어폭스	모질라	개발자들이 많이 사용하는 웹 브라우저로 개발 도구와 부가 기능이 뛰어남.	mozilla.org/ko/firefox/new

 

웹 편집기

 

웹 편집기(코드 편집기) = 웹 문서를 만들 HTML 태그를 비롯해 CSS나 자바스크립트 소스를 입력하는 프로그램으로,

메모장, 전문 편집기 등의 텍스트를 입력할 수 있는 프로그램이면 모두 편집기로 쓸 수 있음.

그러나 웹 편집기는 태그와 속성, 일반 텍스트 등을 서로 다른 색으로 표시해 주므로 소스를 읽기 쉬움.

또한 웹 편집기에 따라 태그나 속성의 일부 글자만 입력하더라도 전체를 입력해 주는 자동 완성 기능으로

오타로 발생하는 오류를 줄일 수 있음.

 

---

 

HTML

 

HTML = 웹 문서를 만드는 언어로 HyperText Markup Language의 줄임말임.

여기서 하이퍼텍스트란 문서를 서로 연결해 주는 링크를 의미함

즉 HTML에는 서로 연결한다는 의미가 포함되어 있음. 그리고 마크업이란 '표시한다'는 뜻으로

웹 브라우저에 내용을 보여 주는 텍스트, 이미지, 영상 등의 위치를 표시하는 것을 의미함.

HTML의 기본 기능은 웹 브라우저에 보여 줄 내용에 마크업하고 문서끼리 링크하는 것임.

 

웹 문서는 내용을 작성하는 프로그램과 그 내용을 확인하는 프로그램이 다름.

예를 들어 웹 문서에서 표를 만들 때 웹 브라우저에서 바로 표를 삽입할 수 없음.

그러므로 비주얼 스튜디오 코드 같은 웹 편집기에서 마크업 형식으로 표를 작성해야 함.

그러면 웹 브라우저는 각각 제목, 텍스트, 표로 인식해서 나타냄.

이때 웹 브라우저가 어느 부분이 제목, 텍스트 또는 표인지 구별할 수 있도록 꼬리표를 붙여야하는데,

이러한 꼬리표를 태그라고 함.

 

HTML 문서의 기본 구조

 

HTML 문서는 정해진 형식에 맞추어 내용을 입력해야 함.

웹 문서는 보통 <!DOCTYPE html>로 시작해 <html>, <head>, <body>라는 3개의 영역으로 구성되어 있음.

 

HTML 문서 기본 구조

 

① <!DOCTYPE html>

- 웹 문서의 유형을 지정하는 선언문으로 현재 문서가 HTML5 언어로 작성한 웹 문서라는 의미

 

② <html> ~ </html>

- 웹 문서의 시작과 끝을 나타내는 태그로, 웹 브라우저가 <html> 태그를 만나면 </html>까지 소스를 읽어 화면에 표시함.

</html> 태그 뒤에는 아무 내용도 없어야 함.

 

③ <head> ~ </head>

- 웹 브라우저가 웹 문서를 해석하는 데 필요한 정보를 입력하는 부분임.

<head> 영역의 내용은 웹 브라우저가 알아야할 정보를 입력하는 곳이기 때문에

대부분 웹 브라우저 화면에는 보이지 않음. 또한 문서에서 사용할 스타일 시트 파일도 이곳에서 연결해 줌.

head 영역에서 사용하는 태그로 <meta>, <title> 태그가 있음.

 

※ <meta> 태그

<meta> 태그는 웹 브라우저에는 보이지 않지만 웹 문서와 관련된 정보를 지정할 때 사용함.

<meta> 태그의 가장 중요한 역할은 화면에 글자를 표시할 때 어떤 인코딩을 사용할지 지정하는 것임.

웹 서버는 영어가 기본이므로 화면에 한글로 된 내용을 표시할 때는 UTF-8이라는 문자 세트를 사용한다고

웹 브라우저에 다음과 같이 알려 줘야 함.

<mata charset="UTF-8">

(<meta> 태그에서 인코딩을 명시하지 않으면 웹 브라우저에서 자동으로 인코딩을 처리하기 때문에 한글이

깨질 수도 있음. 따라서 <meta> 태그에서 한글 인코딩을 명시하는 <mata charset="UTF-8">를 꼭 적어 주는 것이 좋음.)

 

그 밖에 <meta> 태그를 사용해서 웹 사이트의 키워드나 간단한 설명, 제작자 등의 정보를 다음과 같이 지정할 수 있음.

<mata name="keywords" content="html의 구조">                          //웹 문서의 키워드

<mata name="description" content="html의 구조를 알아봅시다">  //웹 문서의 설명

mata name="author" content="kyunghee ko">                              //웹 문서의 소유자나 제작자

 

※ <title> 태그

<title> 태그는 <head> 태그 안에서 가장 중요한 태그로 다음과 같이 <title>과 </title> 사이에 웹 문서의 제목을 입력함.

<title>HTML 기본 문서</title>

 

<title> 태그에서 지정하는 내용은 거의 모든 웹 브라우저의 제목 표시줄에 표시되며,

해당 페이지의 방문자나 검색 엔진은 제목 표시줄의 제목을 보고 페이지의 전체 내용을 추측할 수 있으며,

웹 사이트의 즐겨찾기를 지정할 때도 웹 문서 제목으로 추가됨.

 

<title> 태그 작성 내용을 나타나는 부분

 

④ <body> ~ </body>

- 실제로 웹 브라우저 화면에 나타나는 내용임. HTML 태그는 대부분 <body> 태그 안에 들어 있음.

 

<body> 태그 작성 내용을 나타내는 부분

 

※ <html lang="ko">의 의미

<html> 태그에서는 lang 속성으로 문서에서 사용할 언어를 지정할 수 있음.

예를 들어 한국어라면 korea의 줄임말인 ko를 사용함.

<html> 태그에서 사용하는 언어를 표시하는 이유는 검색 사이트에서 특정 언어로 제한해 검색할 때 필요하기 때문임.

 

---

 

시맨틱 태그

 

시맨틱 태그 = 웹 문서의 구조를 만듦. HTML의 태그는 그 이름만 봐도 의미를 알 수 있어 시맨틱 태그라고 함.

텍스트 단락을 줄인 <p> 태그나 앵커를 줄인 <a> 태그 등 이름만으로도 어떤 역할을 하는지 쉽게 알 수 있음.

흔히 사용하는 웹 사이트의 디자인은 서로 달라보여도 구조는 비슷함. 헤더에는 사이트 제목이나 로고가 있고,

본문 영역과 그 외의 내용을 나타내는 사이드 바, 푸터 영역 등이 있음. 그리고 웹 사이트에 따라 한두 영역이 추가되기도 함.

이런 구조를 바탕으로 HTML에는 태그 이름만 봐도 어떤 역할을 하는지 쉽게 알 수 있는 문서 구조 태그를 추가할 수 있음.

 

※ 시맨틱 태그를 사용하여 만든 웹 문서

 

 

① 헤더 영역 = <header> 영역

② 네비게이션 영역 = <nav> 영역

③ 본문 영역 = <main> 영역

④ 푸터 영역 = <footer> 영역

 

시맨틱 태그가 필요한 이유 

 

시맨틱 태그가 필요한 이유 ①

첫 번째 이유는 시맨틱 태그를 사용하면 웹 브라우저가 HTML의 소스 코드만 보고도

어느 부분이 제목이고 메뉴이고 본문 내용인지 쉽게 알 수 있기 때문임.

그래서 시각 장애인이 웹 사이트를 이용할 때 쓰는 화면 낭독기와 같은 보조 기기에서

사이트의 구조를 제대로 이해할 수 있음. 그러면 웹 사이트 사용자에게 보다 더 정확한 내용을 전달할 수 있음.

 

시맨틱 태그가 필요한 이유 ②

두 번째 이유는 문서 구조가 정확히 나눠지므로

PC나 모바일의 웹 브라우저와 여러 스마트 기기의 다양한 화면에서 웹 문서를 표현하기가 쉽기 때문임.

 

시맨틱 태그가 필요한 이유 ③

마지막으로 세 번째는 인터넷에서 웹 사이트를 검색할 때 필요한 내용을 정확히 찾을 수 있기 때문임.

만약 웹 사이트의 본문 내용을 검색해야 한다면 메뉴나 푸터 영역이 아니라 본문 영역 안에서만 검색할 것임.

 

웹 문서 구조를 만드는 주요 시맨틱 태그

 

웹 문서의 구조를 만들 때 반드시 시맨틱 태그를 사용할 필요는 없음.

하지만 문서 구조를 만드는 시맨틱 태그가 있다는 것을 알았다면 쓰임새에 맞는 태그를 사용하는 것이 좋음.

 

① 헤더 영역 = <header> 태그

<header> 태그는 말 그대로 헤더 영역을 의미함. 사이트 전체의 헤더도 있지만 특정 영역의 헤더도 있음.

사이트에서 헤더는 주로 맨 위쪽이나 왼쪽에 있으며, 검색 창이나 사이트 메뉴를 삽입함.

(웹 문서의 정보를 담는 <head> 태그와 혼동 주의!!)

 

② 네비게이션 영역 = <nav> 태그

<nav> 태그는 같은 웹 문서 안에서 다른 위치로 연결하거나 다른 웹 문서로 연결하는 링크를 만듦.

<nav> 태그는 웹 문서의 위치에 영향을 받지 않으므로 헤더나 푸터, 사이드 바 안에 포함할 수도 있고 독립해서 사용할 수도 있음.

그리고 웹 문서에서 <nav> 태그를 여러 개 사용할 경우 각각 id 속성을 지정하면 내비게이션마다 다른 스타일을 적용할 수 있음.

 

③ 핵심 콘텐츠 담는 본문 영역 = <main> 태그

<main> 태그는 웹 문서에서 핵심이 되는 내용을 넣음. 여기에는 메뉴, 사이드 바, 로고처럼 페이지마다 똑같이 들어간 정보는 넣을 수 없고,

웹 문서마다 다르게 보여 주는 내용으로 구성함. <main> 태그는 웹 문서에서 한 번만 사용 가능함.

 

④ 독립적인 콘텐츠를 담는 = <article> 태그

<article> 태그는 웹에서 실제로 보여 주고 싶은 내용을 넣음.

예를 들어 블로그의 포스트나 뉴스 사이트의 기사처럼 독립된 웹 콘텐츠 항목을 말함.

문서 안에는 <article> 태그를 여러 개 사용할 수 있고, 이 안에는 <section> 태그를 넣을 수도 있음.

 

⑤ 콘텐츠 영역을 나타내는 = <section> 태그

<section> 태그는 웹 문서에서 콘텐츠 영역을 나타냄. <section> 태그는 <article> 태그와 비슷해 보이기도 함.

하지만 <section> 태그는 몇 개의 콘텐츠를 묶는 용도로 사용하고, <article> 태그는 블로그의 포스트처럼 독립된 콘텐츠로 씀.

(단순히 스타일을 적용하려고 콘텐츠를 묶으려면 <section> 태그 대신 <div> 태그를 사용함) 

 

⑥ 사이드 바 영역 = <aside> 태그

<aside> 태그는 본문 내용 외에 왼쪽이나 오른쪽, 혹은 아래쪽에 사이드 바를 만듦.

보통 웹 사이트에서 사이드 바는 필수 요소가 아니므로 필요할 경우에만 사용함.

 

⑦ 푸터 영역 = <footer> 태그

<footer> 태그는 웹 문서에서 맨 아래쪽에 있는 푸터 영역을 만듦. 푸터에는 사이트 제작 정보나 저작권 정보, 연락처 등을 넣음.

또한 푸터 영역에는 <header> 태그를 비롯하여 <section>, <article> 등 다른 시맨틱 태그를 모두 사용할 수 있음.

이러한 시맨틱 태그를 이용해 푸터 안에 다양한 정보를 넣음.

 

메뉴가 들어 있는 푸터

 

위 예제에는 웹 문서 맨 아래쪽에 푸터를 두고, 그 안에 회사 소개와 사이트 안내 등의 메뉴를 넣었음.

이 밖에 SNS 링크나 연락처 등의 정보를 넣기도 함.

 

⑧ 여러 소스를 묶는 = <div> 태그

HTML의 <header>, <section> 같은 시맨틱 태그가 나오기 전에는 헤더나 내비게이션, 푸터 등을 구별할 때

<div> 태그를 사용했었음. 아직도 문서 구조를 만들 때 <div> 태그를 사용하는 경우가 많음.

(<div> 태그에서 div는 division의 줄임말임.)

<div> 태그는 <div id="header">나 <div class="detail">처럼 id나 class속성을 사용해서 문서 구조를 만들거나

스타일을 적용할 때 사용함. 즉 영역을 구별하거나 스타일로 문서를 꾸미는 것임.

 

---