[HTML] 웹 개발 언어_HTML의 목록, 폼, 오디오와 비디오 태그 활용

---

 

 

데이터 분석을 위한 웹 개발 언어

 

✔️ 목록 태그

✔️ 폼 태그

✔️ 오디오와 비디오 태그

 

 

---

 

 

✔️ 목록 태그

 

 

 

 

순서가 없는 목록

<ul> : ul(unordered list)로 순서가 중요하지 않은 항목 나열 시 사용
<li> : 순서 내용은 해당 태그로 감싸며, 기본적으로 앞에 점(•) 표시 붙음

<h1>내가 좋아하는 과일</h1>
<ul>
  <li>딸기</li>
  <li>바나나</li>
  <li>사과</li>
</ul>

 

 

 

+

 

 

2단 목록으로 확장

<ul> 안에 또 다른 <ul>을 넣으면 계층적인 목록 생성 가능

<h1>내가 좋아하는 음식</h1>
<ul>
  <li>과일</li>
  <ul>
    <li>딸기</li>
    <li>바나나</li>
    <li>사과</li>
  </ul>
  <li>면류</li>
  <li>음료수</li>
</ul>

 

 

 

 

 

순서가 있는 목록

<ol> : ol(ordered list)의 약자로, 순서가 중요한 항목을 나열할 때 사용
<li> : 순서 내용은 해당 태그로 감싸며, 기본적으로 숫자(1, 2, 3…) 표시 붙음

<h1>내가 좋아하는 음식</h1>
<ol>
  <li>과일</li>
  <li>면류</li>
  <ul>
    <li>라면</li>
    <li>자장면</li>
    <li>짬뽕</li>
    <li>비빔면</li>
  </ul>
  <li>음료수</li>
</ol>

 

 

 

 

 

정의형 목록

설명이 필요한 경우 깔끔하게 정리 가능

<dl> : dl(definition list)의 약자로, 용어와 그에 대한 설명을 나열할 때 사용
<dt> : 용어 정의
<dd> : 설명 작성

<h1>IT 직군</h1>
<dl>
  <dt>UI 디자이너</dt>
  <dd>가능성과 심미성을 고려한 UI 디자인</dd>

  <dt>프론트엔드 개발자</dt>
  <dd>사용자가 직접 이용하는 프론트 화면 개발</dd>

  <dt>백엔드 개발자</dt>
  <dd>시용자 화면 뒤에 있는 웹 서버나 데이터베이스의 입출력 개발</dd>
</dl>

 

 

---

 

 

✔️ 폼 태그

 

 

 

 

폼 태그

<form> : 사용자로부터 입력을 받아 서버로 전달하는 역할 수행

action : 입력 데이터를 보낼 서버 주소(URL) 지정
method : 데이터 전송 방식(GET 또는 POST)을 설정 (GET은 URL에 데이터가 보이고, POST는 숨겨서 보냄)

<form action="전송위치 URL" method="전송방법 GET, POST">
</form>

 

 

 

+

 

 

라벨 태그

<label> : HTML에서 입력 요소와 연결해 주는 역할
폼에서 사용되며, 사용자가 입력해야 할 내용을 설명하거나 클릭하기 쉽게 만들어줌
(아이디, 비밀번호 등 입력란의 용도 알려줌)

<label>아이디</label>
<input type="text">

 

 

 

 

 

입력 태그

<input> : 사용자로부터 데이터를 받는 역할 수행

 

 

 

 

텍스트와 비밀번호 입력

<input> : 사용자로부터 데이터를 받는 핵심 태그
type : 속성을 바꾸며 여러 형태로 변환(문자형, 비밀번호 형식 등)

<label>아이디</label>
<input type="text">
<br>
<label>패스워드</label>
<input type="password">

 

 

 

 

 

체크박스

여러 개 선택 가능

type="checkbox" : 사용자가 여러 항목을 선택 가능
value :  서버로 보낼 데이터 값

<h4>취미</h4>
<label>스포츠</label>
<input type="checkbox" value="sports" />
<label>게임</label>
<input type="checkbox" value="game" />
<label>요리</label>
<input type="checkbox" value="cooking" />

 

 

 

 

 

