TIL 1. HTML

신미영·2021년 4월 5일

HTML & CSS

목록 보기

1/6

웹 공부의 출발점이라고 할 수 있는 HTML에 대해 학습한 내용 중 핵심 내용을 정리해 본다.

Structure

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="HTML 학습하기">
  <title>문서 제목</title>
</head>
<body>
  <h1>컨텐츠 제목</h1>
  <p>컨텐츠 내용</p>
  <img src="이미지 경로">
</body>
</html>

<!doctype> : 문서의 유형을 지정하는 선언문

<html> ~ <html> : 웹 문서의 시작과 끝을 알리는 태그

<head> ~ <head> : 브라우저에게 정보를 주는 태그

<meta> : 문자 세트를 비롯한 문서 정보 태그

<body> ~ <body> : 실제 브라우저에 표시 될 내용 태그

Tags

1. Text

<hn> : <h1>~<h6>까지 표현하여 텍스트를 굵고 진하게 표시

<p> : 줄바꿈이 있는 텍스트 단락

<strong>, <b> : 텍스트 굵게 표시 (*내용에 있어 강조한다면 <strong> 사용)

<em>, <i> : 텍스트 이탤릭체로 표시 (*내용에 있어 강조한다면 <em> 사용)

<u> : 텍스트 밑줄

<mark> : 텍스트 형광펜 효과

<ul> : 순서 없는 목록 만들기

<ol> : 순서 목록 만들기

<li> : 목록의 리스트

2. Table / Image / Links

<table>    <!---- Table ---->
  <tr>
    <th> 제목 셀 </th>
    <td> 1행 2열 </td>
    <td> 1행 3열 </td>
  </tr>
  <tr>
    <th> 제목 셀 </th>
    <td> 2행 2열 </td>
    <td> 2행 3열 </td>
  </tr>
</table>
<img src="이미지 경로">  <!---- Image ---->
<figcaption>이미지 설명</figcaption>
<a href="링크 주소">텍스트</a> <!---- Links ---->

3. Form

<form> element </form>

1) Attributes

<form> 태그에서는 사용자가 입력한 데이터를 서버로 어떤 방식으로 넘길 것인지, 서버에서 어떤 프로그램을 이용해 처리할 것인지 지정하기 위한 다양한 속성들을 사용한다.

<method> : 데이터를 어떻게 서버로 넘겨줄지 지정(*속성 값: get or post)

<action> : <form> 태그 안의 데이터를 처리해 줄 서버 상의 프로그램 지정

<target> : action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정

2) Elements

:: label & input

<label for="id이름">레이블</label>
<input id="id이름" type="유형">

<label>은 폼 요소의 입력창 옆에 놓인 텍스트를 말한다.
<input>은 사용자가 직접 입력한 데이터를 받기 위해 사용되며 type 속성에 따라 다양하게 활용된다.
<label>과 <input> 각각의 for와 id 속성의 값을 이용하여 연결한다.

type="text"
한 줄짜리 일반 텍스트를 입력하는 필드가 표시된다.

<form>
  <label for="name">이름</label>
  <input type="text" id="name" required> <!---- 작성 필수 필드 ----> 
</form>

이름

type="password"
입력하는 데이터가 마스킹처리되어 표시된다.

<form>
  <label for="pw">비밀번호</label>
  <input type="password" id="pw">
</form>

비밀번호

type="range"
슬라이드 막대를 움직여 숫자 값을 입력하게 한다.
min, max, step, value 속성을 통해 막대를 설정한다.

<form>
  <label for="volum">음량</label>
  <input type="range" id="volum" min="0" max="100" step="1">
</form>

음량

type="checkbox"
주어진 여러 항목 중 원하는 항목을 다중 선택할 때 사용하는 폼 요소이다.
단일 항목 선택 시에는radio를 사용한다.

<form>
<p> 좋아하는 색은?</p>
  <label><input type="checkbox" name="color" value="green">green</label>
  <label><input type="checkbox" name="color" value="white">white</label>  
  <label><input type="checkbox" name="color" value="red">red</label>  
</form>

좋아하는 색은?

green white red

:: Select & Option

사용자가 여러가지 옵션 중 선택하도록 할 때 사용하는 드롭다운 목록을 사용하기 위하여 사용하는 태그이다.
<select>태그로 목록의 시작과 끝을 표시하고 <option>태그를 사용해 선택할 항목을 추가한다.

<form>
<label for="fruit">과일</label>
<select size="5" id="fruit" multiple> <!---- 한 번에 5개 표시, 중복 선택 가능 ---->
  <option value="banana">바나나</option>
  <option value="apple">사과</option>
  <option value="melon">메론</option>
  <option value="grape">포도</option>
  <option value="pear">배</option>
</select>
</form>

:: Textarea

한 줄 이상의 문장을 입력할 때 사용하는 태그이며
name, cols, rows속성을 통해 입력 영역을 지정한다.

<form>
  <textarea name="memo" rows="20" cols="10"></textarea>
</form>

신미영

Hello World!

다음 포스트