HTML 기본

HTMl

태그 등을 이용하여 문서나 데이터의 구조를 명기하는 마크업 언어

웹 표준

HTML의 기본구조

  • tag : <>로 이루어진 요소
  • 주석 : <!-- 주석을 자주 사용하자 -->

태그의 요소와 속성

HTML 태그는 <열리는 태그></닫히는 태그>로 구성된다.

<!--
<요소 속성="값">내용</요소>
<element attribute="value">content</element> -->

<a href="http://google.com">Google</a>

절대경로와 상대경로

  • 절대경로 : 인터넷에 이미지를 사용할 때 주로 사용
  • 상대경로
    • 하위폴더로 이동 : 폴더명/파일명
    • 상위폴더로 이동 : ../ 으로 시작 (/로 시작한다면 가장 최상위 폴더에서부터 시작)

head 태그

웹 페이지에 직접적으로 보이지 않으나, 브라우저에 정보를 제공하는 목적이다.

body 태그

<!doctype html>
<html>
<head>
	<title>First HTML</title>
</head>
<body>
	<h1>패스트캠퍼스 웹 프로그래밍 스쿨</h1>
	<p>HTML</p>
	<blockquote>처음으로 작성한 HTML문서입니다.</blockquote>
</body>
</html>

편집기 설치

  • Atom
  • Atom 패키지
    • Emmet : HTML/CSS 코딩 생산성 향상
    • less-than-slash : 자동으로 HTML태그를 닫아주는 기능
  • Atom 단축기
    • 텍스트 선택 후 cmd + d하면 동일한 텍스트가 순서대로 선택 > 한번에 수정 후 esc
    • 맨 앞의 텍스트를 선택 후 cmd + d > cmd + 오른쪽 방향키 하면 열의 맨 뒤에 한번에 수정 가능
    • next edit point : ctr + alt + 오른쪽 방향키(default) or alt + 오른쪽 방향키(custom)

블록과 인라인

요소의 형태는 BlockInline 두 가지로 나누어진다.

블록요소 (Block Level Elements)

블록요소는 줄바꿈이 일어나는 형태이며, 기본적으로 width가 전체 너비의 값을 가진다.

<body>
  <h1>Block Level Elements</h1>
  <p>h1, p, div 요소는 블록 형태</p>
  <div>해당 요소에 배경색(background-color)을 지정하게 되면, 내용과 별개로 전체 너비 영역만큼을 차지한다.</div>
</body>

인라인 요소 (Inline Elements)

줄 바꿈이 없는 형태이며, 기본적으로 width가 자신의 내용만큼의 가로 너비 값을 가진다.

<body>
  <strong>Inline Elements</strong>
  <a href="">strong, a, span 요소는 인라인 형태</a>
  <span>블록 요소는 인라인 요소를 포함할 수 있지만, 인라인 요소는 블록 요소를 포함할 수 없다.</span>
</body>

레이아웃 요소

div와 span은 오직 Block과 Inline 방식의 레이아웃을 구현하는데에 사용한다.

<h3>레이아웃 요소</h3>
<div>
  <p>블록요소 내부에 <span>인라인 요소를 사용합니다.</span></p>
</div>

블록과 인라인 예제 결과 보기

HTML 태그

Text tags

기본적으로 HTML 문서에는 공백은 1 space밖에 없다.

  • Headline : <h1></h1>
  • Line break : <p> <br>
  • Horizontal rule : <hr>
  • Blockquote : <blockquote>
  • Preformatted text : <pre> (태그 안에 문자들이 타이핑한 형식대로 출력)
  • 줄바꿈 없는 텍스트 태그
    • 굵게 표시 : <strong> (중요한 내용), <b> (보기 좋게 굵게 표시)
    • 이탤릭 표시 : <em> (문맥상 중요한 내용), <i> (기울여 보고 싶을 때)
    • 형광펜 효과 : <mark>
  • Anchor : <a>
    • href : 이동할 페이지 주소
    • target : _self, _blank
    • title : 마우스를 올렸을 때 보여줄 제목
  • image : <img>
    • src : 이미지 경로
    • alt : 대체 텍스트
    • width, height : 가로/세로 크기(px단위)

