[Web] Do it! HTML+CSS+자바스크립트 웹 표준의 정석 (1)

김두현·2024년 8월 13일

web

Web Study

목록 보기

1/1

Date: 2024.07.31. ~ 2024.08.13

Do it! HTML+CSS+자바스크립트 웹 표준의 정석(한 권으로 끝내는 웹 기본 교과서)

I. 서론

'파이썬을 이용한 퀀트 투자 포트폴리오 만들기' 서적으로 공부하던 중 금융데이터를 크롤링 하는 파트가 있었다. 해당 책에서 나온 크롤링으로는 내가 원하는 다른 인터넷 페이지의 데이터를 가져올 수 없었다. 그래서 웹 크롤링을 공부하기 위해 '파이썬으로 웹 크롤러 만들기' 책을 읽으려고 한다. 하지만 크롤링을 간단하게 접해본 결과 웹 페이지를 구성하는 언어와 동작 원리를 알아야 크롤링을 할 수 있음을 알게되었다. '파이썬을 이용한 퀀트 투자 포트폴리오 만들기'의 크롤링 파트에서 HTML과 CSS의 간단한 설명이 있었지만, 내가 다른 사이트의 데이터를 가져오려고 할 때는 책에는 없었던 태그가 많이 있어서 내가 알아볼 수 없었고, 데이터가 가져와지지 않는 등의 문제가 있었다. 따라서, 크롤링을 공부하기 이전에 간단히 웹을 구성하는 언어들의 문법을 공부하며 해석할 수 있는 수준은 되어야 겠다고 생각했다.

또한 웹 개발에도 관심있기에 HTML + CSS + JavaScript를 배워두는게 도움될 수 있고, velog 포스팅할 때 Markdown의 한계가 있는 상황에서 HTML을 써서 해결하는 경우도 있기 때문에 HTML를 잘 사용할 수 있다면 나의 블로그 정리 활동도 더 깔끔하고 가독성 있게 할 수 있을 것이라 생각했다.

이번 책은 내용이 상당히 많기에 3파트로 나누고, 크롤링 공부 중 필요하다면 2, 3파트를 공부하려고 한다.

part1. 웹의 개요와 HTML 문법
part2. CSS 문법
part3. 자바스크립트 문법

II. 웹

2-1 웹 사이트의 종류

정적 사이트(static site): 정보를 보여주기만 하는 웹 사이트
동적 사이트(dynamic site): 사용자에게 제공할 기능과 서비스를 모두 담는 사이트

2-2 서버와 클라이언트

서버(Server): 정보를 제공해 주는 컴퓨터. 웹 사이트에서 정보를 검색하거나 처리하고, 결과를 클라이언트에 전달.
클라이언트(Client): 정보를 요청하는 컴퓨터. 사용자와 서버 사이에서 화면으로 보여주는 역할.

2-3 웹 개발의 종류

프런트엔드(front-end): 사용자 앞에 보이는 영역인 웹 브라우저의 화면을 다룬다.
ex) 웹 사이트를 디자인하거나 사용자 동작에 반응하는 기능
Language. HTML, CSS, Javascript
백엔드(back-end): 사용자 뒤에서 보이지 않는 영역을 다룬다.
ex) 데이터 베이스 설계와 데이터를 처리하는 기능
Language. Java, PHP, Python 등
풀스택(Full-stack): 프런트엔드 + 백엔드

2-4 HTML, CSS, 자바스크립트: 웹 개발의 기본 3요소.

1) HTML

웹 문서의 뼈대를 만드는 역할.
웹 브라우저에 웹 문서의 내용을 보여주는 데 필요한 약속.
웹 브라우저의 여러 내용 중 제목과 본문, 이미지, 표와 같은 웹 요소를 알려주는 역할.

2) CSS

HTML로 만든 내용을 사용자가 알아보기 쉽게 웹 문서를 꾸미고 배치하는 역할
다양한 디바이스에 따라 화면이 자동으로 바뀌는 반응형 웹 디자인을 만들기 위해 필수적이다.

3) 자바스크립트

사용자의 동작에 반응하는 것을 구현하는 역할
동적 효과를 사용하려면 자바스크립트가 필요하다.
자바스크립트 프레임워크를 사용할 때 필요함.

