Study/24-2 GDSC Frontend Session

1주차 - HTML5 태그 부수기

selfdevelop 2024. 9. 26. 20:18

01.html

<!DOCTYPE html>
<html>
  <head>
    <title>페이지의 제목 (브라우저 바에 출력)</title>
    <meta
      name="메타 데이터"
      content=": 다른 데이터(웹페이지)를 설명해주는 데이터"
    />
    <meta name="작성자" content="kim" />
    <meta name="내용" content="html 기본태그" />
    <!--웹 페이지에 사용된 문자의 인코딩 방식 지정-->
    <meta charset="UTF-8" />
  </head>
  <body>
    <h3>문단의 제목 태그: h1 ~ h6</h3>
    <p>문단 태그: p</p>
    <p>paragraph 태그가 끝나면 자동으로 빈 줄이 생긴다</p>
    <hr />
    <p>수평선 태그: hr(닫는 태그가 없다)</p>
    <hr />
    <p>
      줄 변경 태그: br <br />
      첫번째 줄 <br />
      두번째 줄
    </p>
    <p>
      p태그를 사용하면 여러 개의 빈칸은 하나로, 여러 줄은 한 줄로 출력됩니다.
    </p>
    <pre>
        pre태그를 사용하면 입력한 
        그
        대
        로
        출력됩니다.
    </pre>
    <hr />
    <p>
      1) 태그와 속성은 대소문자를 구분하지 않는다. but 리액트X<br />
      2) 속성값은 ""혹은 ''로 묶는다. <br />
      3) 블록태그는 새 라인에서 시작해 브라우저 한 줄을 채우며, 인라인태그는
      블록 태그 안에서 블록태그의 내용을 표현하는데 사용된다<br />
    </p>
  </body>
</html>
페이지의 제목 (브라우저 바에 출력)

문단의 제목 태그: h1 ~ h6

문단 태그: p

paragraph 태그가 끝나면 자동으로 빈 줄이 생긴다

수평선 태그: hr(닫는 태그가 없다)

줄 변경 태그: br
첫번째 줄
두번째 줄

p태그를 사용하면 여러 개의 빈칸은 하나로, 여러 줄은 한 줄로 출력됩니다. 

        pre태그를 사용하면 입력한 
        그
        대
        로
        출력됩니다.

1) 태그와 속성은 대소문자를 구분하지 않는다. but 리액트X
2) 속성값은 ""혹은 ''로 묶는다.
3) 블록태그는 새 라인에서 시작해 브라우저 한 줄을 채우며, 인라인태그는 블록 태그 안에서 블록태그의 내용을 표현하는데 사용된다

 

 

02.html

<!DOCTYPE html>
<html>
  <head>
    <title>html 고급 태그</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <h3>이미지 태그: img(닫는 태그가 없다)</h3>
    <img
      id="cat"
      src="smile_cat.jpg"
      alt="art 속성: 웃는 고양이(이미지를 출력할 수 없는 경우 출력되는 문자열)"
      width="320"
      height="200"
    />
    <hr />
    <h3>목록 태그: ol/ul/dl & li</h3>
    <!--type, start 속성 대신 CSS로 스타일 정의 가능-->
    <h5>과제를 마주한 대학생의 행동요령</h5>
    <ol>
      <li>과제를 본다</li>
      <li>절망한다</li>
      <li>딴짓한다</li>
    </ol>
    <h5>최근에 마신 이화카페 메뉴</h5>
    <ul>
      <li>아이스티노</li>
      <li>오미자에이드</li>
      <li>생바나나라떼</li>
    </ul>
    <h5>용어와 그에 대한 설명</h5>
    <dl>
      <dt>반타이쏘이54</dt>
      <dd>
        서대문구 대현동에 위치한 태국 음식점으로 똠얌쌀국수가 맛도리였으나,
        최근에 맛이 바뀌어 아쉽다.
      </dd>
    </dl>
    <hr />
    <h3>하이퍼링크(다른 html 페이지 연결) 태그: a</h3>
    <ul>
      <li>
        <a href="01.html">클릭하면 01.html로 이동합니다.<br /></a>
      </li>
      <li>
        <a href="https://www.google.co.kr/maps/?hl=ko" target="_blank">
          <img src="google_map.png" />
        </a>
      </li>
    </ul>
    <hr />
    <h4>a태그를 사용해 문서의 특정 위치로 이동하기</h4>
    <a href="#cat">고양이 사진 보기 ^0*0^</a>
    <h4>a태그를 사용해 다운로드 하기</h4>
    <a href="smile_cat.jpg" download>고양아 사진 다운받기^v*v^</a>
    <hr />
    <h3>표 태그, 인라인 프레임, 미디어 삽입은 나중에 공부하자</h3>
  </body>
