본문 바로가기
웹/HTML

HTML 웹 살펴보기

by 코낄2 2023. 9. 25.

HTML 언어란?

HTML(Hyper Text Markup Language)는 웹 페이지를 만들기 위한 표준 마크업 언어입니다. Hyper Text 란 웹 페이지에서 다른 페이지로 이동할 수 있는 문장으로 HTML은 해당 기능을 가진 문서를 만드는 언어입니다.

HTML을 사용하여 웹 페이지의 구조와 내용을 정의하며, 웹 브라우저가 이해하고 표시할 수 있는 형식으로 정보를 구성합니다. HTML은 웹 개발의 기초이며, 웹 페이지를 작성하고 디자인하는 데 필수적인 언어입니다. 웹 페이지의 구조와 내용을 정의하고 웹 브라우저에 어떻게 표시되어야 하는지 지시하는 역할을 합니다. 그 외 브라우저 언어에는 디자인을 담당하는 CSS와 동적인 요소를 구현하는 JavaScript가 있습니다.

 

문서를 작성할 수 있는 에디터라면 모두 HTML문서를 작성할 수 있습니다. 하지만 저는 비주얼 스튜디오 코드(Visual Studio Code 또는 VS Code)를 통해 HTML언어를 구현해보겠습니다. 

비주얼 스튜디오 코드는 (무료로 사용할 수 있는) 개발 환경입니다. 프로그래밍 언어를 쉽게 작성하고 수정할 수 있게 도와주며, 다양한 확장 기능을 추가하여 원하는 개발 환경을 만들 수 있습니다. 또한 코드 디버깅, Git 통합, 자동 완성 기능 등을 제공하여 개발 과정을 편리하게 지원합니다. Windows, macOS, Linux에서 사용할 수 있어 다양한 운영 체제에서 활용할 수 있습니다.

https://code.visualstudio.com/

 

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com

1. HTML 언어의 특징

1. 확장명 .html : HTML 문서는 확장명으로 ".html"을 사용하여 저장됩니다.
2. 대소문자 구별 없음 : HTML은 대소문자를 구별하지 않습니다.
3. 띄어쓰기와 줄바꿈 구별 없음: HTML은 공백 문자(스페이스, 탭, 줄 바꿈)을 구별하지 않습니다.
4. 명령어(태그) 형태로 괄호 사용: HTML 요소는 `<태그>`와 `</태그>` 형식으로 나타내며, 여기에 내용이 들어갑니다.
5. 대부분의 태그는 시작과 종료 태그로 구성: 대부분의 HTML 태그는 시작 태그(`<tag>`)와 종료 태그(`</tag>`)로 구성되며, 요소의 범위를 나타냅니다.
6. 속성 값: 속성은 등호(=)로 값을 할당하며, 큰따옴표("")나 작은따옴표('')로 값을 둘러싸야 합니다.
7. 계층 구조: HTML 문서는 요소들의 중첩된 계층 구조로 이루어져 웹 페이지의 구조를 정의합니다.

 

2. 웹사이트 기본 틀

<html>
    <head>
        <title>내 최초의 웹사이트</title>
    </head>
    <body>
        안녕하세요! 코낄이의 최초 웹사이트에 오신걸 환영합니다!<br>
        앞으로 열심히 업데이트 하겠습니다.<br>
        확장 프로그램 설치&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;예정<br>
        &lt;br&gt; : 다음줄로 개행!!!
    </body>
</html>
  • <html> : HTML 문서의 시작과 끝을 감싸는 최상위 요소입니다.
  • <head> : 웹 페이지의 메타데이터를 포함하는 부분으로, 웹 페이지 제목과 같은 정보를 설정합니다. 이곳에 작성한 내용은 실제 웹 페이지에서는 표출되지 않습니다.
  • <title> : 웹 페이지의 제목을 설정하는 태그입니다. 브라우저의 탭에 표시되는 제목을 정의합니다.
  • <body> : 웹 페이지의 실제 내용이 들어가는 부분입니다. 여기에 텍스트, 이미지, 링크 등을 포함할 수 있습니다.

<br> &nbsp, &lt, &gt 와 같은 코드들은 HTML의 특수 태그 입니다.

2. 태그

1. 특수 태그

< :   &lt;     # less than
> :   &gt;    # great than
(공백;띄어쓰기) :  &nbsp;
<br> : 다음줄로 개행
주석 : <!-- 주석을 넣음 -->

 

2. 문단 태그 <p> ~</p>
- 문단을 나타내는 태그 : 한줄을 전부 사용한다.
- 블록 태그

 

3. 제목 태그 <h> ~ </h>
- <h1> ~ <h6>까지의 크기. 숫자가 커질수록 크기 작음
- 블록 태그
- 어차피 css에서 디자인을 하는데 제목 태그를 이용하는 이유
   : 검색엔진에서 제목으로 표현됨!

 

4. 서식 태그
- 기본적인 서식을 작성하는 태그
- <b>, <strong> : 텍스트를 굵게 표현
- <i>, <em> : 기울임체로 표현
- 뒤에 업데이트 된 <strong>,<em> 등은 장애인 분들도 리더기에서 효과를 읽을 수 있음.

 

5. 목록 태그
<ul>, <ol>, <dl>
- <ul>: 순서가 표현되지 않은 목록 태그, 블록 태그

    <ul>
        <li>김사과</li>
        <li>오렌지</li>
        <li>반하나</li>
    </ul>
  • 김사과
  • 오렌지
  • 반하나

- <ol>: 순서가 표현되는 목록 태그, 블록 태그

    <ol>
        <li>김사과</li>
        <li>오렌지</li>
        <li>반하나</li>
    </ol>
  1. 김사과
  2. 오렌지
  3. 반하나

- <dl>: 정의 목록 태그, 블록 태그

    <dl>
        <dt>류정원 선생님</dt>
        <dd>김사과 학생</dd>
        <dd>오렌지 학생</dd>
        <dd>반하나 학생</dd>
    </dl>

류정원 선생님
    김사과 학생
    오렌지 학생
    반하나 학생

✔️Extensions(확장)

라이브서버 설치
라이브 서버를 실행할 HTML 문서에서  ->  Alt 누른 상태로 L과 O 순차적으로 누름.

ctrl +s 로 저장을 할 때마다 웹 페이지에 바로 적용되어 변화를 볼 수 있다.

auto rename

태그의 앞을 바꾸면 뒤가 자동으로 맞춰서 바뀐다.

웹 접근성
- 장애인, 고령자 등이 웹사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이행할 수 있도록 보장.
웹 표준
- 웹에서 표준적으로 사용되는 기술이나 규칙
- W3C가 권고한 표준안에 따라 웹사이트를 작성할 때 이용하는 HTML, CSS, JavaScript등에 대한 규정.

에밋(emmit)
- html, xml, xsl 문서 등을 편집할 때 빠른 코딩을 위해 사용하는 플러그인
- 원래 젠코딩으로 불리다가 에밋으로 이름 변경

dl/dd*3    을 입력하면
<dl>
<dd></dd>
<dd></dd>
<dd></dd>      자동 출력

*** vscode 코드 쉽게 정렬하기

전체선택 : 컨트롤 + a
코드정렬 : 컨트롤 + k + f

> 코드를 가독성 좋게 자동으로 정렬해준다.

'웹 > HTML' 카테고리의 다른 글

HTML(span, div, Semantic 태그)  (0) 2023.10.10
HTML(폼 태그)  (0) 2023.10.08
HTML (테이블 태그)  (0) 2023.10.08
HTML(이미지 태그,하이퍼링크)  (1) 2023.10.08

관련글

티스토리툴바