프레임워크: 프로그램을 만들 때 필요한 여러 기능을 쉽게 구현하도록 도와주는 도구.
ex) 로그인 기능, 댓글 기능을 제공.

바닐라 자바스크립트(Vanila JavaScript): 라이브러리나 프레임워크를 사용하지 않고 자바스크립트만으로 처음부터 끝까지 직접 개발하는 것.

2-5 자바스크립트 라이브러리와 프레임워크

종류	특징	사이트
제이쿼리(jQuery)	DOM를 활용해 웹 요소를 조작하기 쉽고, 사용하기 편리한 라이브러리 도구. 최근에는 잘 사용되지 않음.	jquery.com
D3.js	웹 브라우저에서 실시간으로 변하는 정보를 시각적으로 표시하기에 적합한 라이브러리 도구.	d3js.org
부트스트랩(Bootstrap)	웹 사이트 디자인을 쉽게 만들어 주는 라이브러리 도구.	getbootstrap.com
리액트(React)	SPA(Single Page Application)나 복잡한 사이트를 개발할 때 가장 많이 사용되는 프레임워크. 페이스북이 개발함.	ko.reactjs.org
앵귤러(Angular)	웹 애플리케이션을 제작하는 프레임워크. 구글에서 개발함.	angular.io
뷰(Vue)	웹 애플리케이션에서 사용자 인터페이스를 만드는 프레임워크.	vuejs.org

SPA(Single Page Application): 한 화면에서 모든 내용을 볼 수 있는 사이트

2-6 라이브러리와 프레임워크

개발 흐름의 주도권의 차이

라이브러리: 개발자가 코딩할 때 자신에게 필요한 기능만 사용할 수 있음.
프레임워크: 개발을 시작하는 방법부터 기능을 구현하는 모든 것을 프레임워크에서 정해 놓은 대로 따라야한다.

2-7 백엔드 개발 언어와 프레임워크

언어	프레임워크	특징	사이트
Javascript, Node.js	Express	Javascript에 익숙하면 Node.js로 백엔드 개발에 사용할 수 있다. Node.js는 서버에서 자바스크립트를 실행하는 플랫폼이다. 따라서, 자바스크립트만 익숙하면 웹 개발의 전체를 다룰 수 있다.	nodejs.org/ko, expressjs.com
Java	Spring	자바는 오랫동안 백엔드 개발용으로 사랑받는 언어이기 때문에 관련 정보를 찾기 수월하다.	java.com, spring.io
Python	Django	배우기도, 사용하기도 쉬운 언어. 데이터를 많이 다루는 분야에서는 파이썬이 유리하다.	python.org, djangoproject.com
PHP	CodeIgniter	PHP는 백엔드에서 오랫동안 사용된 개발언어이다.	php.net, codeigniter.com
Ruby	Ruby on rails	-	-
Go	Revel	-	-

2-8 웹 브라우저

웹 사이트를 방문할 때 사용하거나 웹 개발자가 웹 편집기로 작성한 문서를 화면에 나타내는 프로그램.
ex) chrome, edge, firefox

2-9 웹 편집기(web editor, 코드 편집기(code editor))

웹 문서를 만들 HTML, CSS, 자바스크립트 소스를 입력하는 프로그램.
ex) (win)Nodepad++, (mac)Textmate, (mac)Coda, (win & mac) Visual Studio Code, 온라인 웹 편집기

III. HTML

3-1 HTML(HyperText Markup Language)

웹 문서를 만드는 언어이다.

하이퍼텍스트(HyperText): 문서를 서로 연결해 주는 링크함을 의미한다.
마크업(Markup): 웹 브라우저에 내용을 보여주는 텍스트, 이미지, 영상 등의 위치를 표시함을 의미한다.
태그(Tag): 웹 브라우저가 어느 부분이 어느 요소인지 구별하는 꼬리표

3-2 HTML 문서의 기본 구조

HTML 파일은 정보를 담는 <head>태그와 화면에 표시할 <body>태그로 이루어져 있다.

<!DoCTYPE html>: 현재 문서가 HTML5 언어로 작성한 웹 문서임
<html> ~ </html>: 웹 문서의 시작과 끝을 나타내는 태그
<head> ~ </head>: 웹 브라우저가 웹 문서를 해석하는 데 필요한 정보를 입력하는 부분
<body> ~ </body>: 웹 브라우저 화면에 나타나는 내용.

