티스토리 뷰

카테고리 없음

코딩 초보의 웹 첫걸음, HTML 실습으로 만든 나만의 할 일 페이지

퀸도도 2025. 5. 25. 23:53

목차



    반응형

    VSCode에 작성한 코드

     

    처음 배우는 HTML, 실습으로 직접 웹페이지를 만드는 과정은 두려움보다 흥미로웠습니다
    VSCode로 구조를 잡고 태그를 사용해 콘텐츠를 표현하는 재미가 생각보다 컸습니다
    이 글에서는 HTML 입문 실습 과정을 통해 어떤 내용을 배우고 구현했는지를 정리합니다

     

    HTML을 처음 배우는 사람도 쉽게 따라할 수 있을까요?

     

    코딩을 처음 접하는 사람에게도 HTML은 가장 기초적이고 직관적인 언어입니다
    웹의 구조를 담당하는 HTML은 몇 가지 태그만 알아도 간단한 문서 작성을 할 수 있으며
    실제 결과가 브라우저에 바로 나타나는 만큼 즉각적인 피드백이 가능하다는 점에서
    학습 효과도 매우 큽니다

     

    이번 실습은 “오늘의 할 일” 페이지 만들기였으며
    목표는 HTML의 구조와 주요 태그를 익히는 것이었습니다

     

    HTML 문서의 핵심 구조를 이해하는 첫 걸음

     

    HTML 문서의 구성은 정해진 틀을 따릅니다
    문서의 시작은 항상 <!DOCTYPE html>로 선언하며 그 아래에
    <html>, <head>, <body> 세 가지 영역이 포함됩니다

    • <head>는 문서 제목, 문자 인코딩, 외부 파일 연결 등을 설정하는 영역입니다
    • <body>는 실제로 브라우저에 보여지는 콘텐츠가 들어가는 구역입니다

    실습에서는 <title>을 설정하여 브라우저 탭에 문서 제목이 보이도록 구성했습니다

     

    시각적으로 중심을 잡아주는 제목과 링크 태그

     

    HTML에서 가장 눈에 띄는 부분은 바로 제목입니다
    <h1> 태그는 문서에서 가장 중요한 제목을 표시하며
    그 안에 <a> 태그를 넣어 하이퍼링크도 추가할 수 있습니다

     

    <h1>
  <a href="https://ozcodingschool.com/" style="color: purple;">오늘의 할 일</a>
</h1>

     

    이 코드는 '오늘의 할 일'이라는 텍스트를 보라색 링크로 표시하며
    클릭 시 지정한 웹사이트로 이동하게 만듭니다

     

    할 일 정리는 리스트 태그로 깔끔하게 표현

     

    할 일을 정리할 때는 <ul>(순서 없는 리스트)와 <li>(리스트 항목)를 사용합니다

    <ul>
  <li>HTML 예습하기</li>
  <li>MDN 사이트 접속하기</li>
  <li>w3school 사이트 접속하기</li>
  <li>실습 도전하기</li>
</ul>

     

    이런 구조는 웹 콘텐츠를 명확하고 구조적으로 정리하는 데 매우 유용합니다
    사용자 입장에서 읽기도 편하고, 코딩 구조도 깔끔하게 유지할 수 있습니다

     

    태그와 요소의 관계, 계층적 구조 익히기

     

    HTML은 계층적인 구조를 가지며, 이는 태그의 중첩으로 표현됩니다
    예를 들어 <body>는 <h1>, <ul> 등을 포함하는 부모 요소이고
    각 <li>는 <ul> 안에 포함되는 자식 요소입니다

    이러한 관계를 이해하면 웹페이지의 논리적 흐름을 더 잘 파악할 수 있습니다

     

    태그 종류 역할 설명

    <html> 전체 HTML 문서 시작
    <head> 문서 정보 포함
    <body> 콘텐츠 영역

     

    실습 결과물 확인: 코드 작성과 브라우저 출력 비교

     

    실제 코드를 작성한 뒤, 브라우저에서 확인하면 결과가 어떻게 나오는지 바로 확인할 수 있습니다

    작성한 HTML 코드를 VSCode에서 저장하고 실행했을 때
    브라우저에 깔끔하게 리스트가 출력되었고, 링크도 정상 작동했습니다

    항목 확인 내용

    문서 제목 HTML 이론학습
    링크 작동 여부 오즈코딩스쿨 정상 연결
    리스트 출력 4개 항목 모두 표시

     

    직접 해보는 경험이 주는 이해력 상승 효과

     

    단순히 태그를 외우는 것보다
    직접 코드를 작성하면서 결과를 눈으로 확인하는 경험이
    훨씬 빠른 이해와 기억을 가능하게 해줍니다

     

    HTML은 초보자도 성공 체험을 빠르게 할 수 있는 언어이기 때문에
    코딩에 대한 두려움을 줄이는 데 매우 좋은 출발점이 됩니다

     

    HTML 실습의 결론 – 직접 만들어봐야 이해되는 언어

     

    HTML은 글자 하나하나가 웹페이지의 뼈대를 만드는 기본 재료입니다
    기초 태그만으로도 충분히 의미 있는 결과물을 만들 수 있으며
    실습을 통해 직접 만드는 과정은 이론보다 훨씬 강력한 학습 효과를 줍니다

     

    "오늘의 할 일" 웹페이지는 단순한 실습이지만
    그 안에서 구조 이해, 태그 활용, 하이퍼링크 삽입 등
    다양한 HTML의 기능을 경험할 수 있었던 소중한 기회였습니다

     

    HTML, 직접 실습하는 것만큼 효과적인 학습 방법은 없습니다
    오늘은 HTML, 내일은 CSS와 자바스크립트까지, 코딩 여정을 한 걸음씩 시작해보세요

    반응형