HTML 기초 뿌시기

LeeEunJae·2022년 8월 20일
html
1

웹공부

목록 보기
1/1

HTML 을 사용하여 웹페이지의 내용과 구조를 만들고,
CSS 를 사용하여 html 요소의 디자인적 요소를 설정한다.
JAVASCRIPT 를 사용하여 웹 브라우저의 동적인 요소를 제어한다.

📌 HTML 기본 틀

! 입력 후 탭 또는 엔터 클릭시 자동완성

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

body 태그 안쪽에 페이지 요소를 작성해주면 된다.

📌 제목

  <h1>제목 태그들과 문단태그</h1>
  <h2>용도에 적합한 태그 사용하기</h2>

제목태그는 h1부터 h6 까지있다. 글씨 크기는 상관쓰지 않아도 된다. 어차피 디자인적인 요소는 css 에서 설정할 것이기 때문에 그냥 이 제목이 어느 수준의 제목인지만 생각하고 태그를 설정하면 된다.

📌 본문

  <p>
    페이지나 섹션, 주요 요소의 제목은 h1 ~ h6 태그를 사용합니다<br>
    숫자가 높을수록 낮은 단계의 제목이 되죠.
  </p>

문단을 나타내기 위해서 p 태그를 사용합니다.
br 태그는 줄바꿈을 위해서 사용합니다.

📌 가로줄과 공백 여러개

  <hr>
  <p>
    위와 같이 hr 태그를 사용하면 가로줄을 표시할 수도 있습니다.
  </p>
  <p>
    이&nbsp&nbsp&nbsp렇&nbsp&nbsp&nbsp게 글자 사이의 공백을 여럿 두려면 & n b s p ; 를 붙여서 입력하세요.
  </p>

hr 태그는 가로줄을 표시합니다.
는 여러개의 공백을 표현할 때 사용합니다.

📌 강조 태그

  1. b 태그 vs strong 태그

b 태그는 글자를 굵게만 만들지만, strong 태그는 그 내용이 중요하다는 의미 또한 담고 있다.

  <p>
    <strong>경고!</strong>이것은 매우 위험합니다. <br>
  </p>
  1. i 태그 vs em 태그

둘다 글자를 기울이지만, em 태그는 강조하는 역할을 한다.

  <p>
    나는 <em>당근</em>을 사랑합니다.<br>
    나는 당근을 <em>사랑</em>합니다.
  </p>

📌 첨자 태그

  <p>
    x<sup>3</sup>
    y<sup>2</sup>
  </p>

sup : 위첨자
sub : 아래첨자

📌 밑줄 태그와 취소선 태그

  <p>
    <u>밑줄태그</u>
    <s>취소선태그</s>
  </p>

u 태그 : 철자 오류 표시
s 태그 : 더이상 유효하지 않은 정보 표시

📌 인용문 관련 태그

  1. blockquote 태그와 cite 태그
  <blockquote cite="https://developer.mozilla.org/ko/docs/Web/HTML/Element/blockquote">
    HTML &lt;blockquote&gt; 요소는 안쪽의 텍스트가 긴 <mark>인용문</mark>임을 나타냅니다. <br>
    주로 들여쓰기를 한 것으로 그려집니다. (외형을 바꾸는 법은 사용 일람을 참고하세요) <br>
    인용문의 출처 URL은 cite 특성으로, 출처 텍스트는 &lt;cite&gt; 요소로 제공할 수 있습니다. <br>
  </blockquote>

blockquote 는 비교적 긴 인용문에 사용합니다. cite 속성으로 출처를 표시합니다.

  1. q 태그 와 mark 태그
  <q cite="https://developer.mozilla.org/ko/docs/Web/HTML/Element/blockquote"
    >HTML &lt;q&gt;요소는 둘러싼 텍스트가 짧은 <br>
    인라인 <mark>인용문</mark>이라는것을 나타냅니다. 라고 설명하고 있습니다.
  </q>

q 태그는 비교적 짧은 인용문에 사용하고, 마찬가지로 cite 속성으로 출처를 표시합니다.
mark 태그는 인용문 중 하이라이트 또는 사용자 행동과 연관된 곳을 표시하는데 사용합니다.