</html>
html 고급 태그

이미지 태그: img(닫는 태그가 없다)

art 속성: 웃는 고양이(이미지를 출력할 수 없는 경우 출력되는 문자열)

목록 태그: ol/ul/dl & li

과제를 마주한 대학생의 행동요령
  1. 과제를 본다
  2. 절망한다
  3. 딴짓한다
최근에 마신 이화카페 메뉴
  • 아이스티노
  • 오미자에이드
  • 생바나나라떼
용어와 그에 대한 설명
반타이쏘이54
서대문구 대현동에 위치한 태국 음식점으로 똠얌쌀국수가 맛도리였으나, 최근에 맛이 바뀌어 아쉽다.

하이퍼링크(다른 html 페이지 연결) 태그: a

a태그를 사용해 문서의 특정 위치로 이동하기

고양이 사진 보기 ^0*0^

a태그를 사용해 다운로드 하기

고양아 사진 다운받기^v*v^

표 태그, 인라인 프레임, 미디어 삽입은 나중에 공부하자

고양이 사진이 깨지지 않았다면...

 

03.html

<!DOCTYPE html>
<html>
  <head>
    <title>시멘틱 태그를 이용한 문서 구조화</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <header>
      <h1>시멘틱 태그를 복습합시다</h1>
      <nav>
        <ol>
          <li><a href="#defi">시멘틱 태그의 의미와 효과</a></li>
          <li><a href="#type">시멘틱 태그의 종류</a></li>
        </ol>
      </nav>
    </header>
    <section id="defi">
      <h4>시멘틱 태그의 의미와 효과</h4>
      <p>
        의미: 의미적 구조화를 돕는 태그. 기존의 div 태그와 비슷하지만 페이지
        내에서 내용적인 의미를 부여했다.<br />
        효과: 검색 엔진이 인터넷에서 웹 문서를 효과적으로 찾을 수 있다. 장애인
        친화적이다.
      </p>
    </section>
    <section id="type">
      <h4>시멘틱 태그의 종류</h4>
      <ul>
        <li>header: 페이지 제목과 소개 / section or article 내부에도 사용됨</li>
        <li>nav: 페이지 메뉴, 목차, 하이퍼링크</li>
        <li>section: 문서 본문에서 의미적으로 구분되는 절(영역)</li>
        <li>article: 페이지 본문과 독립된 정보</li>
        <li>aside: 페이지 본문 흐름에서 벗어난 정보</li>
        <li>footer: 저자, 저작권 정보</li>
        <li>등...</li>
      </ul>
    </section>
    <article>
      본문 전체를 section으로 묶고 각 절(영역)을 article로 묶을 수도 있다
    </article>
    <footer>
      <p>저자: kim</p>
    </footer>
  </body>
</html>
시멘틱 태그를 이용한 문서 구조화

시멘틱 태그를 복습합시다

시멘틱 태그의 의미와 효과

의미: 의미적 구조화를 돕는 태그. 기존의 div 태그와 비슷하지만 페이지 내에서 내용적인 의미를 부여했다.
효과: 검색 엔진이 인터넷에서 웹 문서를 효과적으로 찾을 수 있다. 장애인 친화적이다.

시멘틱 태그의 종류

  • header: 페이지 제목과 소개 / section or article 내부에도 사용됨
  • nav: 페이지 메뉴, 목차, 하이퍼링크
  • section: 문서 본문에서 의미적으로 구분되는 절(영역)
  • article: 페이지 본문과 독립된 정보
  • aside: 페이지 본문 흐름에서 벗어난 정보
  • footer: 저자, 저작권 정보
  • 등...
본문 전체를 section으로 묶고 각 절(영역)을 article로 묶을 수도 있다

저자: kim

 

 

앞으로 해야할 것: form / iframe / table / CSS 기초와 선택자