<html lang="ko">: html 태그에서 lang 속성으로 문서에서 사용할 언어를 지정할 수 있다. 검색 엔진에서 특정 언어로 제한해 검색할 때 우선적으로 검색되고, 화면의 내용을 소리내어 읽어 줄 때 언어에 맞춰 발음과 억양, 목소리 등을 다르게 할 수 있기 때문에 사용한다 .

3-3 <head> 태그

1) <meta> 태그

데이터에 관한 데이터인 메타 정보를 담는다.
웹 브라우저에 보이지 않지만, 웹 문서와 관련된 정보를 지정할 때 사용한다.

인코더를 지정하고, 웹 사이트의 키워드나 설명 등을 지정한다.

<meta charset="UTF-8"> 
<meta name="keywords" content="html 구조">
<meta name="description" content="html의 구조를 알아보자">

2) <title> 태그

<title> HTML 기본 문서</title>: 웹 문서의 제목을 지정.

3-4 <body> 태그

아래에 설명되는 태그들이 <body> 태그에 속한다.

3-5 시맨틱 태그 (Semantic Tag)

HTML의 태그는 시맨틱 태그이다. 이름만 봐도 어떤 역할을 하는지 쉽게 알 수 있다는 뜻.

1) <header>태그

사이트 전체의 헤더와 특정 영역의 헤더 영역을 의미한다.

2) <nav>태그

네비게이션 영역을 나타내는 태그이다. 즉, 같은 웹 문서 안에서 다른 위치로 연결하거나 다른 웹 문서로 연결하는 링크를 만든다.
<nav> 태그를 여러 개 사용할 경우 각각 id 속성을 지정해 네비게이션 마다 다른 스타일을 적용할 수 있다.

3) <main>태그

핵심 콘텐츠가 들어있는 태그.
메뉴, 사이드 바, 로고 처럼 페이지마다 똑같이 들어간 정보를 넣는 것이 아닌, 웹 문서마다 다르게 보여주는 내용으로 구성한다.
웹 문서에서 한 번만 사용할 수 있다.

4) <article>태그

독립적인 웹 콘텐츠 항목을 뜻한다.
웹에서 실제로 보여 주고 싶은 내용을 넣는다.

5) <section>태그

웹 문서에서 콘텐츠 영역을 나타낸다.
여러 개의 콘텐츠를 묶는 용도.

6) <aside>태그

본문 내용 외에 왼쪽이나 오른쪽, 혹은 아래쪽에 사이드 바를 만든다.

웹 문서에서 맨 아래쪽에 있는 푸터 영역을 만든다.
사이트 제작 정보, 저작권 정보, 연락처 등의 내용이 들어간다.

8) <div>태그

<div id="header">나 <div class="detail">처럼 id나 class 속성을 사용해 문서 구조를 만들거나 스타일을 적용할 때 사용한다.

3-6 텍스트 태그

1) <hn> 태그

제목을 나타내는 태그이다.
h는 heading 이라는 뜻
n에는 1~6 숫자가 들어간다.

2) <p>태그

paragraph 태그.
<p>와 </p> 사이에 텍스트를 입력하면 텍스트 단락이 만들어진다.

3) <br>태그

줄바꿈 태그(line break)
<p>태그 안에서는 enter를 쳐서 줄바꿈을 할 수 없다.
단락 내의 원하는 위치에 줄바꿈을 하기 위해서 사용한다.

4) <blockquote>태그

인용문을 나타내는 태그

5) <strong>, <b> 태그

텍스트를 굵게 표시할 때 사용한다.
<strong>태그는 중요한 내용을 강조하면서 굵게 표시함을 원할 때 사용한다.
<b>태그는 단순히 글자만 굵게 표시할 때 사용한다.

6) <em>, <i>태그

텍스트를 기울여 표시할 때 사용한다.
em: emphasis, i: italic
<em>태그는 강조하면서 기울기 표시할 때 사용한다.
<i>태그는 단순 텍스트를 기울게 표시할 때 사용한다.

7) 기타 텍스트 관련 태그

