HTML 기본 사용법

Posted on Edited on In , Word count in article: 699 Reading time ≈ 3 mins.

HTML 이란?

HTML 이란?

HTML 은 Hyper Text Markup Language 의 약자로 웹 페이지와 그 내용을 구조화하기 위해 사용하는 코드입니다.

HTML 은 프로그래밍 언어가 아닙니다; 컨텐츠의 구조를 정의하는 마크업 언어입니다. HTML은 컨텐츠의 서로 다른 부분들을 씌우거나(wrap) 감싸서(enclose) 다른 형식으로 보이게하거나 특정한 방식으로 동작하도록 하는 일련의 요소(elements)로 이루어져 있습니다. tags로 감싸는 것으로 단어나 이미지를 다른 어딘가로 하이퍼링크(hyperlink)하거나 단어들을 이탤릭체로 표시하고 글씨체를 크게 또는 작게 만드는 등의 일을 할 수 있습니다. 

1
HTML 기초 학습입니다

HTML 은 글을 문단 태그(paragraph tags)로 둘러쌈으로해서 그것이 하나의 문단임을 명시합니다

1
<p>HTML 기초 학습입니다</p>

요소 (elements)

HTML elements

HTML element 는 시작태그 > 내용 > 끝태그로 이루어져있습니다
줄넘김의 의미를 갖는 <br>는 내용과 끝태그가 없습니다

주요 부분은

  • 여는 태그(opening tag): 요소가 시작되는 것을 나타냅니다. 닫는 태그와 쌍으로 이루어집니다.
  • 닫는 태그(closing tag): 닫는 태그가 없는 태그도 있습니다. <br>
  • 컨텐츠(content): 택스트나 다른 태그가 들어갈 수 있습니다
  • 요소(element): 요소는 여는 태그와 닫는 태그, 그리고 컨텐츠로 이루어집니다.

문법을 준수해야 검색이 잘됩니다

중첩 (Nesting)

elements 안에 elements 를 가질 수 있습니다.

1
2
3
4
5
<!-- 잘된 예 -->
<p>HTML <strong>기본</strong> 학습입니다</p>

<!-- 잘못된 예 -->
<p>HTML <strong>기본 학습입니다</p></strong>

순서가 잘 못 되어도 브라우저가 보여주기는 하지만 의도와 다르게 보여줄 수 있습니다.

Block vs Inline

HTML 에는 두 종류의 Element 가 있습니다.

  • 블록 레벨 요소(Block level element) : 웹페이지 상에 블록(Block)을 만드는 요소입니다. 블록 레벨 요소는 줄이 바뀝니다. 블록 레벨 요소는 인라인 요소에 중첩될 수 없고, 다른 블록 레벨 요소에는 중첩될 수 있습니다
    • 단락(Paragraphs)
    • 목록(lists)
    • 네비게이션 메뉴(Navigation Menus)
    • 꼬리말(Footers)
  • 인라인 요소(Inline elements) : 문장, 단어 같은 작은 부분에 대해서만 적용됩니다. 항상 블록 레벨 요소내에 포함되어 있습니다.
    • <a>, <em>, <strong>

empty elements

<img> 는 닫는 태그가 없습니다. <img> 태그의 목적은 해당 위치에 이미지를 넣는 것이라 닫는 태그가 컨텐츠를 감싸지 않아도 됩니다.

1
<img src="https://skyksit.com/images/logo.png" alt="skyksit.com logo">

속성 (Attributes)

요소는 속성을 가질 수 있습니다.
HTML Attribute

속성의 필수요소

  • 요소 이름 과 속성 사이에 공백 이 있어야 합니다.
  • 속성 이름 뒤에는 등호 = 가 와야 합니다.
  • 속성 값의 앞 뒤에 열고 닫는 인용부호 " 또는 '가 있어야 합니다.

참 거짓 속성 (Boolean attributes)

disabled 속성으로 비활성화 시킬 수 있습니다.

HTML 기본 구조 분석

HTML 에디터

기본적인 HTML 작성을 위해서 editor 가 필요합니다
PC 설치용은 VSCODE, 온라인 에디터는 jsfiddle 과 codepen 을 추천합니다

  • 설치형 : VSCODE
  • 온라인에디터
    • jsfiddle
    • codepen

구조분석

  • <!DOCTYPE html> — doctype. html 문서라는 걸 선언하는 용도, WEB 초기 시절에는 의미가 있었으나 지금은 의미없이 그냥 쓰입니다.
  • <html></html> — 페이지 전체의 컨텐츠를 감싸며, 루트(root) 라고도 합니다.
  • <head></head> — 검색 결과에 표시되길 원하는 페이지 설명, 컨텐츠를 꾸미기 위한 CSS, 문자 집합 선언 등과 같은 것들이 포함됩니다.
  • <meta charset="utf-8"> — 문서가 사용해야 할 문자 집합을 utf-8으로 설정합니다
  • <title></title> — 페이지의 제목을 설정, 브라우저의 탭에 이 제목이 표시됩니다.
  • <body></body> — 페이지에 방문한 웹 사용자들에게 보여주길 원하는 모든 컨텐트를 담고 있으며, 텍스트, 이미지, 비디오, 오디오 등 다른 무엇이든 될 수 있습니다.

Headings

<h1>~<h6> 문서의 헤더를 작성할 때 사용합니다
페이지 내에서 바로가기 기준으로 설정할 때가 많습니다

단락 Paragraphs

<p> 글의 단락을 설정하는 태그 입니다.

이미지 Img

<img> 웹사이트에 이미지를 표현하는 태그 입니다. alt 와 width,height 값을 잘 넣어야 웹 표준에 맞는 사이트가 됩니다. 특히 alt 는 이미지를 대체하는 정보이기 때문에 장애인차별법 관점에서 굉장히 중요한 정보입니다.

목록 List

  • ul : 순서없는 목록
  • ol : 순서있는 목록

<a> anchor 의 약자로 다른 웹페이지로의 연결을 만들어줍니다.

링크는 <a> 태그와 href (hypertext reference) 속성으로 만들어 줍니다.

1
2
3
4
5
6
7
skyksit.com Study 바로가기
<!-- a 태그로 컨텐츠를 감싸주고 -->
<a>skyksit.com Study 바로가기</a>
<!-- href 속성을 추가합니다 -->
<a href="">skyksit.com Study 바로가기</a>
<!-- href 속성에 웹 주소를 넣어줍니다 -->
<a href="https://skyksit.com/study/">skyksit.com Study 바로가기</a>

특수문자 넣기

특수문자는 다음과 같이 입력해야 HTML 에서 제대로 표현이 된다

특수문자 HTML 입력값
< <
> >
“ "
‘ '
& &

주석 Comments

주석은 특수 마커인 <!-- 과 --> 로 주석을 묶어서 표현합니다

1
<!-- 주석을 여기에 작성합니다. -->

연관문서