📌 머리글자

  <h1>abbr 태그를 사용하여 머리글자 표현</h1>
  <p>
    <abbr title="HyperText Markup Language">HTML</abbr>
    을 표기한 문장입니다.
  </p>

머리글자는 abbr 태그를 사용해서 표현하고, title 속성으로 원래 형태를 표시합니다.

📌 목록을 표현하는 태그들

  • ul(unordered list) : 순서가 없는 목록
  • ol(ordered list) : 순서가 있는 목록
  • li(list item) : 목록 아이템
  <h1>수련회 준비물</h1>
  <ul>
    <li>이틀치 옷</li>
    <li>세면도구</li>
    <li>수건</li>
    <li>학습도구
      <ul>
        <li>노트북</li>
        <li>필기구</li>
        <li>교재</li>
      </ul>
    </li>

  </ul>
  <h1>계란 볶음밥 만들기</h1>
  <ol>
    <li>재료 준비
      <ul>
        <li>밥</li>
        <li>파</li>
        <li>간장</li>
        <li>계란</li>
      </ul>
    </li>
    <li>파를 기름에 볶기</li>
    <li>밥 넣고 볶기</li>
    <li>계란을 넣고 스크램블</li>
    <li>간장을 넣고 마저 볶아 완성</li>
  </ol>

📌 용어와 정의 나열하기

  • dl (definition list) : 용어를 설명하는 목록
  • dt (definition term) : 용어의 제목
  • dd (definition description) : 용어의 설명
  <dl>
    <dt>프로그래밍</dt>
    <dd>컴퓨터 프로그램을 작성하는 일</dd>

    <dt>넓이</dt>
    <dt>광</dt>
    <dt>면적</dt>
    <dd>일정한 평면에 걸쳐 있는 공간이나 범위의 크기</dd>

    <dt>사과</dt>
    <dd>사과나무의 열매</dd>
    <dd>자기의 잘못을 인정하고 용서를 빎</dd>
  </dl>
  <link rel="stylesheet" href="https://showcases.yalco.kr/html-css/01-04/05.css">

📌 이미지 넣기

<img src="./cat-g41423f6ff_1920.jpg" alt="미야옹" title="고양이" width="50%">

📌 표 사용하기

  <table>
    <caption>1에서 9까지의 숫자들</caption>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
  </table>
  • table : 테이블
  • caption : 표 설명 또는 제목(선택 사항)
  • tr(table row) : 표 행
  • td(table data) : 테이블의 데이터 셀 
  <table>
    <caption>웹개발 공부기록</caption>
    <tr>
      <th scope="col">과목</th>
      <th scope="col">월</th>
      <th scope="col">화</th>
      <th scope="col">수</th>
    </tr>
    <tr>
      <th scope="row">HTML</th>
      <td>60분</td>
      <td>60분</td>
      <td>0분</td>
    </tr>
    <tr>
      <th scope="row">CSS</th>
      <td>0분</td>
      <td>30분</td>
      <td>60분</td>
    </tr>
    <tr>
      <th scope="row">JS</th>
      <td>0분</td>
      <td>0분</td>
      <td>60분</td>
    </tr>
    <tr>
      <th scope="row">총시간</th>
      <td>60분</td>
      <td>90분</td>
      <td>120분</td>>
    </tr>
  </table>
  • thead : 테이블의 헤더
  • tbody : 테이블의 본문
  • tfoot : 테이블의 푸터
  • th : 열 또는 행의 헤더

  <table>
    <tr>
      <td>1</td>
      <td colspan="2">2</td>
      <td>1</td>
    </tr>
    <tr>
      <td rowspan="3">3</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
    </tr>
    <tr>
      <td>1</td>
      <td colspan="2" rowspan="2">4</td>
    </tr>
    <tr>
      <td>1</td>
    </tr>
  </table>
  • colspan : 열 병합
  • rowspan : 행 병합

	<table>
		<colgroup>
			<col class="weekend">
			<col span="5">
			<col class="weekend">
		</colgroup>
		<thead>
			<tr>
				<th scope="col">일</th>
				<th scope="col">월</th>
				<th scope="col">화</th>
				<th scope="col">수</th>
				<th scope="col">목</th>
				<th scope="col">금</th>
				<th scope="col">토</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>_</td>
				<td>_</td>
				<td>_</td>
				<td>_</td>
				<td>_</td>
				<td>_</td>
				<td>_</td>
			</tr>
			<tr>
				<td>_</td>
				<td>_</td>
				<td>_</td>
				<td>_</td>
				<td>_</td>
				<td>_</td>
				<td>_</td>
			</tr>
			<tr>
				<td>_</td>
				<td>_</td>
				<td>_</td>
				<td>_</td>
				<td>_</td>
				<td>_</td>
				<td>_</td>
			</tr>
			<tr>
				<td>_</td>
				<td>_</td>
				<td>_</td>
				<td>_</td>
				<td>_</td>
				<td>_</td>
				<td>_</td>
			</tr>
		</tbody>
	</table>
  • colgroup : 표에 열을 묶어서 속성 부여
  • col : 열의 묶음