종류	설명
<abbr>	줄임말 표시
<cite>	참고 내용 표시
<code>	소스 코드 표시
<small>	부가 정보 표시
<sub>	아래 첨자 표시
<sub>	위 첨자 표시
<s>	취소선 표시
<u>	밑줄 표시
<ins>	공동 작업 문서에서 새로운 내용 삽입
<del>	공동 작업 문서에서 기존 내용을 삭제

3-7 목록 태그

1) <ol>태그

ordered list.
각 항목을 순서대로 나열하는 목록 태그
<li>태그로 list의 항목 표현

<ol> 태그의 type 속성

종류 설명
type = "1" 숫자(기본값)
type = "a" 영문 소문자
type = "A" 영문 대문자
type = "i" 로마 숫자 소문자
type = "I" 로마 숫자 대문자
<ol> 태그의 start 속성
start = n 형태로 사용하여, n번째 부터 다시 순서를 매기도록 설정.
```
<ol type="a" start = "3">
  <li> conetent. </li>
</ol>
```

종류	설명
type = "1"	숫자(기본값)
type = "a"	영문 소문자
type = "A"	영문 대문자
type = "i"	로마 숫자 소문자
type = "I"	로마 숫자 대문자

기본형

<ol>
  <li>항목1</li>
  <li>항목2</li>
</ol>

2) <ul>태그

unordered list
항목의 순서가 중요하지 않을 때 항목 앞에 불릿(bullet)으로 구분.
<li> 태그로 list의 항목 표현

3) <dl> 태그

설명 목록(discription list) 태그.
이름과 값 형태로 된 목록.
<dt> 태그로 이름을 설정
<dd> 태그로 값을 설정

기본형

<dl>
  <dt> 이름 </dt>
  <dd> 값 </dd>
</dl>

3-8 표 태그

1) 표의 일반 구조

<table>: 표의 시작과 끝.
<caption>: 표의 제목
<tr>: 행
<td>: 행 안의 각 셀
<th>: 제목 셀.

사용 예시

<table>
  <caption> 표 제목</caption>

  <tr>
    <th> 1열 </th>
    <th> 2열 </th>
  </tr>

  <tr>
    <td> 1행 1열</td>
    <td> 1행 2열</td>
  <tr/>

  <tr>
    <td> 2행 1열</td>
    <td> 2행 2열</td>
  <tr/>
</table>

2) 표의 구조 지정

<thead>: table + head. 제목 부분
<tbody>: table + body. 표의 본문
<tfoot>: table + foot. 표의 요약

사용예시

<table>
  <caption> 표 제목</caption>
    <thead>
      <tr>
        <th> 1열 </th>
        <th> 2열 </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td> 1행 1열</td>
        <td> 1행 2열</td>
      </tr>
      <tr>
        <td> 2행 1열</td>
        <td> 2행 2열</td>
      </tr>
    </tbody>
  </table>

3) 셀 병합

rowspan 속성: 행을 합칠 때 사용
colspan 속성: 열을 합칠 때 사용

사용 예시

<table>
  <caption> 표 제목</caption>
    <thead>
      <tr>
        <th> 1열 </th>
        <th> 2열 </th>
      </tr>
    </thead>
    <tbod>
      <tr>
        <td colspan="2"> 셀 병합 </td>
      </tr>
      <tr>
        <td> 2행 1열</td>
        <td> 2행 2열</td>
      </tr>       
    </tbody>
</table>

4) 열의 그룹화

특정 열에 배경색을 넣거나 너비를 바꾸고 싶을 때 열을 지정하려고 사용

<col>: 열을 1개만 지정
<colgroup>: <col>태그를 2개 이상 묶어서 사용.
<col>과 <colgroup> 태그는 반드시 <caption> 태그 다음에 써야한다. 즉, 표의 내용이 시작되기 전에 열의 상태를 알려 주는 것.
<colgroup> 태그 안에는 표 전체 열의 개수만큼 <col> 태그를 작성해야 한다. 즉, 스타일 속성을 지정하지 않은 열이 있어도 <col> 태그를 작성한다.

사용예시

<table>
  <caption> caption </caption>
  <colgroup>
    <col style="background-color:#eee;">
    <col>
    <col style="width:150px;">
    <col style="width:150px;">
  </colgroup>
.
.
.

이 때 span 속성을 사용해서 같은 스타일의 속성을 사용할 때는 묶어줄 수 있다.

