HTML 기본 지식

HTML

• ! 입력 후, 엔터
  • 기본 HTML 형식의 소스가 나옴

HTML 버전 차이

• 현재, HTML5 & CSS3 사용
• 버전을 알고, 유지보수를 해야함

블록 요소

• 가로 영역이 전체 100%
• padding 상하좌우 적용
• margin 상하좌우 적용

인라인 요소

• 가로 영역이 내용만큼 적용
• padding 상하좌우 적용
• margin 좌우 적용

Headings

• 제목 태그: < h1 > ~ < h6 > 순서대로 적용
  • < h1 >: 페이지에서 가장 중요한 제목 = logo
  • < h2 >: gnb or 컨텐츠 제목
  • < h3 >: 소제목

Description List

• < dl >, < dt >, < dd >로 표현
• < p > : paragraph (단락)
• < br > : break (줄 바꿈)

< img >

src	이미지 경로
alt	설명
width	이미지 너비
height	이미지 높이

< a >

href	하이퍼링크 경로
title	링크 설명
target	클릭시, 열릴 위치 명시

< table >

• summary 유무에 따라, html 버전 차이있음(html5는 보통 없음)
• caption 사용하여, 테이블 제목 설명
• colgroup 사용하여, 컬럼의 폭을 지정
• thead tfoot tbody 을 사용하여, 테이블의 형태를 나눔
• tr 을 사용하여, 행을 삽입 ⇒ td th 을 사용하여, 셸을 삽입
• th: id 와 scope를 사용하여, 접근성 부여
• td: headers를 사용하여, 접근성 부여
• 예시
  

  <table border="1">
    <caption>
      취업 현황
    </caption>
    <colgroup>
      <col width="100" />
      <col width="100" />
      <col width="100" />
    </colgroup>
    <thead>
      <tr>
        <th scope="col">구분</th>
        <th id="wd" scope="col">웹디자이너</th>
        <th id="fe" scope="col">프론트엔드</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <th id="total" scope="row">합계</th>
        <td headers="wd total">30명</td>
        <td headers="fe total">40명</td>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <th id="r1" scope="row">1월 취업현황</th>
        <td headers="wd r1">10명</td>
        <td headers="fe r1">20명</td>
      </tr>
      <tr>
        <th id="r2" scope="row">2월 취업현황</th>
        <td headers="wd r2">20명</td>
        <td headers="fe r2">20명</td>
      </tr>
    </tbody>
  </table>
  

• colspan 과 rowspan을 사용하여 병합 가능

  <table border="1" style="border: 1px solid red">
    <tr>
      <td **colspan="2" ** style="width: 100px">1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
  </table>
  

  • 인라인 css, 내부 css 작업 구분! ⇒ 별도로 css 파일을 두는것이 좋음

< form >

• fieldset 으로 입력양식을 묶음
• legend 으로 입력양식의 제목을 지정
• label의 for 과 input의 id 로 접근성을 위한 연결 명시.

별도의 입력방식

• select
• option - optgroup

ie10이상 지원 입력양식

• input의 search
• input의 tel
• input의 url
• input의 email
• input의 range
  • min max step 으로 간격 조절 가능

ie12이상 지원 입력양식

• input의 month
• input의 date
• input의 time
• input의 week
• input의 number
  • min max step 으로 간격 조절 가능
• input의 color

미리보기 글자

placeholder : 입력창에 힌트글자 보여줌
value : 입력창에 글자가 남겨져 있음

---

