[HTML/CSS] 기본구조/서식

ㅁHTML

• < !DOCTYPE html > : 현재 문서가 HTML5언어로 작성된 웹문서
• < html > ~ < /html > : 웹문서의 시작과 끝
• < head > ~ < /head > : 웹 브라우저가 웹 문서를 해석하기 위해 필요한 정보들을 입력하는 부분으로 style, script, meta등 표시
• < meta > : 문자, 인코딩, 문서 키워드, 문서 요약 정보 표시
• < body > ~ < /body > : 실제 웹 브라우저 화면에 표시되는 내용
• < !– 주석내용 –>

  ㅁ텍스트 서식

• < P > : 단락 만들기
• < br > : 줄 바꿈 / < hr > : 수평선 삽입
• < b >< strong> : 굵게표시 굵은 글씨, 굵고 중요한 글씨

  <b>굵은 글씨</b>, <strong>굵고 중요한 글씨</strong>
  

• < s >< del > : 취소선

그냥 취소선

, 읽히지 않는 취소선

<s>그냥 취소선</s>, <del>읽히지 않는 취소선</del>

• < i >< em > : 기울림체 그냥 기울어진 글씨, 기울어진 중요한 글씨

  <i>그냥 기울어진 글씨</i>, <em>기울어진 중요한 글씨</em>
  

• < u >< ins > : 밑줄 표시 밑줄 글씨, 추가된 내용 표시

  <u>밑줄 글씨</u>, <ins>추가된 내용 표시</ins>
  

• < sub >, < sup > : 아래첨자, 위첨자 CO₂, 1^st

  CO<sub>2</sub>, 1<sup>st</sup>
  

• < pre > : 입력한 그대로 출력

안녕
하세요

<pre>
안녕
하세요
</pre>

• HTML태그 안에서 사용하는 특수기호

  & nbsp : 스페이스
  & lt : <
  & gt : >
  & amp : &
  

  ---

이미지와 링크

• 임시 이미지레이아웃 설계를 통해 자리확인

  <img src="https://via.placeholder.com/300x100/000/fff?text=header">
  

• a태그 사용법 구글

  <a href="https://www.google.com" target="_blank">구글</a>
  

• 이미지와 링크

  <a href="https://github.com/dtwogud"><img src="https://dtwogud.github.io/assets/images/mj.png" width="100" height=""></a>
  

• 목록 만들기

1. 순서
2. 있는
3. 목록
4. type=A, a, i, I, 1 가능
1. 목록기호
2. 변경

<ol>
  <li>순서</li>
  <li>있는</li>
  <li>목록</li>
  <li>type=A, a, i, I, 1 가능</li>
  <ol type="A">
    <li>목록기호</li>
    <li>변경</li>
  </ol>
</ol>

• 순서
• 없는
• 목록
• type=circle, square, disc 가능

<ul type="circle">
  <li>순서</li>
  <li>없는</li>
  <li>목록</li>
  <li>type=circle, square, disc 가능</li>
</ul>

• 이미지맵 아래 빨간부분 클릭

<img src="https://dtwogud.github.io/assets/images/imagemaps.png" usemap="#download">
<map name="download">
<area shape="rect" coords="32,26,398,223" href="https://www.google.com" title="쿠폰 다운로드"></map>
<map name="download">
<area shape="circle" coords="657,294,110" href="https://www.naver.com" title="쿠폰 다운로드"></map>

표만들기

선물용과 가정용 상품 구성

용도	중량	갯수	가격
선물용	3kg	11~16과	35,000원
	5kg	18~26과	52,000원
가정용	3kg	11~16과	30,000원
	5kg	18~26과	47,000원

<table>
  <caption>선물용과 가정용 상품 구성</caption>
  <thead>
    <tr>
      <th>용도</th>
      <th>중량</th>
      <th>갯수</th>
      <th>가격</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">선물용</td>
      <td>3kg</td>
      <td>11~16과</td>
      <td>35,000원</td>
    </tr>
    <tr>
      <td>5kg</td>
      <td>18~26과</td>
      <td>52,000원</td>
    </tr>
    <tr>
      <td rowspan="2">가정용</td>
      <td>3kg</td>
      <td>11~16과</td>
      <td>30,000원</td>
    </tr>   
    <tr>
      <td>5kg</td>
      <td>18~26과</td>
      <td>47,000원</td>
    </tr>
  </tbody>        
</table>