#24. [유노코딩] 입문자를 위한 HTML 기초강의 1~3강

유노코딩

입문자를 위한 HTML 기초강의

 

---

 

 

---

목차(T.O.C)

1. HTML이란?
1-1. 웹페이지의 콘텐츠를 정의하다
1-2. HTML 문서 만들기

 

2. 개발자도구와 코드에디터
2-1. 개발자도구 켜는법
2-2. 코드에디터

 

3. HTML코드 기초문법
3-1. 태그사용법; 시작과 끝
3-2. 태그사용법: 속성

3-2. 태그사용법: 주석

 

---

1강. HTML 이란?

HypeText(하이퍼 링크를 통해 다른 문서로 접근할 수 있는 텍스트)

Markup(콘텐츠를 표시하다)

Laguage(언어)

 

하이퍼 텍스트와 콘텐츠를 표시하는 언어

1-1. 웹페이지의 콘텐츠를 정의하다

HTML 은 웹페이지의 콘텐츠를 정의하기 위해 사용하는 언어이다. 

웹페이지에 어떤 콘텐츠들이 표시될지를 정의한 HTML 문서를 만든다

 

HTML 문서 --> 웹 브라우저가 로딩 --> 웹 페이지가 생성

이 전체 과정을 랜더링 이라고 함.

 

1-2. HTML 문서 만들기

 

HTML 문서는 파일의 확장자가 HTML 또는 htm 이다.

 

INDEX.html 파일

• 파일을 수정하고 싶으면 텍스트 편집기로 열기(기본 메모장, vscode)
• 결과 (웹 페이지)를 확인하고 싶다면 , 웹 브라우저로 열기(크롬, 사파리)

 

---

2강. 개발자 도구와 코드 에디터

 

2-1. 개발자 도구 켜는법

F12 버튼을 누르거나 , 옆에 점 3개-->도구더보기-->개발자 도구

2-2. 코드에디터

프로그래머가 프로그램 소스 코드를 편집하기 위해 사용하는 소프트웨어

텍스트를 더 빠르게, 편하게 작성하기 위해서는 코드에디터를 사용!(VSCODE)

---

3강. HTML 코드 기초 문법

HTML 은 언어이기에 문법이 중요함

태그(tag) -- HTML 에서 정보를 정의하는 형식

3-1. 태그 사용법:시작과 끝

<태그명> </태그명>

<태그명>

<태그명/>

3-2. 태그 사용법: 속성

속성은 태그의 부가적인 기능을 정의하는 것

태그의 내부에 속성을 정의함.

<태그명 속성명="속성값"> </태그명>

<태그명 속성명="속성값"/>

 

3-2. 태그 사용법: 주석

컴퓨터(웹 브라우저)에게는 보이지 않는 코드

 

<!--     주석작성   -->

 

---