제02강_html소개와 실습환경 구축

Front-End-Web/html+css

제02강_html소개와 실습환경 구축

jsBae 2022. 10. 8. 00:01

학습목표

1. 실습을 위한 에디터
2. html 기본 구조와 태그의 이해

Editor

HTML5 + CSS3를 작성하는데 아주 편리한 전문 Editor가 많습니다. 그러나 어느 정도 html 코딩의 연습을 위해 메모장을 추천합니다.

물론, 전문 html 에디터를 사용하면 태그의 자동완성, 오류확인, 식별의 용이 등 장점이 많으나, 가장 기본적인 메모장을 통해서도 충분히 html 코딩이 가능합니다.

1. tag

2. 기본구조 -

html구조는 html 태그 속에
<head> - 문서의 속성와
<body> - 브라우저에 보이는 부분으로 구분된다.

기본구조를 작성 해 보고 확인 해 보자.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>html 기본구조</title>
 </head>
 <body>
  html5 구조를 학습합시다.
 </body>
</html>

탐색기에 www 폴더를 만든다.
메모장에서 html 기본구조를 작성 한다.
www 폴더안내 index.html 로 저장한다. (확장자 html)
폴더에서 열기를 해 본다. - 자동으로 기본브라우저로 연결된다.
소스보기 - 연결프로그램 메모장 또는 파일을 드래그에서 메모장에서 열어 다시 작업 할 수 있다.
브라우저에서 소스 확인 : F12

이제 이렇게 html 코딩 실습을 시작 해 보도록 하겠습니다.

브라우저에게 정보를 주는 <head> 태그

•웹 브라우저 화면에는 보이지 않지만, 웹 브라우저가 알아두어야 할 정보들 입력
•문서에서 사용할 외부 파일들 링크

<title> 태그 : 브라우저의 제목 표시줄에 표시되는 내용.

<meta charset=”UTF-8”>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>

<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>

<meta name=”keywords” content=”html5, 웹표준”>

<meta name=”description” content=”html5를 통해 웹 표준 공부하기”>

<meta name=”author” content=”baejungsoo”>

문서의 몸통 <body> 태그

실제 브라우저에 표시될 내용 입력
대부분의 태그가 <body> 태그와 </body> 태그 사이에서 사용하는 태그들

특수 기호 입력하기

HTML 문서의 특성상 여러 개의 공백을 나타내거나 따옴표, ‘<’ 같은 꺾쇠 괄호를 화면에 표시할 때는 ‘엔티티 코드’ 사용

https://html.spec.whatwg.org/multipage/named-characters.html

HTML Standard

HTMLLiving Standard — Last Updated 12 October 2022 ← 13.2 Parsing HTML documents — Table of Contents — 14 The XML syntax → 13.5 Named character references 13.5 Named character references This table lists the character reference names that are sup

html.spec.whatwg.org

호스팅 서버 준비하기

HTML로 만든 웹사이트를 다른 사람들이 볼 수 있도록 하려면 웹 문서와 사용한 파일들을 서버 컴퓨터로 업로드해야 한다.
웹 서버를 직접 구입하고 관리하기 어렵기 때문에 매달 혹은 몇 년마다 일정 금액을 내고 사용하는 호스팅 서비스를 많이 이용한다.
http://www.cafe24.com

카페24

쇼핑몰, 오픈마켓/SNS 판매, 기업형 쇼핑몰, 해외 판매, 광고마케팅, 호스팅인프라 서비스 등 제공

www.cafe24.com