<table>
  <caption> caption </caption>
  <colgroup>
    <col style="background-color:#eee;">
    <col>
    <col span="2" style="width:150px;">
  </colgroup>
.
.
.

3-9 이미지 태그

1) <img> 태그

일반형
```
<img src="이미지 파일 경로" alt="대체용 텍스트">
```
대체용 텍스트는 화면 낭독기 등에서 이미지를 대체하여 읽는 텍스트를 의미.
이미지 크기 조절
- width 속성: 이미지의 너비
- height 속성: 이미지의 높이
이미지 크기를 표현하는 단위

종류 설명 예시
% 현재 웹 브라우저 창의 너비와 높이를 기준으로 이미지 크기 결정 width="50%"
px 이미지의 너비나 높이를 해당 픽셀 크기 만큼 표시 width="150"

종류	설명	예시
%	현재 웹 브라우저 창의 너비와 높이를 기준으로 이미지 크기 결정	width="50%"
px	이미지의 너비나 높이를 해당 픽셀 크기 만큼 표시	width="150"

3-10 멀티미디어 파일 삽입 태그

1) <object> 태그

오디오, 비디오, 자바 애플릿, PDF 등 다양한 멀티미디어 파일 삽입시 사용.

기본형

<obejct width="너비" height="높이" data="파일"></object>

2) <embed> 태그

오디오, 비디오, 이미지 등 다양한 멀티미디어 파일 삽입시 대부분의 브라우저에서 사용 가능.

기본형

<embed src="파일 경로"  width="너비" height="높이">

3-11 오디오와 비디오 파일 삽입 태그

1) <audio> 태그

HTML에서 배경 음악이나 효과음 등 오디오 파일 삽입할 때 사용

기본형

<audio src="오디오 파일 경로"></audio>

2) <video> 태그

비디오 파일을 삽입할 때 사용

기본형

<video src="비디오 파일 경로"></video>

3) <audio>, <video> 태그의 속성

종류	설명
controls	플레이어 화면에 컨트롤 바 표시
autoplay	오디오나 비디오를 자동으로 실행
loop	오디오나 비디오를 반복 재생
muted	오디오나 비디오의 소리를 제거
preload	페이지를 불러올 때 오디오나 비디오 파일을 어떻게 로딩할 것인지 지정. 사용할 수 있는 값은 auto(기본값), metadata, none
width, height	비디오 플레이어의 너비와 높이 지정
poster="파일 이름"	비디오가 재생되기 전까지 화면에 표시할 포스터 이미지 설정

3-12 하이퍼링크 삽입 태그

1) <a> 태그

링크 제작시 사용하는 태그

href 속성: 연결할 파일이나 링크할 주소.
기본형
```
<a href="링크할 주소">텍스트 또는 이미지</a>
```
이미지를 넣고 싶으면 <img> 태그를 사용해서 <a>태그 내에 넣어줌.
target 속성에 _blank를 지정하면 연결된 문서가 새 탭에서 열리게 설정할 수 있음.

3-13 폼 태그

폼(form): 웹 사이트로 정보를 보낼 수 있는 요소. (ex. 아이디 비밀번호 입력)

1) <form> 태그

폼을 만드는 태그.

기본형

<form [속성="속성값"]>여러 폼 요소</form>

속성

종류	설명
method	사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄 것인지 지정한다. get: 데이터가 256 - 4096 Byte로 제한되고, 주소 표시줄에 사용자가 입력한 내용이 그대로 들어난다. post: 입력한 내용의 길이에 제한받지 않고, 주소 표시줄에 드러나지 않는다.
name	자바스크립트로 폼을 제어할 때 사용할 폼의 이름 지정
action	<form>태그 안의 내용을 처리할 서버 프로그램 지정
target	action에서 지정한 파일을 현재 창이 아닌 다른 위치에서 열도록 함
autocomplete	자동 완성 기능. "on"(기본값)

