01. html 소개

웹개발

01. html 소개

** 이프로 ** 2023. 12. 29. 15:12

안녕하세요.

콤퓨타 학원에 원장을 하고 있는 이프로입니다. 헤헴 ^^

html은 마크업 랭귀지라고 해서 프로그래밍 언어가 아니에요.

프로그래밍 영역에 해당하는 것을 처리 할 수 없지요.

html은 브라우저 화면에 보여지는 단순한 외형들을 담당해요.

마치 건물을 지을때 골격같은 느낌이라고 할까요.

이거에서 조금더 이야기를 하자면

외형을 이쁘게 인테리어를 한다고하면 style과 css가 담당하게 될것이구요.

전등 스위치를 달아 켜고 끄기를 하려면 javascript가 그걸 담당하게 될거에요.

그럼 우선 html의 기본 구성 형태를 확인해보도록 해볼께요.

* html 특징

한가지 참고할 것이 있는데요.

html은 문법을 정확히 지키지 않아도 된다는 특징이 있어요 그렇다고 말도 안되게 내 마음대로 구성하면 브라우저가 제대로 이해하지 못해고 화면을 이상하게 표현하게 될거에요.

그렇니 어느정도것은 지켜줘야겠조~ 참고만 해주시면 되겠어요.

1. 기본 구성

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

이 코드는 HTML의 기본 구성이에요

일단 보기 어려운 것들은 빼고 정말 기본 구성만 두도록 해볼께요.

<html>
<head>
    <title>Document</title>
</head>
<body>
    
</body>
</html>

정말 간단해졌조?

* 열고 닫기 구조

HTML은 기본적으로 열고 닫기로 구성되어 있어요.

이게 무슨 말이냐 하면

첫번째 구성 코드를 보면 <html>이라고 되어 있조?

마지막 코드를 보면 </html>라도 되어 있어요.

여기서 <html>은 html을 연다는 의미고 </html>은 html을 닫는다는 의미를 가지고 있어요.

즉 html와 /html 사이는 html 영역이 된다고 표현 할 수 있어요.

html문법은 대부분 이런씩이로 열고 닫기의 구조로 되어 있어요.

* 태그

다시 기본 구성을 살펴보면 html말고도 head, title, body들이 보이는데요.

이런 것들을 우리는 태그라고 부르고 있어요.

html 태그, head 태그, title 태그, body 태그 이렇게 말이조.

각 태그는 거희 대부분 열기 닫기 구조를 띠고 있어요.

그럼 각 태그에 역할에 대해서 이야기 해볼께요.

* html 태그

html태그로 전체를 감싸고 있는데요.

html 언어를 사용하기 위해서는 기본적으로html 태그로 감쌓여야만 브라우저에서 html 언어로 이해하고 분석하여 브라우저 화면에 표현하게 되요.

html태그 영역 내부에는 head태그와 body태그가 대표적이고 그외에도 여러가지 태그가 들어 갈수 있어요.

* head 태그

head태그는 단어에서 나오는 느낌대로 html의 머리글 같은 느낌을 가지고 있어요.

현재 html에서 필요로 하는 여라가지들을 정의 할 수 있습니다.

head 영역에 들어갈수 있는 대표 태그는 title, style, link가 있는데요.

title - title은 브라우저 상단 탭에 이름을 설정 하는 기능을 해요.

style - style은 각 태크의 사이즈나 색상등 이쁨을 설정하는 영역이에요.

추후에 다시 이야기하도록 할께요.

link - link는 외부 파일을 불러올때 사용하는데요. 일반적으로 css파일을 불어올때 많이 사용해요.

css도 추후에 다시 이야기 할거에요.

* body 태그

body 태그는 실제 브라우저에서 보여지는 부분을 담당해요.

그래서 body 태그안에 다양한 태그를 제공하고 그것들을 이용해 브라우저 화면에 여러가지를 표현 할수 있게 되요.

그럼 html의 기본 구성을 알아보았으니.

이걸 브라우저에 띄워보아야 겠조.

다음 강의에서는 html 코딩을 위한 환경 설정과 작성한 코드를 브라우저에 띄어보는 작업을 해보겠습니다.

이번 강의는 여기까지에요.

여러분들의 관심과 사랑이 있다면 좀 더 좀은 컨텐츠를 제공해줄 수 있을거 같습니다.

많은 관심과 사랑 부탁드립니다.

감사합니다.

그럼 콤빠~