📌 하이퍼링크

  <h1>a 태그를 사용한 링크들</h1>
  <a href="https://www.easy-subtitle.com/">Easy Subtitle 로 가는 하이퍼링크</a>

이미지를 포함한 하이퍼링크를 만들 수 있다.

  <a href="https://www.yalco.kr" target="_blank">
    <img src="./cat-g41423f6ff_1920.jpg" alt="얄코 사이트로(새 탭에서)" width="10%">
  </a>

📌 address 태그

  <address>
    웹사이트 주소: <a href="https://www.yalco.kr">yalco.kr</a> <br>
    오피스: 전산시 개발구 코딩동 <br>
    전화 <a href="tel:010-1234-5678">010-1234-5678</a> <br>
    이메일: <a href="mailto:dldmswo1209@gmail.com">dldmswo1209@gmail.com</a>
  </address>
  • mailto : 이메일 링크
  • tel : 전화번호 연결

📌 사용자에게 입력받기

  • form : 정보를 제출하기 위한 태그들을 포함
  • input : 입력을 받는 요소
  • label : 인풋 요소마다의 라벨
  • button : 버튼
  <form 
  action="./8강-result.html" method="get" autocomplete="on">
  <label for="name">이름</label>
  <input id="name" name="my-name" type="text">

  <br><br>

  <label for="age">나이</label>
  <input id="age" name="my-age" type="number">

  <br><br>

  <button type="submit">제출</button>
  <button type="reset">초기화</button>
  </form>

label for 속성에 input의 id 값과 동일한 name을 지정해줘서 이름 label 을 클릭했을 때 입력창에 커서가 이동하게 된다.
input 속성값인 type 에 text 나 number 를 지정해줘서 어떤 타입의 텍스트를 입력받을 것인지 지정해준다.

  <form>
    <fieldset>
      <legend>반장</legend>

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

      <label for="age_1">나이</label>
      <input id="age_1" name="age_1" type="number">

    </fieldset>
    <br>

    <fieldset>
      <legend>부반장</legend>

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

      <label for="age_2">나이</label>
      <input id="age_2" name="age_2" type="number">

    </fieldset>
    <br>

    <fieldset form="classForm" disabled>
      <legend>서기</legend>

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

      <label for="age_3">나이</label>
      <input id="age_3" name="age_3" type="number">
    </fieldset>
  </form>
  • fieldset : 폼 태그 내 입력요소와 라벨들을 그룹화
  • legend : 필드셋 요소의 제목 또는 설명

마지막 fieldset 의 속성에 disabled 값을 줘서 해당 fieldset을 비활성화 시킬 수도 있다.

  <h1>텍스트 관련 인풋 타입</h1>

  <form action="#">
    <label for="txtIp">text</label> <br>
    <input 
      id="txtIp"
      type="text"
      placeholder="5자 이하"
      maxlength="5"
    >
    <br><br>

    <label for="pwdIp">password</label> <br>
    <input
      id="pwdIp"
      type="password"
      placeholder="4자 이상"
      minlength="4"
    >
    <br><br>

    <label for="srchIp">search</label> <br>
    <input id="srchIp" type="search">
    <br><br>

    <label for="tlIp">tel</label> <br>
    <input id="tlIp" type="tel">
    <br><br>
    <button type="submit">제출</button>
  </form>

