AI 서비스 기획/개발 코딩

[HTML 1강] 소개, 기본 이론, Elements, Attributes

청함보리 2025. 4. 20. 19:45
반응형

1. HTML (HyperText Markup Language) 이란?

웹페이지를 만드는 표준 마크업 언어로, 프론트엔드 개발의 가장 기본이 되는 언어 중 하나이다.
보통 HTML, CSS, javascript 세 언어와 함께 페이지를 코딩한다.

다른 언어들의 "Hello C world" 처럼, 가장 기본이 되는 문법은 아래와 같다.
------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>
------------------------------------------------------

  • The <!DOCTYPE html> declaration defines that this document is an HTML5 document :
    이 문서는 HTML 문서다 라고 정의하는 선언문. 반드시 최상단에 위치해야 함.
  • The <html> element is the root element of an HTML page
    HTML 페이지의 지붕이라고 할 수 있는 엘리먼트.
  • The <head> element contains meta information about the HTML page
    HTML 페이지의 메타 정보를 포함하는 엘리먼트
  • The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)
    HTML의 제목으로, 브라우저의 타이틀바 또는 페이지탭으로 표시됨.
  • The <body> element defines the document's body, and is a container for all the visible contents, such as headings,
    paragraphs, images, hyperlinks, tables, lists, etc.
    HTML의 모든 시각적 요소들을 포함하는 부분으로, 웹페이지의 몸체 엘리먼트
  • The <h1> element defines a large heading 
    큰 헤드라인을 정의하는 엘리먼트 (My First Heading), h1~h6 갈수록 글자 작아진다.
  • The <p> element defines a paragraph
    문단을 정의하는 엘리먼트 (My First paragraph)

 

- 코딩하면서 실습하는 방법


별도의 Running 프로그램 없이, 메모장(notepad)로 페이지를 확인할 수 있다.
색표시나 컬러감이 없어 밋밋하지만 그래도 별도 프로그램 없이 실행 가능한게 메리트.
"CTRL + U"  :  원하는 페이지의 HTML 페이지를 볼 수 있다.

 

2. HTML Basic Attributes ( 기본 어트리뷰트 )

<a> : HTML 링크를 선언할때 사용하는 태그.
href 어트리뷰트로 링크를 구체화한다.  어트리뷰트는 HTML 요소 중 추가적인 정보를 포함함.
<a href="https://www.w3schools.com">This is a link</a>

<img> : 이미지를 정의하는 태그.
 - Source file (src), alternative text (alt), 'width', 'height' 어트리뷰트 포함.
 - src : Absolute URL 또는 Relative URL.
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
- art : <img>의 태그.

<br>  :  line break, 엔터라 보면 된다
<p>This is a <br> paragraph with a line break.</p>

<html> Defines the root of an HTML document
<body> Defines the document's body
<h1> to <h6> Defines HTML headings


- style 어트리뷰트 : color, font, size 등의 스타일 요소를 더할때 사용.
<p style="color:red;">This is a red paragraph.</p>

- lang 어트리뷰트 : <html> 태그 안에 항상 있어야 함. 웹페이지의 언어를 설정
<html lang="en"> or <html lang="en-US">

- title 어트리뷰트 : 엘리먼트의 추가정보 정의 시 사용. 마우스 올리면 표시
<p title="I'm a tooltip">This is a paragraph.</p>

- Quote Attribute Values ( " " )

Good: <a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>

Bad:    <a href=https://www.w3schools.com/html/>Visit our HTML tutorial</a>

 

Chapter Summary ( https://www.w3schools.com/ )

  • All HTML elements can have attributes
  • The href attribute of <a> specifies the URL of the page the link goes to
  • The src attribute of <img> specifies the path to the image to be displayed
  • The width and height attributes of <img> provide size information for images
  • The alt attribute of <img> provides an alternate text for an image
  • The style attribute is used to add styles to an element, such as color, font, size, and more
  • The lang attribute of the <html> tag declares the language of the Web page
  • The title attribute defines some extra information about an element

반응형