[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 프론트엔드 8일차

무과장·2023년 6월 13일

html

[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프

목록 보기

7/18

📒배운 것

html이란?

Hyper Text Markup Language
웹 페이지를 만드는 데 사용되는 마크업 언어

html5의 기본 요소

html5의 기본 구조

head 태그

시맨틱 태그

-시멘틱 태그의 장점
1. 검색 엔진 최적화 (SEO): 시멘틱 태그를 사용하면 검색 엔진은 웹 페이지의 콘텐츠와 구조를 더 잘 이해할 수 있다. 따라서 검색 엔진에서 웹 페이지를 더 잘 인덱싱하고 노출시킬 수 있다.

2. 웹 접근성: 시멘틱 태그는 스크린 리더 등 보조 기기를 사용하는 사용자들이 웹 페이지를 이해하고 탐색하는 데 도움을 준다. 시멘틱 태그는 페이지의 구조를 명확하게 표현하므로, 시각적인 정보뿐만 아니라 의미적인 정보도 전달할 수 있다.

3. 코드 가독성과 유지 보수: 시멘틱 태그는 웹 페이지의 구조를 의미적으로 표현하므로, 코드를 읽고 이해하기 쉽다. 또한, 문서의 의미를 더 잘 파악할 수 있으므로 유지 보수가 더 쉬워진다.

4. 모바일 기기 및 다양한 브라우저 호환성: 시멘틱 태그는 모바일 기기에서 웹 페이지를 사용할 때 더 나은 사용자 경험을 제공할 수 있다. 또한, 다양한 브라우저에서 일관된 결과를 보장하며 호환성을 향상시킨다.

5. CSS 스타일링의 용이성: 시멘틱 태그는 의미적으로 구조화되어 있으므로 CSS 스타일링을 적용하기 쉽다. 각 시멘틱 요소는 고유한 의미를 가지고 있으며, 이를 활용하여 스타일링을 더욱 정확하고 일관성 있게 적용할 수 있다.

html5의 기본 태그

html식별자

-ID
하나의 요소에 대해 고유한 식별자를 지정함.
문서 내에서 단 하나의 요소만 ID를 가질 수 있음.

-CLASS
하나 이상의 요소에 대해 같은 식별자를 지정함.
문서 내에서 여러 요소가 동일한 CLASS를 가질 수 있음.

따라서 ID는 단일 요소의 식별에 사용되고, CLASS는 여러 요소의 그룹화 및 스타일링에 사용됨.

실습

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .line{
            border: solid 1px;
        }
    </style>
</head>
<body>
    <h3>1. HTML 제목은 &lt;h1&gt; ~ &lt;h6&gt; 태그로 정의됩니다. <br>
        &lt;h1&gt;은 가장 중요한 제목을 &lt;h6&gt;은 가장 중요하지 않은 제목을 정의합니다:
    </h3>
    <div class="line">
        <h1>This is heading 1</h1>
        <h2>This is heading 2</h2>
        <h3>This is heading 3</h3>
    </div>
    <h3>2. 단락은 &lt;p&gt;태그로 정의됩니다.</h3>
    <div class="line">
        <p>This is paragraph.</p>
        <p>This is another paragraph.</p>
    </div>
    <h3 >3. 링크는 &lt;a&gt;태그로 정의됩니다.</h3>
        <div class="line">
            <a href="https://velog.io/@pooh963">This is my blog</a>
        </div>
     <h3>4. 이미지는 &lt;img&gt;태그로 정의됩니다. 소스 파일(src), 대체 텍스트(alt), 너비 및 높이가 속성으로 제공됩니다:</h3>
     <img class="line" src="두리.jpg" alt="강아지 사진" width="200px" height="250px">
     <h1>장바구니 목록</h1>
     <table>
        <ul>
            <li>사과</li>
            <li>바나나</li>
            <li>딸기</li>
        </ul>
     </table>
     <table>
        <tr>
            <th>과일</th>
            <th>수량</th>
        </tr>
        <tr>
            <td>사과</td>
            <td>10</td>
        </tr>
        <tr>
            <td>바나나</td>
            <td>5</td>
        </tr>
        <tr>
            <td>딸기</td>
            <td>3</td>
        </tr>
     </table>
    <form>
        <label for="name">이름 :</label>
        <input type="text" id="name" name="name" required/><br><br>
        <label for="email">이메일 :</label>
        <input type="text" id="email" name="email" required><br><br>
        <label for="password">비밀번호 :</label>
        <input type="text" id="password" name="password" required><br><br>
        <button type="submit">가입하기</button>
    </form>
</body>
</html>