민혁이의 IT스토리

[혼자 공부해서 개발까지 ] Part1- 웹 개발의 첫걸음, HTML이란? 본문

혼자 공부해서 개발까지/HTML

[혼자 공부해서 개발까지 ] Part1- 웹 개발의 첫걸음, HTML이란?

FE_Minhyuk 2025. 1. 18. 12:00

 

HTML이란?

 

HTML은 HyperText Markup Language의 약자입니다.

  • HyperText: 다른 문서나 웹 페이지로 연결되는 "텍스트 링크"를 의미합니다. 예를 들어, 링크를 클릭하면 다른 페이지로 이동하는 기능을 가리킵니다.
  • Markup: 마크업은 문서 내의 구조나 내용을 정의하는 방법을 의미합니다. 즉, HTML 태그를 사용하여 웹 페이지의 구조를 정의하는 방식입니다.
  • Language: 웹 페이지를 만들 때 사용하는 규칙과 문법을 가지고 있는 프로그래밍 언어의 한 종류입니다.

 

위에 내용을 정리하면 HTML은 웹페이지를 만들기 위해 필요한 요소들을 태그로 정의하여 사용하는 언어라고 생각하면 됩니다😊

 

태그 설명

목차

  • 기본 태그란?
  • 문단과 텍스트 태그
    1. p태그
    2. span 태그
    3. h1 ~ h6태그 
  • 이미지 삽입과 하이퍼링크 생성
    1. a태그 
    2. img태그 
  • 마무리

 

 

1-1 기본 태그

 

HTML의 기본 태그는 웹 페이지를 구성하는 데 필요한 필수적인 구조와 요소들을 포함하는 태그들입니다.  그중에서 필수로 세팅되는 기본 태그들을 소개하도록 하겠습니다.

  • <html>:  모든 HTML 페이지의 최상위 태그이다.
  • <head>: 문서의 메타데이터가 포함된 부분으로 문서의 스타일, 제목, 문자셋
  • <title>:  이 태그는  head 태그 안에 들어가는 태그로, 페이지의 제목을 설정하며, 브라우저 탭에 표시됨.
  • <meta>: 문서의 메타 정보를 설정하는 태그입니다. 주로 문자 인코딩(사람의 언어를 컴퓨터 언어로 바꾸는 작업), 작성자 정보 등을 정의할 때 사용됩니다.
  • <body>: 웹 페이지의 본문을 포함하는 태그, 사용자에게 보여지는 실제 내용.

 

예시 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

 

 

 

웹페이지에는 아래와 같이 보여집니다.(body태그 안에 작성된 코드가 없기 때문에 빈 웹페이지가 보여집니다).

 

1-2 문단과 텍스트 태그

문다과 텍스트는 웹페이지를 만들때 빠지면 안되는 중요한 요소중 하나 입니다. 지금부터 그 요소를 어떻게 웹 페이지를 보여줄 수 있을지 알아볼까요?

 

  • 첫 번째  <p> : p태그는 text 문단 단위로  구분해주는 태그입니다. 

예시 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>안녕</p>
    <p>나는 p태그</p>
</body>
</html>

 

 

웹페이지에는 아래와 같이 보여집니다.

 

 

 

  • 두 번째 <span> : 인라인 요소로, 주로 테스트를 강조할 때 사용됩니다.


    사용은 아래와 같이 합니다. 여기서 주의:style은 지금 신경 쓰지 않습니다
    아래와 같이 보여집니다.

 

 

  • 세 번째 <h1> ~ <h6> : 제목 태그, 각각 중요한 제목에서 덜 중요한 제목으로 계층을 이루는 태그들 입니다.
    폰트 사이지는 아래와 같습니다.

    <h1> :  32px
    <h2> : 24px
    <h3> : 19px
    <h4> : 16px
    <h5> : 12px
    <h6> : 10px


    참고로 HTML기본 폰트 사이즈는 16px 입니다😊

예시 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>나는 h1태그</h1>
    <h2>나는 h2태그</h2>
    <h3>나는 h3태그</h3>
    <h4>나는 h4태그</h4>
    <h5>나는 h5태그</h5>
    <h6>나는 h6태그</h6>
</body>
</html>

 

 

웹페이지 실행화면

 

 

1-3  이미지 삽입과 하이퍼링크 생성

여러 웹사이트를 구경하다 보면 특정 텍스트나 이미지를 클릭했을 때 다른 화면으로 이동하는 경험 한 번쯤 있을 것이라고 생각 됩니다.  지금부터 이미지를 넣는 방법과 하이퍼 링크를 생성하는 방법을 배우도록 하겠습니다. 

 

<img> 태그 : 이미지를 삽입하는 태그로  src 속성을 통해 이미지 위치를 지정할 수 있습니다. 
                        <img> 에는 src="이미지의 경로" 와  alt="이미지의 이름"을 설정할 수 있습니다.

 

예시 코드

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<img src="./image.png" alt="고양이">
<img src="./image222.png" alt="고양이">
</body>
</html>

 

 

웹사이트 실행화면

 

경로가 틀리면 alt에 썼던 글이 대신해서 이미지를 알려줍니다.

 

 

 

<a>태그 : 하이퍼링크를 생성하는 태그로 다른 페이지나 URL로 연결이 가능한 태그 입니다.

 

<a>태그 주요 속성

  1.  href : 파일 경로를 지정합니다..
  2.  target : 링크를 클릭했을 때 새 창이나 같은 창에서 열릴지 여부를 결정합니다.
    target 종류
        _blank: 링크를 새로운 탭이나 새 창에서 엽니다.
        _self: 현재 창이나 탭에서 열립니다. (기본값)
        _parent: 부모 프레임에서 링크를 엽니다.
        _top: 전체 창에서 링크를 엽니다.

 

사용 방법은 간단합니다. a태그 안에  테스트나 이미지를  넣어주면 끝입니다.

 

예시 코드

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p><a href="https://www.naver.com/">네이버로 이동</a></p>
    <p><a href="https://www.google.co.kr/">구글로 이동</a></p>
</body>
</html>

 

 

실행결과

 

네이버로 이동

구글로 이동

 

이제 내가 원하는 사이트에 쉽게 이동하게 만들 수 있겠죠?

 

 

 

마무리

 

HTMl에는 오늘 설명한 태그 이외에도 더 많은 코드가 있습니다. 하나의 part에 다 끝내기에는 너무 많은 양이라 두개로 나누어서 설명하려 합니다. 더 많은 태그가 궁금하시면 다음 part를 참고해주세요!!  이상으로
[혼자 공부해서 개발까지] part-1을 끝내도록 하겠습니다. 감사합니다😁

'혼자 공부해서 개발까지 > HTML' 카테고리의 다른 글

[혼자 공부해서 개발까지 ] Part4 - Layout과 구조태그 개념 이해하기  (4) 2025.02.08
[혼자 공부해서 개발까지] part3 - HTML 입력과 버튼 태그의 기초  (4) 2025.02.01
[혼자 공부해서 개발까지]part2 - 웹을 이루는 작은 조각, HTML 태그  (1) 2025.01.25
'혼자 공부해서 개발까지/HTML' Related Articles more