z2soo's Blog

03. HTML 기초 본문

Study/[Udemy] The Web Developer 2023

03. HTML 기초

z2soo 2023. 5. 7. 12:37
반응형

참고 강의 및 주제

아래의 강의를 참고하여 작성한 내용으로 해당 본문에서는 다음을 주제로 작성되었습니다. 

1. HTML Topic
2. HTML 개요
3. MDN(Mozilla Developer Network)
4. HTML 태그
5. Anchor 태그
6. 이미지
7. 주석
 

The Web Developer Bootcamp: Learn HTML, CSS, Node, and More!

전세계 25만명이 선택한 유데미 베스트셀러! HTML, CSS, JavaScript, Node.js 등을 활용한 13개 이상의 프로젝트로 확실하게 웹 개발 입문 완성

www.udemy.com

 

1. HTML Topic

HTML에서는 아래와 같은 주제를 다루고 각 중요성은 다음고 같으니 참고하여 학습하도록 하자. 

  • 매우 중요
    : 문단 요소, HTML 머리말(Heading), HTML 목록(List), 앵커 태그(Anchor tag), HTML 이미지, HTML 상용구(Boilerplate)
  • 중요
    : MDN, Chrome Inspector(F12)
  • 기타
    : VSCode Formating

 

2. HTML 개요

일종의 마크업 언어(Hypertext Markup Language)로 복잡한 논리를 가지지 않으며 웹페이지라는 문서에 마크업을 하는 것으로 생각하면 된다. HTML의 목적은 텍스트로만 이루어진 콘텐츠를 굵은 글씨, 기울인 글씨, 들여쓰기 등의 형태를 입히는 것이다. 

HTML을 작성하기 위해서는 HTML 요소가 필요하다. 링크 요소, 이미지 요소, 양식 요소, 머리말 요소 등 다양한 요소가 있지만 일반적으로는 아래와 같이 태그 구문을 활용한다.

<i> 기울기 요소 태그는 이렇게 사용해요 </i>

 

 3. MDN

Mozilla Developer Network, 모질라 개발자 네트워크로 기본적인 자료부터 다양한 웹 개발 자료와 설명, 튜토리얼이 많으니 참고하면 좋다. 단, 공식 문서라기보단 개발자들이 작성한 글이라는 점 유의하자. 위에서 말한 HTML 태그에 대한 모든 내용도 이곳애서 확인 가능하다. 

 

HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN

메타데이터는 스타일, 스크립트, 각종 소프트웨어(검색 엔진 (en-US), 브라우저 등)의 탐색 및 렌더링을 도와줄 데이터 등 페이지에 대한 정보를 가집니다. 스타일과 스크립트 메타데이터는 페이

developer.mozilla.org

 

4. HTML 상용구

HTML에서는 아래와 같은 표준화된 규격을 사용해야 한다. 

<!DOCTYPE html>
<html lang="en">
html 안에 모든 내용이 들어가야 한다
느낌표 + 탭 입력하면 해당 규격이 자동으로 입력된다
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>D제목으로 화면이 아닌 주소 창에 보여진다</title>
</head>
<body>    
    하나의 head에는 하나의 body만 존재한다
    문서의 모든 요소를 담는다
</body>
</html>

 

5. HTML 요소

모든 요소(태그)를 다 정리할 수는 없지만 꼭 알아야하는 자주 사용되는 요소(태그)들만 정리했다.

HTML 요소명 내용
<body> 섹션 태그 HTML 문서의 내용을 나타내며 문서에서 해당 요소는 하나만 있을 수 있음
<p> 단락 태그 하나의 문단을 나타냄
<h1>, <h2>, <h3>,
<h4>, <h5>, <h6> 		 머리말 태그 6개의 구획 제목으로 일반적으로 <h1>은 한 번만 사용됨
<pre> 서식 태그 태그 내 작성된 텍스트의 모든 띄어쓰기, 줄 나누기 등 서식이 그대로 표현됨
<hr> 수평 가로 구분 태그 수평 가로 구분선 생성됨
<nav> 네비게이션 링크 태그 다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 네비게이션 링크들의 집합을 정의할 때 사용
일반적으로 <ul>, <li> 태그 내부에 사용
<ol> 숫자 목록 태그 Ordered list
숫자로 표시되는 목록
내부에 <li> 사용
<ul> 점 목록 태그 Unordered list
점으로 표시되는 목록
내부에 <li> 사용
<li> 목록 태그 단독으로 쓰이지 않고 <ol>, <li> 내부에 들어감
<a> 앵커 태그  
<img> 이미지 태그 이미지를 삽입하는 태그로 다른 태그와 달리 종료 태그가 존재하지 않음

 

6. Anchor 

앵커 태그는 HTML 요소, 태그 중 하나지만 중요한 부분이라 따로 다시 다룬다.  이는 하이퍼링크를 만드는데 사용되는 요소로 <a>태그로 불린다. 앵커 태그로 만드는 모든 하이퍼링크에는 href 속성을 사용한다. 

#1 url 주소로 연결
<a href="http://www.google.com"> I am a Link to google </a>

#2 직접 만든 about.html로 연결
<a href="about.html"> I am a Link file </a>

 

7. 이미지

HTML에 이미지를 추가할 수 있는 태그로 다른 태그들과 달리 종료 태그가 존재하지 않는다. 

아래와 같이 삽입 가능하며 크기도 html에서 속성으로 (width) 설정 가능하지만, CSS를 사용하는 것을 추천한다. (뒤에서 다룰 예정)

만양 인터넷 상태가 좋지 않거나, url이 변경되거나, 이미지가 저장된 폴더가 변경되었다면 해당 이미지 파일이 깨져서 안보여질 수 있다. 그런 경우는 이미지 대체 텍스트 태그인 <alt> 를 통해 접근성을 높일 수 있다.

<img src="이미지 주소, 위치" alt="이미지 설명">

 

8. 주석

사용자에게 숨기고 싶은 내용은 주석으로 변경할 수 있다.

VSCode 에서의 맥 단축키는 Command + / 이다.

<!-- 주석되는 내용 -->
반응형

'Study > [Udemy] The Web Developer 2023' 카테고리의 다른 글

02. 웹 개발이란?  (0) 2023.05.02
01. Udemy The Web Developer  (0) 2023.05.02
'Study/[Udemy] The Web Developer 2023' Related Articles more
Comments