Notice
Recent Posts
Link
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Tags more
Archives
관리 메뉴

공부기록용

HTML 기초 01 본문

📚강의록📚/유노코딩)HTML

HTML 기초 01

과부하가즈아 2023. 4. 13. 15:40

HTML(Hyper Text Markup Language)

  • 하어퍼 텍스트와 콘텐츠를 표시해주는 언어 (웹브라우저를 통해 표시되는 웹페이지의 콘텐츠를 정의하기 위해 사용하는 언어) 웹페이지의 콘텐츠를 정의하기 위해 사용하는 언어로 HTML코드로 웹페이지에 어떤 내용이 표시될지 정의한 HTML 문서를 만든다. 완성된 HTML코드를 웹브라우저에서 로딩하면 웹페이지가 만들어지고 HTML 코드가 웹브라우저를 통해 해석되고 표현되는 과정을 렌더링이라고 한다.

  • HTML파일의 확장자는 .html 또는 .html 이다. (간단히 내용을 수정할때는 텍스트 편집기/메모장 로 편집해도 되며, 웹페이지에 구현되는 걸 확인하고 싶다면 웹브라우저로 열면된다.)
  • HTML 언어를 목적에 맞게 사용하기 위해서는 HTML의 문법에 맞는 표현을 사용해야 한다. HTML의 문법은 딱 한가지, 태그(tag)만 기억하면 된다.

 

태그(tag)란,

  • HTML 코드에서 정보(콘텐츠)를 정의하고 표현하는 형식
  • <>와 </> 기호를 사용해 콘텐츠의 시작과 끝을 표시
  • 각 태그는 콘텐츠를 감싸며, 태그명은 콘텐츠의 성격과 의미를 나타
  • <태그명> 여기에 콘텐츠 기입 </태그명>
  • BUT, 경우에 따라 시작과 끝을 구분할 필요가 없는 태그도 존재한다. 이를 단일 태그라고 하며, 단일 태그의 형식은 <태그명/> 또는 <태그명> 만으로 나타낸다.(콘텐츠를 감쌀 필요가 없으므로 시작과 끝을 구분하지 않는다.)

속성,

  • 태그의 부가적인 기능을 정의하는 것으로 선택사항이다.
  • 시작 태그 내부에 정의, 속성의 개수에는 제한이 없다.
  • <태그명 속성값=”속성값”>내용</태그명>
  • <태그명/>또는<태그명>, (태그명과 속성의 정의는 공백으로 구분하며, 큰 따옴표 " "를 사용)

주석,

  • 사람에게는 보이지만, 컴퓨터(웹브라우저)에게는 보이지 않는 코드이다. (주로 코드에 대한 메모를 남기기 위한 용도로 사용)
  • 형식이 다르긴 하나, 주석 또한 기호를 통해 시작과 끝을 구분한다.
<!-- 주석처리할 내용내용내용 -->

 

HTML의 구성

html 문서의 기본구조

<!DOCTYPE html>       
<html>
  <head>
    <meta charset="utf-8">
    <title>문서의 제목을 쓰는 곳</title>
  </head>
  <body>
    브라우저 화면에 표시할 내용을 작성하는 곳
  </body>
</html>

 

구조의 설명

<!DOCTYPE html>
  • 문서의 첫 부분에서 문서의 유형을 지정하는 단일 태그이다.

문서 유형이란, 웹 브라우저에게 ‘이 문서는 ---니까 잘 처리해줘’라는 메시지를 전달하는 것이다.(HTML은 첫 등장 후 시간이 흐르면서 버전 변경을 해왔는데, 현재 표준으로 사용되고 있는 HTML 버전을 사용하기 위해 적어주는 타입이 바로 ‘html’이다.) 특별한 경우가 아니라면 이전에 사용하던 HTML 버전에 대해서는 몰라도 된다.

 

<html> </html>
  • 문서 유형을 지정한 후 실제 문서가 시작되고 끝나는 것을 나타내는 태그이다.

이 태그의 내부에 다양한 태그들이 포함되어 문서의 내용을 구성한다.

 

<head>  </head>
  • 현재 이 html 문서에 대한 정보를 나타내는 역할을 한다.

html 문서에 대한 설정 태그로써, 웹 브라우저 화면에는 보이지 않지만 웹 브라우저가 알아야 할 정보들은 모두 이 태그에 들어간다.

 

<meta charset="utf-8">
  • 문자 인코딩 및 문서 키워드 등에 대한 요약 정보를 기입하는 단일 태그이다.

문자 인코딩이란, 한글을 표시하기 위해 문자 세트를 지정하는 작업이다. 영문과 한글을 모두 사용하기 위해 utf-8이라는 문자 인코딩 방식을 사용하는 것이 좋다.

 

<title>문서의 제목을 쓰는 곳</title>
  • 문서의 제목을 나타낸다.

콘텐츠(내용)는 브라우저 탭에 표시된다.

 

<body>  </body>
  • 실제 브라우저 화면에 표시될 내용을 입력하는 태그이다.

기본 문서 구조를 통해 확인했듯, 태그 안에 태그를 포함하는 방식으로 콘텐츠를 다양하게 구성할 수 있다.

 

+텍스트를 표시하는 태그
+이미지를 표시하는 태그
+각종 사용자 인터페이스(버튼, 입력란, 드롭다운 메뉴 등)를 나타내는 태그 등등

 

 

 

출처 : https://www.youtube.com/@uknowcoding

 

'📚강의록📚 > 유노코딩)HTML' 카테고리의 다른 글

HTML 기초 04  (0) 2023.04.13
HTML 기초 03  (0) 2023.04.13
HTML 기초 02  (0) 2023.04.13
'📚강의록📚/유노코딩)HTML' Related Articles more
Comments