텍스트 관련 input type

  • placeholder : 빈 칸 안내문
  • maxlength : 텍스트 최대 길이
  • minlength : 텍스트 최소 길이
  <h1>숫자 관련 인풋 타입</h1>

  <form action="#">
    <label for="numIp">number</label> <br>
    <input 
      id="numIp"
      type="number"
      min="0"
      max="10"
    >
    <br><br>

    <label for="rgIp">range</label> <br>
    <input
      id="rgIp"
      type="range"
      min="0"
      max="100"
    >
    <br><br>

    <label for="dtIp">date</label> <br>
    <input
      id="dtIp"
      type="date"
      min="2020-01-01"
      max="2030-12-31"
    >
    <br><br>

  </form>

숫자관련 input type

  • min : 최솟값
  • max : 최댓값
  • step : 간격
  <h1>체크 관련 인풋 타입</h1>

  <form action="#">
    <h2>checkbox</h2>
    <input 
      id="cbIp"
      type="checkbox"
      checked
    >
    <label for="cbIp">유기농</label> <br>

    <h2>radio</h2>
    <input
      type="radio"
      name="fruit"
      id="f_apple"
      value="apple"
      checked
    >
    <label for="f_apple">사과</label>
    <input
      type="radio"
      name="fruit"
      id="f_grape"
      value="grape"
    >
    <label for="f_grape">포도</label>
    <input
      type="radio"
      name="fruit"
      id="f_orange"
      value="orange"
    >
    <label for="f_orange">오렌지</label>
    <br>

    <input
      type="radio"
      name="vege"
      id="v_carrot"
      value="carrot"
      checked
    >
    <label for="v_carrot">당근</label>
    <input
      type="radio"
      name="vege"
      id="v_tomato"
      value="tomato"
    >
    <label for="v_tomato">토마토</label>
    <input
      type="radio"
      name="vege"
      id="v_eggplant"
      value="eggplant"
    >
    <label for="v_eggplant">가지</label>

  </form>
</form>

체크 관련 인풋 속성들

  • checked : 체크박스, 라디오 버튼 체크됨 여부
  • name : 옵션들의 그룹이름으로 사용
  • value : 각 옵션마다 실제로 넘겨질 값

<h1>기타 인풋 타입</h1>

<form action="#">
  <label for="fileIp">file</label> <br>
  <input 
    id="fileIp"
    type="file"
    accept="image/png, image/jpeg"
    multiple
  >
  <br><br>

  <label for="hdnIp">hidden</label> <br>
  <input
    id="hdnIp"
    type="hidden"
  >
</form>

<br><hr><br>

<form action="#">
  <label for="emlIp">email</label> <br>
  <input 
    id="emlIp"
    type="email"
  >
  <br><br>

  <button type="submit">제출</button>
</form>
  • accept : 허용 파일 형식
  • multiple : 여러 파일 업로드 가능 여부

<h1>인풋 요소 공통(대부분) 속성</h1>

<form action="#">
  <label for="valIp">value</label> <br>
  <input 
    id="valIp"
    type="text"
    value="지정됨"
  >
  <br><br>

  <label for="afIp">autofocus</label> <br>
  <input 
    id="afIp"
    type="text"
    placeholder="자동 포커스됨"
    autofocus
  >
  <br><br>

  <label for="roIp">readonly</label> <br>
  <input 
    id="roIp"
    type="text"
    value="읽기만 가능, 전송됨"
    readonly
  >
  <br><br>

  <label for="rqIp">required</label> <br>
  <input 
    id="rqIp"
    type="text"
    placeholder="필수입력!"
    required
  >
  <br><br>

  <label for="daIp">disabled</label> <br>
  <input 
    id="daIp"
    type="text"
    placeholder="입력불가, 전송 안됨"
    disabled
  >
  <br><br>
  <input
    type="radio"
    name="fruit"
    id="f_apple"
    value="apple"
    checked
  >
  <label for="f_apple">사과</label>
  <input
    type="radio"
    name="fruit"
    id="f_grape"
    value="grape"
  >
  <label for="f_grape">포도</label>
  <input
    type="radio"
    name="fruit"
    id="f_orange"
    value="orange"
    disabled
  >
  <label for="f_orange">오렌지(품절)</label>
  <br>

  <br><br>

  <button type="submit">제출</button>