입력양식의 코드

  <!-- 폼 -->
  <form method="" action="post" name="frm">
    <fieldset>
      <legend>요소확인</legend>

      <label for="user-name">이름</label>
      <input type="text" id="user-name" name="user-name" /><br />

      <label for="user-pw">비밀번호</label>
      <input type="password" id="user-pw" name="user-pw" maxlength="9" /><br />

      <input type="checkbox" id="user_chk1" name="check" />
      <laber for="user_chk1">삼성</laber>

      <input type="checkbox" id="user_chk2" name="check" />
      <laber for="user_chk2">애플</laber>
      <br />

      <input type="radio" id="user_rdo1" name="radio" />
      <label for="user_rdo1">웹디자이너</label>

      <input type="radio" id="user_rdo2" name="radio" />
      <label for="user_rdo2">프론트엔드</label>

      <input type="radio" id="user_rdo3" name="radio" />
      <label for="user_rdo3">백엔드</label>
      <br />

      <label for="user-file">파일첨부</label>
      <input type="file" id="user-file" name="user-file" />
      <br />

      <label for="user-search">수강과목 검색</label>
      <input type="search" id="user-search" name="user-search" />
      <br />

      <label for="user-tel">전화번호</label>
      <input type="tel" id="user-tel" name="user-tel" />
      <br />

      <label for="user-url">홈페이지</label>
      <input type="url" id="user-url" name="user-url" />
      <br />

      <label for="user-email">이메일</label>
      <input type="email" id="user-email" name="user-email" />
      <br />

      <label for="mm">희망수강월</label>
      <input type="month" id="mm" name="mm" />
      <br />

      <label for="dd">희망수강일</label>
      <input type="date" id="dd" name="dd" />
      <br />

      <label for="ww">희망수강주</label>
      <input type="week" id="ww" name="ww" />
      <br />

      <label for="tt">희망시간</label>
      <input type="time" id="tt" name="tt" />
      <br />

      <label for="user-number">강의신청수</label>
      <input
        type="number"
        id="user-number"
        name="user-number"
        min="0"
        max="28"
        step="2"
      />
      <br />

      <label for="color">색상표</label>
      <input type="color" id="color" name="color" />
      <br />

      <label for="range">강의수준</label>
      <input type="range" id="range" name="range" min="0" max="100" step="10" />
      <br />

      <input
        type="text"
        name="user-id"
        title="아이디"
        placeholder="아이디를 입력 해주세요"
      />
      <br />
      <input
        type="text"
        name="user-id2"
        title="아이디2"
        value="아이디를 입력 해주세요"
      />
      <br />

      <label for="user-select">패밀리사이트선택</label>
      <select id="user-select" name="user-select">
        <option value="">강남보건소</option>
        <option value="">강남구의회</option>
        <option value="">강남구청</option>
      </select>
      <button type="reset">취소</button>
      <button type="submit">전송</button>
      <br />

      <label for="frm-select">산하부서선택</label>
      <select id="frm-select" name="frm-select">
        <optgroup label="행정지원국">
          <option value="">총무과</option>
          <option value="">기획예산과</option>
          <option value="">재무과</option>
        </optgroup>
        <optgroup label="문화관광국">
          <option value="">문화과</option>
          <option value="">홍보과</option>
          <option value="">지원과</option>
        </optgroup>
      </select>
      <input type="button" name="btn" value="바로가기" />
      <br />

      <label for="text">구매후기</label>
      <textarea rows="10" cols="50"> </textarea>
      <input
        type="image"
        src="https://placecats.com/neo/300/200"
        alt="고양이보인다"
        title="catimg"
      />
      <input type="submit" name="submit-btn" value="전송" />
      <input type="reset" name="reset-btn" value="취소" />
    </fieldset>

  </form>

---

< strong >

• bold체
• 중요한 의미를 나타냄

< em >

• italic체
• 강조의 이미를 나타냄

< address >

• italic체
• 주소, 사이트 관리자 연락처

< abbr >

• 내용 안에 집어넣어서 사용
• 툴팁 제공
• ie10이상 지원 입력양식

시멘틱 태그

< header >	머리말
< nav >	하이퍼링크 모음 내비게이션
< aside >	본문 흐름 벗어나는 팁
< section >	문서의 장 or 절
< article >	본문과 독립적인 영역
< footer >	꼬리말

<header>페이지나 섹션의 머릿말 (로고, 목차, 내비게이션...)</header>
<footer>페이지나 섹션의 꼬릿말 (저자정보, 관련링크, 저작권표ㅅ...)</footer>
<section>창이나 절 표현 / 제목태그 넣기</section>
<article>뉴스 기사와 같은 독립적인 컨텐츠 (댓글, 게시판 투고...)</article>
<aside>메인컨텐츠와 관련성이 적은 컨텐츠(광고, 사이드바, 보충기사...)</aside>
<nav>컨텐츠의 주메뉴, 서브페이지의 사이드 메뉴, 사이트내 이동 내비게이션</nav>

< figure >

<figure>
  <img src="https://placecats.com/neo/300/200" alt="고양이" />
  <figcaption>나를 빤히 쳐다보는 고양이</figcaption>
</figure>

• 본문에서 떼어낼 수 있는 경우
• 동일페이지에서 이동 가능시
• 전용 페이지나 부록같은 별도의 페이지로 이동
• 그림, 도표, 코드 등..

< audio >, < video >

• 오디오와 비디오 태그

< small >

• 법적제약, 저작권, 면책사항 등을 표현

가끔 보이는 태그

• < s >: 더 이상 정확하지 않거나, 관련성이 적음 / 취소선
• < cite >: 인용하는 작품의 제목(인용문장 사용 X)
• < q >: 짧은 인용글
• < blockquote >: 긴 인용글
• < i >: 목소리, 감정, 전문용어, 본문과는 다른 언어표기, 사고 / 기울임체
• < b >: 다른 문장과 구별(키워드, 제품명 등) / 볼드체
• < u >: 본문표기와는 다른 형태 / 밑줄선

< datalist >

• < option >과 함께 사용
  • 별도로 안닫아도 사용 가능
• 사용자가 선택할 항목을 제공함
• 데이터리스트 제공
  

  <form aciton="#" method="post">
    <input list="browsers" name="browser" />
    <datalist id="browsers">
      <option value="Internet Explore"></option>
      <option value="Firefox"></option>
      <option value="Chrome "></option>
    </datalist>
  </form>