Data tags

  • Ordered List : <ol> > <li>

  • Unordered List : <ul> > <li>
    • type : 1(기본값), a, A, i, I
    • start : 시작할 숫자 지정
    • reversed : 역순으로 표시
  • Description List : <dl>
    • 개념 : <dt>
    • 정의 : <dd>
    <h3>정의 목록</h3>
    <dl>
      <dt>HTML</dt>
      <dd>Hyper Text Markup Language</dd>
      <dd>웹 페이지를 구현하는 마크업 언어이다</dd>
      <dt>CSS</dt>
      <dd>Cascading Style Sheet</dd>
      <dd>HTML의 형태를 지정하는 언어이다</dd>
    </dl>
    

테이블 요소

테이블 기본 구조

<table>
  <tr>
    <th>이름</th>
    <th>나이</th>
    <th>점수</th>
  </tr>
  <tr>
    <td>철수</td>
    <td>23세</td>
    <td>70점</td>
  </tr>
  <tr>
    <td>영희</td>
    <td>21세</td>
    <td>89점</td>
  </tr>
</table>

셀 병합

<!-- 가로로 셀 병합 -->
<h3>colspan</h3>
<table>
  <tr>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td colspan="2">c</td>
  </tr>
</table>

<!-- 세로로 셀 병합 -->
<h3>rowspan</h3>
<table>
  <tr>
    <td rowspan="3">a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>c</td>
  </tr>
  <tr>
    <td>d</td>
  </tr>
</table>

열의 구조화

colgroup을 사용하여 특정 ‘열’ 또는, 특정 열의 ‘그룹’에 쉽게 속성을 줄 수 있다.

<head>
  <style>
  table {
    border-collapse: collapse;
  }
  table, th, td {
    border: 1px solid black;
  }
  table > colgroup {
    background: #f3f3f3;
    border-right: 3px double #333
  }
  #col1 {
    background-color: red;
  }
  </style>
</head>

<body>
  <h3>colgroup</h3>
  <table>
    <caption></caption>
    <colgroup>
      <col span="3" />
    </colgroup>
    <tr>
      <th>이름</th>
      <th>나이</th>
      <th>성별</th>
      <th>100M 달리기</th>
      <th>윗몸 일으키기</th>
    </tr>
     <tr>
       <td>홍길동</td>
       <td>22세</td>
       <td></td>
       <td>15.25</td>
       <td>29</td>
     </tr>
     <tr>
       <td>황진이</td>
       <td>20세</td>
       <td></td>
       <td>16.12</td>
       <td>41</td>
     </tr>
     <tr>
       <td colspan="3">참가자 평균</td>
       <td>15.7</td>
       <td>35</td>
     </tr>
  </table>
</body>

행의 구조화

<h3>행의 구조화</h3>
<!-- thead와 tfoot은 table에서 한 번만 선언 -->
<table>
  <thead>
    <tr>
      <th>이름</th>
      <th>나이</th>
      <th>성별</th>
      <th>성적</th>
      <th>메모</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>홍길동</td>
      <td>22세</td>
      <td>남자</td>
      <td>98점</td>
      <td>잘생김</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>김춘향</td>
      <td>19세</td>
      <td>여자</td>
      <td>99점</td>
      <td>예쁨</td>
    </tr>
  </tbody>
  <!-- 일반적으로 도표 전체의 합계나 결과를 표시 -->
  <tfoot>
    <tr>
      <td colspan=3"">평균</td>
      <td>87</td>
      <td>-</td>
    </tr>
  </tfoot>
</table>

테이블 요소 예제 결과

Form 요소

브라우저(클라이언트)에서 서버로 데이터를 전송하기 위해 사용하는 태그이다. form 태그에는 다음과 같은 속성들이 있다.

  • method : 폼에서 서버로 데이터를 전송하는 방식
    • get : URL에 데이터를 담아 전달
    • post : URL과 별도로 전달
  • action : from에서 데이터를 전송할 URL