라디오 버튼

하나만 선택 가능

type="radio" : 한 번에 하나만 선택 가능
name : 같은 값을 공유해야 그룹으로 묶일 수 있음

<h4>직업</h4>
<label>UI/UX 디자이너</label>
<input type="radio" name="job" value="design">
<label>프론트엔드 개발자</label>
<input type="radio" name="job" value="front-end dev">
<label>백엔드 개발자</label>
<input type="radio" name="job" value="back-end dev">

 

 

 

 

 

파일 업로드

type="file" : 사용자가 파일을 업로드 가능하도록 파일 선택 창 제공

<h3>파일 첨부</h3>
<label>첨부 파일</label>
<input type="file">

 

 

 

 

 

날짜 선택

type="date" : 달력을 열어 날짜를 고를 수 있도록 제공

<h3>날짜 선택하기</h3>
<label>날짜 선택</label>
<input type="date">

 

 

 

 

 

전송과 취소 버튼

type="submit" : 폼 데이터를 서버로 보냄
type="reset" : 입력된 내용을 초기화

<h3>전송버튼/취소버튼</h3>
<label>전송</label>
<input type="submit">
<label>취소</label>
<input type="reset">

 

 

 

 

 

드랍다운 메뉴

<select> : 목록의 보기를 보여주며 선택 도움 역할 수행

<select> : 드롭다운 목록 생성
<option> : 각 항목은  해당 태그를 정의

<h3>select 버튼 드룹다운 메뉴</h3>
<select>
  <option>HTML</option>
  <option>CSS</option>
  <option>javascript</option>
</select>

 

 

 

 

 

긴 텍스트 입력 공간

<textarea> : 여러 줄의 텍스트를 입력받을 때 사용

<h3>텍스트 박스</h3>
<textarea></textarea>

 

 

 

---

 

 

 ✔️ 오디오와 비디오 태그

 

 

 

 오디오 파일 재생 태그

<audio> : 웹페이지에 음성 파일(예: MP3)을 넣고 재생

src : 재생할 오디오 파일의 경로를 지정
controls : 컨트롤 패널을 추가(재생, 일시정지 등 기능 제공)
autoplay : 페이지가 로드되자마자 오디오가 자동 재생 (브라우저에 따라 적용되지 않을 수 있음)
loop : 오디오가 끝나면 다시 처음부터 반복 재생
preload : 파일을 미리 불러와 재생 준비

<audio src="./media/calm.mp3" controls></audio>

 

 

 

 

 

비디오 파일 재생 태그

<video>  : 동영상 파일(예: MP4)을 웹에 삽입해 재생

src : 비디오 파일 경로를 지정
controls : 컨트롤 패널을 추가(재생, 일시정지 등 기능 제공)
autoplay : 페이지가 로드되자마자 오디오가 자동 재생 (브라우저에 따라 적용되지 않을 수 있음)
loop : 오디오가 끝나면 다시 처음부터 반복 재생
preload  : 파일을 미리 불러와 재생 준비
muted : 소리를 끄고 재생
poster : 비디오 시작 전 표시할 썸네일 이미지 경로 지정

<video src="동영상 파일 경로 지정" controls></video>

<!-- 비디오 재생 전 썸네일 지정 -->
<video src="./media/cloud.mp4" controls poster="./media/Image20250304153251.jpg"></video>

 

 

 

---

 

 

이번 내용에서는 HTML에서의

목록, 폼(form), 오디오와 비디오 태그에 대해 공부하였습니다.

 

HTML을 공부하는 이유는 데이터 분석을 위해서는 데이터 수집을 진행해야 하는데

웹에서 원하는 데이터를 효율적으로 가져오기 위함입니다.

 

더불어 데이터 분석을 위해서 DB와 SQL을 공부도 필요한데

위 블로그 글 참고해서 공부하면 좋을 것 같습니다.

 

'BOOTCAMP/SQL(MySQL)' 카테고리의 글 목록