Notice
Recent Posts
Recent Comments
Link
«   2025/05   »
일 월 화 수 목 금 토
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 31
Tags
more
Archives
Today
Total
관리 메뉴

누에나방애벌레

웹 개발 기초 1 : HTML 본문

공부/web

웹 개발 기초 1 : HTML

명석 2024. 7. 20. 09:41

HTML(HyperText Markup Language)은 웹 페이지를 구조화하는 기본적인 언어입니다. HTML은 웹 페이지의 내용을 정의하고, CSS와 JavaScript와 함께 웹 개발의 핵심 요소로 자리 잡고 있습니다. 이 포스트에서는 HTML의 기본 요소와 태그의 사용 목적, 속성의 차이점, 그리고 현대 웹 개발에서의 모범 사례에 대해 다루겠습니다.

HTML의 기본 구조

  1. 문서 구조:
    • HTML 문서는 <html> 태그로 시작하고 끝나며, 두 개의 주요 섹션으로 나뉩니다: <head>와 <body>.
    <!DOCTYPE html>
<html>
<head>
    <title>문서 제목</title>
</head>
<body>
    <h1>제목</h1>
    <p>문서 내용</p>
</body>
</html>
    • <head>: 문서의 메타데이터를 포함하며, <title>, <meta>, <link>, <style> 등의 태그가 포함됩니다.
    • <body>: 웹 페이지의 실제 내용을 포함하며, 제목, 단락, 링크, 이미지 등 다양한 요소가 포함됩니다.
  2. 주요 태그 및 사용 이유:
    • 제목 태그 (<h1>, <h2>, ..., <h6>): 페이지의 제목을 정의합니다. SEO(검색엔진 최적화)와 페이지의 구조를 명확히 하는 데 사용됩니다.
      • 예: <h1>최상위 제목</h1>, <h2>하위 제목</h2>.
    • 단락 태그 (<p>): 단락을 정의합니다.
      • 예: <p>여기에 단락 내용이 들어갑니다.</p>.
    • 줄바꿈 태그 (<br>): 줄바꿈을 삽입합니다. 텍스트의 흐름을 조절할 때 사용됩니다.
      • 예: 첫 번째 줄<br>두 번째 줄.
  3. 리스트 태그:
    • 순서 없는 리스트 (<ul>) 와 순서 있는 리스트 (<ol>):
      • <ul>: 항목이 순서가 없는 리스트입니다. 
        <ul>
    <li>리스트 항목 1</li>
    <li>리스트 항목 2</li>
</ul>
      • <ol>: 항목이 순서가 있는 리스트입니다. 
        <ol>
    <li>첫 번째 항목</li>
    <li>두 번째 항목</li>
</ol>
  4. 속성과 요소:
    • 속성 (Attributes):
      • HTML 요소에 추가 정보를 제공하는 부분입니다. 예를 들어, 링크에서 href는 링크의 URL을 지정합니다.
    • 프로퍼티 (Properties):
      • JavaScript와 CSS에서 HTML 요소의 상태를 조작할 때 사용됩니다.
    • 요소 (Elements):
      • HTML 문서 내에서 특정 기능이나 정보를 제공하는 태그입니다. 예를 들어, <img>는 이미지를 삽입하는 태그입니다.
  5. 링크와 폼:
    • 링크 (<a>): 웹 페이지나 다른 리소스에 연결합니다. 
      <a href="https://example.com">Example 사이트</a>
    • 폼 (<form>): 사용자 입력을 받기 위한 폼을 정의합니다 
      <form action="/submit" method="post">
    <input type="text" name="username" placeholder="사용자 이름">
    <input type="submit" value="제출">
</form>
  6. 입력 필드 (<input>):
    • 타입 지정:
      • type="text", type="password", type="radio" 등 다양한 입력 타입을 정의합니다.
      <input type="text" name="name">
<input type="password" name="password">
<input type="radio" name="group" value="option1">옵션 1
    • <label>: 입력 필드에 레이블을 추가하여 사용자 인터페이스를 향상시킵니다. 
      <label for="username">사용자 이름:</label>
<input type="text" id="username" name="username">
    • <placeholder>: 입력 필드에 힌트를 제공합니다. 
      <input type="text" placeholder="이름을 입력하세요">
  7. 셀렉트 박스 (<select>):
    • 옵션 (<option>): 선택 가능한 항목을 정의합니다. 
      <select name="options">
    <option value="1" selected>옵션 1</option>
    <option value="2">옵션 2</option>
</select>
  8. <iframe>:
    • 보안 문제로 인해 가능한 한 사용을 지양합니다. 보안상의 이유로 웹 페이지에 다른 웹 페이지를 포함할 때는 대안 기술을 사용하는 것이 좋습니다. 
      <iframe src="https://www.youtube.com/embed/example" width="560" height="315"></iframe>
  9. <div>와 <span>:
    • <div>: 블록 레벨 요소로, 줄바꿈이 발생합니다. 주로 레이아웃을 구성할 때 사용됩니다. 
      <div>여기에는 블록 레벨 내용이 포함됩니다.</div>
    • <span>: 인라인 요소로, 줄바꿈 없이 내용이 표시됩니다. 주로 텍스트의 일부를 스타일링할 때 사용됩니다. 
      <span>여기에는 인라인 내용이 포함됩니다.</span>
  10. 이미지 (<img>):
    • 속도 최적화: 이미지의 height와 width를 설정하여 페이지 로딩 속도를 개선할 수 있습니다. 
      <img src="image.jpg" height="200" width="300" alt="설명">

HTML 모범 사례

  1. 시멘틱 태그 사용:
    • <header>, <footer>, <article>, <section> 등 시멘틱 태그를 사용하여 문서 구조를 명확히 하고, 검색 엔진 최적화(SEO)를 개선합니다. 
      <header>
    <h1>웹사이트 제목</h1>
</header>
<section>
    <h2>섹션 제목</h2>
    <p>섹션 내용</p>
</section>
<footer>
    <p>저작권 정보</p>
</footer>
  2. 접근성 고려:
    • alt 속성을 사용하여 이미지의 대체 텍스트를 제공하고, 웹 접근성을 개선합니다. 
      <img src="image.jpg" alt="이미지 설명">
  3. 유효한 HTML 작성:
    • HTML5 표준을 준수하여 유효한 HTML 문서를 작성하고, 브라우저 호환성 문제를 줄입니다.

이 포스트에서는 HTML의 기본 구조와 태그, 속성, 그리고 현대 웹 개발에서의 모범 사례를 다루었습니다. HTML의 올바른 사용은 웹 페이지의 접근성, SEO, 그리고 사용자 경험을 개선하는 데 중요한 역할을 합니다.

'공부 > web' 카테고리의 다른 글

HTTP & RESTful API  (0) 2024.08.14
DOM 제어 및 이벤트 처리  (0) 2024.07.26
웹 개발 기초 3 : JavaScript (2)  (0) 2024.07.20
웹 개발 기초 3 : JavaScript (1)  (0) 2024.07.20
웹 개발 기초 2 : CSS  (0) 2024.07.20
'공부/web' Related Articles more