카테고리 없음

HTML과 CSS 기초: 웹 개발의 첫걸음

미미누나야 2025. 5. 21. 12:57

웹사이트를 만들기 위해 가장 먼저 배우는 기술이 바로 HTML과 CSS입니다. HTML은 웹 페이지의 뼈대를 구성하고, CSS는 그 뼈대에 디자인과 스타일을 입혀줍니다. 이 두 기술은 모든 웹 개발의 출발점으로, 코딩을 처음 시작하는 사람이라면 반드시 이해하고 익혀야 할 필수 요소입니다.

HTML이란 무엇인가?

HTML(HyperText Markup Language)은 웹 페이지의 구조를 정의하는 마크업 언어입니다. 텍스트, 이미지, 링크, 표 등 다양한 요소들을 웹 페이지에 배치하는 역할을 하며, 웹 브라우저는 이 HTML 문서를 해석하여 사용자에게 콘텐츠를 보여줍니다.

HTML은 태그(tag)를 기반으로 구성되며, 각 태그는 특정한 의미와 기능을 가지고 있습니다.

<!DOCTYPE html>
<html>
  <head>
    <title>나의 첫 웹페이지</title>
  </head>
  <body>
    <h1>안녕하세요!</h1>
    <p>이것은 나의 첫 HTML 문서입니다.</p>
  </body>
</html>

기본 HTML 태그

  • <h1>~<h6>: 제목(Heading)을 나타냄
  • <p>: 단락(Paragraph)
  • <a href="">: 하이퍼링크
  • <img src="" alt="">: 이미지 삽입
  • <ul>, <ol>, <li>: 리스트
  • <table>, <tr>, <td>: 표 구성

CSS란 무엇인가?

CSS(Cascading Style Sheets)는 HTML 요소에 스타일을 지정하는 언어입니다. 글꼴, 색상, 간격, 위치, 애니메이션 등 디자인 관련 속성을 설정할 수 있습니다. HTML이 '무엇을 보여줄지' 정의한다면, CSS는 '어떻게 보여줄지'를 결정합니다.

p {
  color: blue;
  font-size: 16px;
  line-height: 1.6;
}

CSS 적용 방법

  1. 인라인 스타일: HTML 태그 안에 직접 작성
    <p style="color:red;">빨간색 문장</p>
  2. 내부 스타일시트: <style> 태그 안에 작성
    <style>
  body { background-color: #f5f5f5; }
</style>
  3. 외부 스타일시트: 별도 .css 파일을 불러오기
    <link rel="stylesheet" href="style.css">

HTML + CSS 예제

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
      color: green;
      text-align: center;
    }
    p {
      font-size: 18px;
    }
  </style>
</head>
<body>
  <h1>웹 개발의 시작</h1>
  <p>HTML과 CSS는 프론트엔드의 기초입니다.</p>
</body>
</html>

HTML과 CSS의 관계

HTML이 구조를 만들고, CSS가 그 구조를 꾸미는 방식입니다. 이 둘은 서로 보완적인 관계이며, 웹 디자인에서 함께 사용됩니다. 프론트엔드 개발자는 HTML, CSS, JavaScript를 함께 익히는 것이 일반적입니다.

학습 팁과 추천 자료

웹 개발 입문자가 HTML과 CSS를 배워야 하는 이유

HTML과 CSS는 단지 웹사이트를 만드는 기술이 아니라, 온라인에서 무언가를 '보여주고 전달하는 능력'을 키워주는 기본기입니다. 블로그를 운영하거나, 포트폴리오를 만들거나, 웹디자인을 하려는 모든 사람에게 HTML과 CSS는 필수적인 도구입니다.

맺음말

HTML과 CSS는 웹 개발의 가장 기본이지만, 그 중요성은 아무리 강조해도 지나치지 않습니다. 작은 태그 하나로 페이지의 구조가 바뀌고, 스타일 한 줄로 사용자 경험이 달라지는 마법을 직접 체험해보세요. 시작은 작지만, 그 가능성은 무한합니다.