Lee Hyun Ji

🌠공부기록 보관소

  • 📜 전체 글 수 210개

    • TIL

    👀Today I Learn

    1. HTML

    • HTML은 웹페이지의 구조를 정의하는 마크업 언어
    • 모든 HTML 문서는 태그(tag)를 사용하여 콘텐츠를 구조화
    • 태그는 보통 <와 >로 감싸여 있으며, 열고 닫는 형태로 사용됨


    HTML 문서의 기본 구조

    • HTML 문서는 아래와 같은 기본 구조를 가짐
    <!DOCTYPE html> <!-- HTML5 문서임을 선언 -->
<html lang="ko"> <!-- 언어 설정 -->
<head>
    <meta charset="UTF-8"> <!-- 문서의 문자 인코딩 설정 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 반응형 웹 설정 -->
    <title>문서 제목</title> <!-- 브라우저 탭에 표시될 제목 -->
</head>
<body>
    <!-- 본문 내용 -->
    <h1>HTML 기초 문법</h1>
    <p>HTML은 HyperText Markup Language의 약자입니다.</p>
</body>
</html>


    2. 주요 태그

    제목 태그

    • 제목을 표시할 때 사용
    • <h1>은 가장 큰 제목, <h6>은 가장 작은 제목
    <h1>제목 1</h1>
<h2>제목 2</h2>
<h3>제목 3</h3>

    제목 1

    제목 2

    제목 3

    문단 태그

    • 문단을 작성할 때 사용
    <p>이것은 문단입니다.</p>
<p>HTML은 간단한 마크업 언어입니다.</p>

    이것은 문단입니다.

    HTML은 간단한 마크업 언어입니다.

    리스트 태그

    • 순서 없는 리스트 : <ul>과 <li>사용
    <ul>
    <li>사과</li>
    <li>바나나</li>
    <li>체리</li>
</ul>
    • 사과
    • 바나나
    • 체리
    • 순서 있는 리스트 : <ol>과 <li> 사용
    <ol>
    <li>첫 번째</li>
    <li>두 번째</li>
    <li>세 번째</li>
</ol>
    1. 첫 번째
    2. 두 번째
    3. 세 번째

    링크 태그

    • 링크를 생성할 때 <a> 태그를 사용
      • href: 링크 주소
      • target="_blank": 새 탭에서 열기
    <a href="https://www.google.com" target="_blank">구글로 이동</a>

    구글로 이동

    이미지 태그

    • 이미지를 삽입할 때 태그를 사용
      • src: 이미지 경로
      • alt: 이미지가 로드되지 않을 때 표시할 텍스트
      • width/height: 이미지 크기 조절
    <img src="image.jpg" alt="이미지 설명" width="300">

    강조 태그

    • 텍스트를 강조하거나 스타일을 추가할 때 사용
    <strong>굵게 표시</strong>
<em>기울임 표시</em>
<u>밑줄 표시</u>

    굵게 표시 기울임 표시 밑줄 표시


    3. HTML 속성 (Attributes)

    • HTML 태그에는 속성을 추가하여 태그의 동작이나 스타일을 정의할 수 있음
    • 속성은 속성이름="값" 형식으로 작성
    <a href="https://www.example.com" target="_blank">링크</a>
<img src="logo.png" alt="로고 이미지">


    4. 주석

    • HTML에서 주석은 <!--와 --> 사이에 작성
    • 브라우저에 표시되지 않음
    <!-- 이 부분은 주석입니다 -->


    5. 폼 태그

    • 사용자로부터 데이터를 입력받을 때 사용
      • action: 데이터를 보낼 URL
      • method: 데이터 전송 방식 (GET 또는 POST)
    <form action="/submit" method="post">
    <label for="name">이름:</label>
    <input type="text" id="name" name="name">
    <button type="submit">제출</button>
</form>


    6. 표(Table) 태그

    • 데이터를 표로 정리할 때 사용
      • <table>: 표 생성
      • <tr>: 행(Row)
      • <th>: 제목 셀
      • <td>: 데이터 셀
    <table border="1">
    <tr>
        <th>이름</th>
        <th>나이</th>
        <th>직업</th>
    </tr>
    <tr>
        <td>홍길동</td>
        <td>25</td>
        <td>개발자</td>
    </tr>
</table>
    이름 나이 직업
    홍길동 25 개발자


    7. HTML5 추가 요소

    • 시맨틱 태그: 문서 구조를 명확히 함
      • <header>: 머리말
      • <nav>: 내비게이션
      • <section>: 섹션
      • <article>: 독립적인 콘텐츠
      • <footer>: 바닥글
    • 미디어 태그:
      • <audio>: 오디오 삽입
      • <video>: 비디오 삽입


    더 필요한 내용은 HTML 공식 문서 참고!



    💡Today I Thought

    오늘의 체크리스트

    • 알고리즘 코드카타 121-130
    • SQL 코드카타 64
    • 백준 코딩테스트 1문제
    • TIL 작성

    회고

      장고를 하면서 HTML 문법을 잘 모르겠어서 정리! 두고두고 보면서 웹페이지 잘 만들어봐야지!

    댓글남기기

    참고