폼 요소 그룹화
- <fieldset> 태그: 하나의 폼 안에서 여러 구역을 나누어 표시할 때 사용.
```
<fieldset [속성="속성값"]> </fieldset>
```
- <legend> 태그: <fieldset> 태그로 묶은 그룹에 제목을 붙일 때 사용.
```
<fieldset [속성="속성값"]> 
  <legend> 그룹 이름 </legend>
</fieldset>
```
폼 요소 레이블링
- <label> 태그: 폼 요소에 레이블을 붙일 때 사용. 폼 요소와 레이블 텍스트가 서로 연결되어 있다는 것은 웹 브라우저가 알 수 있음.
- 레이블(label): 폼 요소에 붙여 놓는 텍스트.
```
1. <label>레이블명 <input></label>
2. <label for="id명">레이블명<input id="id명"></label>
```
- <label> 태그를 사용하는 방법.
  1. 태그 안에 폼 요소를 넣는 것.
  2. 은 태그와 폼 요소를 따로 쓰고, id로 연결하는 방법.

3-14 입력 태그

1) <input> 태그

다양한 폼에서 사용자가 입력한 정보를 받을 때 사용하는 태그.

기본형
```
<input type="type">
```

type 속성

종류	설명
text	한 줄짜리 텍스트를 입력할 수 있는 텍스트 박스
password	비밀번호를 입력할 수 있는 필드
search	검색할 때 입력하는 필드
url	URL 주소를 입력할 수 있는 필드
email	이메일 주소를 입력할 수 있는 필드
tel	전화번호를 입력할 수 있는 필드
checkbox	주어진 여러 항목에서 2개 이상 선택할 수 있는 체크 박스
radio	주어진 여러 항복에서 1개만 선택할 수 있는 라디오 버튼
number	숫자 조절 스핀 박스
range	숫자 조절 슬라이드 막대
date	사용자 지역 기준 날짜(연, 월, 일)
month	사용자 지역 기준 날짜(연, 월)
week	사용자 지역 기준(연, 주)
time	사용자 지역 기준 시간(시, 분, 초, 분할 초)
datetime	국제 표준시(UTC)로 설정된 날짜와 시간(연, 월, 일, 시, 분, 초, 분할 초)
datetime-local	사용자 지역 기준 날짜와 시간(연, 월, 일, 시, 분, 초, 분할 초)
submit	전송 버튼
reset	리셋 버튼
image	submit 버튼 대신 사용할 이미지
button	일반 버튼
file	파일 첨부 버튼
hidden	보이지 않지만 서버로 넘겨주는 값이 있는 필드

텍스트와 비밀번호 필드에서 사용하는 주요 속성

종류 설명
size 필드의 보여지는 길이 지정
value 필드 부분에 보여주는 내용
maxlength 입력할 수 있는 최대 문자수 지정

종류	설명
size	필드의 보여지는 길이 지정
value	필드 부분에 보여주는 내용
maxlength	입력할 수 있는 최대 문자수 지정

체크 박스와 라디오 버튼에서 사용하는 속성

종류	설명
value	선택한 체크 박스나 라디오 버튼을 서버에 넘겨줄 값 지정. 영문 혹은 숫자이고, 필수 지정
checked	기본으로 체크된 상태로 놓고 싶을 때 사용

숫자 입력 필드 사용 주요 속성

속성	설명
min	필드에 입력할 수 있는 최솟값 지정. 기본값은 0.
max	필드에 입력할 수 있는 최댓값 지정. 기본값은 100.
step	숫자 간격 지정. 기본값 1.
value	필드에 표시할 초깃값.

input 태그 주요 속성
- autofocus: 페이지를 불러오자마자 폼에서 원하는 요소에 마우스 포인터를 표시.
```
<input type=type autofocus>
```
- placeholder: 텍스트 입력 칸에 힌트 내용 표시.
```
<input type=type placeholder="hint">
```
- readonly: 읽기 전용 필드
```
<input type=type readonly>
```
- required: 필수 입력 필드
```
<input type=type required>
```

3-15 폼에서 사용하는 여러가지 태그

1) <textarea> 태그

텍스트를 여러 줄 입력하는 영역을 만드는 태그

<textarea> 태그의 속성
종류 설명
cols 텍스트 영역의 가로 너비를 문자 단위로 지정
rows 텍스트 영역의 세로 길이를 줄 단위로 지정. 지정 숫자보다 커지면 scrollable

종류	설명
cols	텍스트 영역의 가로 너비를 문자 단위로 지정
rows	텍스트 영역의 세로 길이를 줄 단위로 지정. 지정 숫자보다 커지면 scrollable

2) <select> 태그