<h3>From 요소</h3>
  <form action="" method="get">
    <label for="username">ID</label>
    <input type="text" name="username">
  </form>

input 태그

input 요소는 값을 가지거나, form에 영향을 준다.

<h3>input 태그</h3>
<form method="get">
  <input type="text" id="username">
  <input type="password" id="pwd">
  <input type="radio" id="userradio">
  <input type="checkbox" id="usercheckbox">
  <input type="button">
  <input type="file" id="userfile">
  <input type="submit">
  <!-- 초기화 -->
  <input type="reset">
  <!-- 서버에 전송할때, 유저에게 노출하고 싶지 않을 경우 사용  -->
  <!-- file://your/path/form.html?hidden-key=hidden-value -->
  <input type="hidden" name="hidden-key" value="hidden-value">
</form>

<h3>input 태그 속성</h3>
<form>
  <!--
  disabled : 사용할 수 없는 텍스트
  readonly : 읽을 수 만 있는 텍스트
  둘의 실제 동작은 동일
   -->
  <input type="text" value="disalbe" disabled>
  <input type="text" value="readonly" readonly>
  <!-- 비어있으면 전송 되지 않음 -->
  <input type="text" required>
  <input type="text" placeholder="비밀번호를 입력하세요">
  <input type="text" size="5" placeholder="size: 5">
  <input type="text" maxlength="10" placeholder="최대 10자 입력 가능">
  <!-- 복수 응답이 필요할 때 checkbox 사용 -->
  <input type="checkbox" checked="checked">
  <!-- name 속성이 동일한 radio 타입끼리는 동시에 선택 불가능 -->
  <input type="radio" id="female" name="gender" checked="checked">
  <input type="radio" id="male" name="gender">
  <input type="submit" value="전송">
</form>

label 태그

<h3>label 태그</h3>
<!-- label 태그 안에 form 요소를 쓰는 방식 -->
<label>ID <input type="text"></label>

<!-- label의 for 속성 값과 form의 id 속성 값을 일치시켜 그룹화 -->
<label for="username">Username</label>
<input type="text" id="username">

select 태그

<h3>select 태그</h3>
<!-- value 속성에 서버로 보낼 때 값을 지정 -->
<select name="number" id="select-id">
  <option value="1">First</option>
  <option value="2">Second</option>
  <option value="3">Third</option>
  <option value="4">Fourth</option>
</select>

<h3>select 태그 multiple 속성</h3>
<!--
기본적으로 select 요소는 option의 값을 한 개만 선택할 수 있다.
multiple 속성을 가질 경우, ctr(or cmd)키를 이용해 여러개의 값을 선택할 수 있다.
 -->
<select multiple="multiple">
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="orange">Orange</option>
</select>

<h3>select 태그 size 속성</h3>
<select size="2">
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="orange">Orange</option>
</select>

<h3>select 태그 optgroup</h3>
<!-- option을 그룹화하여 보여준다 -->
<select>
  <optgroup label="Fruits">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="orange">Orange</option>
  </optgroup>
  <optgroup label="Colors">
    <option value="red">Red</option>
    <option value="blue">Blue</option>
    <option value="green">Green</option>
  </optgroup>
</select>

button 태그

<h3>button 태그</h3>
<button type="submit">submit type button</button>
<button type="reset">reset type button</button>
<button type="button">button type button</button>

fieldset, legend 태그

<h3>fieldset, legend 태그</h3>
<fieldset>
  <!-- legend는 fieldset의 가장 첫번째에 두어야 함 -->
  <legend>Login</legend>
    <label>username: <input type="text"></label>
    <label>password: <input type="password"></label>
  <fieldset>
    <legend>nested fieldset</legend>
    <button type="submit">Login</button>
  </fieldset>
</fieldset>

Form 요소 예제 결과

클래스와 아이디 속성

속성을 만들어 사용할 수 있지만 보편적으로 class, id를 사용한다.

  • class : 여러번 사용가능한 범용적인 부분을 나타냄
  • id : unique한 특성을 나타냄

색상

form-signup.html 코드

form-signup.html 실습 결과