-
HTML 기본은 알고가자 (1탄) : HTML구조, Body 태그, P 태그, Head태그, Div 태그컴퓨터 알아가기/HTML CSS 2021. 2. 16. 19:30728x90반응형
컴퓨터 프로그래밍 언어에 대한 나름 대로 로망이 생기기 시작했다. 하지만 확실한 건 개발자 수준까지는 올라갈 수 있는 능력(?).. 음 거기까지는 이제 너무 시간이 지난 것 같다.
최초 언급했듯이 컴퓨터라는 존재를 알기 위해서는 여러가지 중 컴퓨터 프로그램도 어떤 구성을 가지고 있는지 알 필요가 있기에 언어에 대해 간단히 공부를 해 보고자 한다.
그 중에서도 많은 전문가들이 웹사이트를 구성하는 HTML이라는 언어는 복잡하지도 않고 쉽게 접할 수 있다고 하니 기본구조가 어떻게 생겼는지 어떻게 작동을 하는지 알 필요성은 있다고 판단이 되어 시작 해볼려고 한다.
지난 시간 퀴즈를 풀면서 개념을 익히는 사이트인 Codecademy라는 곳에서 간단히 맛을 봤다. 앞으로 1주일마다 한번씩 HTML의 기본을 알고 나서 인터넷을 접하게 되면 좀 더 새로운 시각을 가지리라 확신한다.
▒ HTML Anatomy (HTML 구조해부)
지난 시간 <h1>의 개념에 대해 이야기 한후 지금은 본격적인 문장이 어떻게 이루어져 있느냐의 관점이다. 문장은 영어로 Paragraph라고 한다.
HTML은 사용자 중심언어라고 생각된다. 즉, 문장을 시작하는 Opening tag가 있고 문장을 맺는 Closing tag 있다.
기본구조는 <p></P>이다.
아..그렇다. HTML에서는 어떤 프로그래밍(코딩)을 할 때 꺽은 괄호로 시작해서 슬래시(/) 꺽은 괄호로 마무리 한다.
코드카데미에 따르면 문장을 시작하는 Paragraph의 시작과 끝은 다음 개념으로 다룬다.
브라우저 화면에는 글씨인 Hello World만 출력 된다.
출처: Codecademy
▒ The Body
Body 태그 부분이다. 중요한 부분이다. Body 태그는 기본적으로 모든 웹사이트의 기본 틀을 설정하는데 사용된다. 즉, 우리가 어떤 웹사이트 기본을 개발자코드(F12)로 보게 되면
<head>
</head>
<body>
<p> Hellow world </p>
</body>
이런 단순한 구조로 이루어져 있다.
Codecademy 퀴즈를 풀면서 개념을 익혀 보자.
참고로 왼쪽은 퀴즈, 중간은 HTML 코드 직접 입력, 오른쪽은 입력된 코드 기준으로 웹 브라우저에 표현되는 결과이다.
출처: Codecademy
▒ HTML Structure (구조)
기본적인 HTML 구조는 <body>태그 사이에 <head> 태그와 <P>태그가 위치한다.
<p> 태그는 계속 추가 하면서 문장을 만들 수 있다.
전체를 이루는 <body>태그 사이에 섹션을 구분하면서 만들어 나간다. 구분하는 방법은 <div>태그이다. 참고로 div는 division의 약자이다.
퀴즈는 <div> 요소안에 <p>태그를 추가하는 예제이다.
출처: Codecademy 참고로 웹 브라우저에 나타나는 모양은 변함이 없으나 코딩을 해 나가는 과정중에서 글이 길어지면 나중에 어디에 코딩을 했는지 잘 찾을 수 없는 경우가 많다. 이를 위햐서 깔끔하게 정렬이 필요한데 이 과정은 별도 Visual Studio를 다루면서 이야기 하도록 하고 여기서는 HTML 개념을 익히는데 주력하도록 하자.
▒ Headings
말 그대로 제목(머리말)이다. HTML에서는 머리말의 구분을 Heading의 약자인 <h>로 사용한다. 각각의 사이즈를 달리 표현하기 위해 <h1>, <h2>, <h3>등으로 나뉜다.
참고로 구글에 따르면 폰트 크기와 픽셀 크기에 대해 안내되어 있다. 참고로 사이즈를 외울 필요는 없는 것 같다. 단지 끝에 숫자로부터 큰 사이즈로 시작된다 정도로 알고 넘어가면 향후 다양한 웹 사이트를 접하면서 이해하면 될 것 같다.
Head 태그 크기 Q1) <h3> Fearures 밑에 <h2> Habitat를 입력
Q2) Habitat 밑에 <h3> Countries with Large Brown Bear Populations 입력
Q3) 그 밑에 <h3> Countries with Small Brown Bear Populations 추가 입력
Q4) 맨 밑에 <h2> Media 압력
출처: Codecademy
▒ Divs (Div 태그)
<div> 태그는 가장 반번하게 사용하는 태그다. <body> 태그 사이에 여러개의 <div> 태그로 나누어서 웹사이트를 구성할 수 있다. 하나의 division으로 나누어진다고 보면 된다.
회사 조직을 예로 들면 영업부, 마케팅부, 인사부, 총무부 등 부서별로 나누어지는데 이런 부서 개념이 <div> 태그의 역할이라고 보면 된다.
바로 위 Head 태그에서 구분되어졌던 내용들을 총 3개의 <div>태그로 묶어 보자.
출처: Codecademy 회사에서 각 부서별로 업무가 독립되면서 부서간 유기적으로 움직이듯이 HTML div.태그 또한 같은 개념으로 움직인다고 보면 된다.
참고로 홈페이지 메인 파일명은 index.html로 작성해 준다.
즉, index 색인의 개념이고 가장 먼저 index.html을 기준으로 웹페이지가 시작이 되는 개념으로 보면 된다. 웹 페이지 디렉토리의 대표문서이며 자동적으로 접속되는 문서이다. 만일 index.html이 없으면 브라우저에서는 홈페이지 처럼 보여지는게 아니라 하나의 데이터 리스트처럼 보이거나 접속할 수 없다는 메시지를 나타 내기도 한다.
이쯤 되면 재미 있어질만 할텐데... 아직 뭐 별로 어렵지 않으니
다음에는 '속성'에 대해 좀 더 알아보도록 하자.
각 구조에 대해 이해를 하게되면 앞으로 지속적으로 연재될 HTML의 짝꿍인 CSS, 그리고 웹페이지에서 반드시 필요하다고 하는 JavaScript, 이 구조를 좀 더 쉽게 발전시킨 React라는 개념이 뒷 받침해 준다면 조금은 더 재미있게 컴퓨터 세상을 볼 수 있으리라 확신한다. 왜냐... 내가 그 길로 취미로 들어가고 있기 때문이다.
반응형'컴퓨터 알아가기 > HTML CSS' 카테고리의 다른 글
HTML 기본을 알고가자(5탄) : 테이블 그리기 기본개념 완성 (0) 2021.03.02 HTML 기본은 알고가자(4탄) : 공백, 테이블 만들기 (0) 2021.02.24 HTML 기본은 알고가자(3탄) : HTML 문서선언, html tag, head tag, page title, 웹페이지링크, 같은페이지내 링크 (0) 2021.02.18 HTML 기본은 알고가자(2탄) : 속성, 글씨쓰기, Text꾸미기, 줄바꿈, 순서 및 비순서 목록, 이미지 및 동영상 삽입 (0) 2021.02.17 HTML 기본은 알고 가자 (0) 2021.02.15