</form>
  <h1>textarea 태그</h1>

  <label for="message">메시지를 입력하세요.</label> <br>
  <textarea id="message" cols="64" rows="5" placeholder="힌트 메시지 입니다."></textarea>

textarea 태그를 사용하면 텍스트 상자에 여러줄의 텍스트를 입력받을 수 있다.


  <h1>옵션들을 사용하는 태그</h1>

  <h2>select, option 태그</h2>

  <label for="lang">언어</label> <br>
  <select id="lang">
    <option value="">-- 언어 선택 --</option>
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">자바스크립트</option>
    <option value="ts">타입스크립트</option>
  </select>

  <br><br>

  <h2>optgroup 태그</h2>

  <label for="shopping">쇼핑 목록</label> <br>
  <select id="shopping">
    <optgroup label="과일">
      <option value="f_apl">사과</option>
      <option value="f_grp">포도</option>
      <option value="f_org">오렌지</option>
    </optgroup>
    <optgroup label="채소">
      <option value="v_crt">당근</option>
      <option value="v_tmt">토마토</option>
      <option value="v_ept">가지</option>
    </optgroup>
    <optgroup label="육류">
      <option value="m_bef">소고기</option>
      <option value="m_prk">돼지고기</option>
      <option value="m_ckn">닭고기</option>
    </optgroup>
  </select>

  <br><br>

  <h2>datalist 태그</h2>

  <label for="job">현재 직업</label> <br>
  <input id="job" list="jobs">
  <datalist id="jobs">
    <option value="학생">
    <option value="디자이너">
    <option value="퍼블리셔">
    <option value="개발자">
  </datalist>

select 와 option 태그를 사용하면 사용자에게 옵션을 보여주고 사용자는 옵션을 선택하는 입력을 할 수 있다. optgroup 태그를 사용해서 옵션을 그룹화 할 수도 있다.

📌 정도를 표현하는 태그


  <progress 
    max="100">
    0%
  </progress>

  <h2>
    meter 태그
  </h2>

  <meter 
    min="0" max="100"
    low="33" high="67"
    optimum="50" value="20">
    20달러
  </meter>

  <meter 
    min="0" max="100"
    low="33" high="67"
    optimum="50" value="50">
    50달러
  </meter>

  <meter 
    min="0" max="100"
    low="33" high="67"
    optimum="50" value="80">
    80달러
  </meter>

  <br>

  <meter 
    min="0" max="100"
    low="33" high="67"
    optimum="10" value="20">
    20달러
  </meter>

  <meter 
    min="0" max="100"
    low="33" high="67"
    optimum="10" value="50">
    50달러
  </meter>

  <meter 
    min="0" max="100"
    low="33" high="67"
    optimum="10" value="80">
    80달러
  </meter>

  <br>

  <meter 
    min="0" max="100"
    low="33" high="67"
    optimum="90" value="20">
    20달러
  </meter>

  <meter 
    min="0" max="100"
    low="33" high="67"
    optimum="90" value="50">
    50달러
  </meter>

  <meter 
    min="0" max="100"
    low="33" high="67"
    optimum="90" value="80">
    80달러
  </meter>

progress 태그를 사용해 진행정도를 표현할 수 있다 value 값은 자바 스크립트를 사용해서 변경해야 한다.

meter 태그를 사용해서 이상적인 값(optimum) 에 따라 실제값(value)의 수준을 알 수 있다.

👀 출처

https://youtu.be/TrC2x4N0XqY

profile
LeeEunJae
매일 조금씩이라도 성장하자

0개의 댓글