드롭다운 목록의 시작과 끝을 나타내는 태그.
<option> 태그로 드롭다운 목록의 항목을 나타낼 수 있다.

<select> 태그의 속성

종류 설명
size 드롭다운 항목 개수
multiple 둘 이상의 항목 선택시 사용

종류	설명
size	드롭다운 항목 개수
multiple	둘 이상의 항목 선택시 사용

사용 예시

<select>
  <option> value="값1">내용1</option>
</select>

3) <datalist> 태그

데이터 목록의 시작과 끝 표시하는 태그.
<option> 태그로 데이터 목록의 항목을 나타낼 수 있다.

사용 예시

<datalist>
  <option> value="값1">선택 옵션 1</option>
</datalist>

4) <option> 태그

드롭다운 목록의 항목과 데이터 목록의 항목을 나타낼 때 사용하는 태그

<option> 태그의 속성

종류 설명
value 항목 선택시 서버로 넘겨줄 값 지정
selected 기본적으로 선택해서 보여 줄 항목 지정

종류	설명
value	항목 선택시 서버로 넘겨줄 값 지정
selected	기본적으로 선택해서 보여 줄 항목 지정

5) <button> 태그

폼을 전송하거나, 리셋하는 기능의 버튼을 제작하는 태그

<button> 태그의 속성

종류 설명
submit 폼을 서버로 전송 (=<input type="submit">)
reset 폼에 입력한 내용 초기화 (=<input type="reset">)
button 버튼의 형체만 제작 (=<input type="button">)

종류	설명
submit	폼을 서버로 전송 (=<input type="submit">)
reset	폼에 입력한 내용 초기화 (=<input type="reset">)
button	버튼의 형체만 제작 (=<input type="button">)

속성별 사용 예시

<button type="submit">내용<button>
<button type="reset">내용<button>
<button type="button">내용<button>

김두현

HYU ERICA 23 ICT융합학부 미디어테크놀로지전공 김두현

2개의 댓글

yongseok

2024년 8월 30일

Do it! 웹을 처음 공부하면서 봤던 감사한 책 반가워요.

1개의 답글

[Web] Do it! HTML+CSS+자바스크립트 웹 표준의 정석 (1)

Web Study

I. 서론

II. 웹

2-1 웹 사이트의 종류

2-2 서버와 클라이언트

2-3 웹 개발의 종류

2-4 HTML, CSS, 자바스크립트: 웹 개발의 기본 3요소.

1) HTML

2) CSS

3) 자바스크립트

2-5 자바스크립트 라이브러리와 프레임워크

2-6 라이브러리와 프레임워크

2-7 백엔드 개발 언어와 프레임워크

2-8 웹 브라우저

2-9 웹 편집기(web editor, 코드 편집기(code editor))

III. HTML

3-1 HTML(HyperText Markup Language)

3-2 HTML 문서의 기본 구조

3-3 <head> 태그

1) <meta> 태그

2) <title> 태그

3-4 <body> 태그

3-5 시맨틱 태그 (Semantic Tag)

1) <header>태그

2) <nav>태그

3) <main>태그

4) <article>태그

5) <section>태그

6) <aside>태그

7) <footer>태그

8) <div>태그

3-6 텍스트 태그

1) <hn> 태그

2) <p>태그

3) <br>태그

4) <blockquote>태그

5) <strong>, <b> 태그

6) <em>, <i>태그

7) 기타 텍스트 관련 태그

3-7 목록 태그

1) <ol>태그

2) <ul>태그

3) <dl> 태그

3-8 표 태그

1) 표의 일반 구조

2) 표의 구조 지정

3) 셀 병합

4) 열의 그룹화

3-9 이미지 태그

1) <img> 태그

3-10 멀티미디어 파일 삽입 태그

1) <object> 태그

2) <embed> 태그

3-11 오디오와 비디오 파일 삽입 태그

1) <audio> 태그

2) <video> 태그

3) <audio>, <video> 태그의 속성

3-12 하이퍼링크 삽입 태그

1) <a> 태그

3-13 폼 태그

1) <form> 태그

3-14 입력 태그

1) <input> 태그

3-15 폼에서 사용하는 여러가지 태그

1) <textarea> 태그

2) <select> 태그

3) <datalist> 태그

4) <option> 태그

5) <button> 태그

2개의 댓글