web 공부 2024.03.22

Posted Mar 22, 2024

html 로고 img

By Jiwoon

9 min read

web - 2일차 (2024.03.22)

HTML 기본 학습 내용

HTML은 웹 페이지를 만들기 위한 표준 마크업 언어. 다음은 HTML 문서의 기본 구조와 주요 요소들에 대한 설명.

HTML 문서의 기본 구조

<!DOCTYPE html>: 문서 타입 선언으로 HTML5 문서를 나타냄.
<html lang="ko">: 문서의 최상위 요소로, lang 속성으로 언어를 지정.
<head>: 문서의 메타데이터를 포함하는 섹션.
<meta charset="UTF-8">: 문서의 문자 인코딩을 지정.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: 반응형 웹 디자인을 위한 뷰포트 설정.
<title>: 웹 페이지의 제목을 지정.
<body>: 문서의 본문 내용을 포함하는 섹션.

오늘 배운 HTML 요소

제목 태그(<h1>, <h2>, <h3> 등): 제목과 부제목을 나타내는데 사용.
<p>: 문단을 나타냄.
<b>와 <strong>: 굵은 글씨로 표시. <strong>은 중요한 텍스트를 나타내기도 함.
<em>: 텍스트를 이탤릭체로 표시.
<mark>: 텍스트를 형광펜으로 강조.
<br/>: 줄바꿈을 나타냄.
<img>: 이미지를 문서에 삽입.
<a>: 하이퍼링크를 생성.
리스트 요소: 순서 없는 리스트(<ul>), 순서 있는 리스트(<ol>), 정의 리스트(<dl>, <dt>, <dd>) 등이 있음.
<table>: 표를 만듦. <tr>은 행을, <th>와 <td>는 각각 헤더 셀과 일반 셀을 나타냄.
<blockquote>: 인용문
<pre>: 줄 바꿈 그대로 유지
 : 띄어쓰기
< 꺽쇠 < 표시
> 꺽쇠 > 표시
iframe 내 문서(웹)안에 다른 문서(웹)를 띄움
fieldset 입력폼 만들때 그룹화 된 거 만들때 씀
legend fieldset의 레이블

HTML 속성

<h1 title="이건 제목임">제목</h1> h1다음에 오는 titlt은 제목이라는 글자에 커서를 둘 때 이건 제목임이라는 글이 표시됨
src 속성으로 경로를 지정하고, alt 속성으로 대체 텍스트를 제공.
href 속성으로 링크의 목적지를 지정.
width 로 img 태그의 이미지의 너비를 지정 height 은 길이
target="" 은 새창으로 열것인지 그런것들을 지정 target 안에 _blank 가 들어가면 새창으로! 근데 그냥 blank로 적어도 같은 기능을 하는데 표준적인건 _ 를 사용해서 쓰는것.

html form 만들기

네이버 검색 폼

form 태그의 action 속성은 폼 데이터가 제출될 URL을 지정.
input 태그의 type="text"는 텍스트 입력 필드를 생성하며, name="query"는 폼 데이터와 함께 전송될 이름을 지정.
button 태그의 type="submit"은 폼을 제출하는 버튼을 생성.

  
<form action="https://search.naver.com/search.naver">
  <fieldset>
    <legend>네이버검색</legend>
    <input type="text" name="query" required />
    <button type="submit">검색</button>
  </fieldset>
</form>

기본 정보 입력 폼

사용자의 기본 정보(이름, 나이, 비밀번호)를 입력 받음.
이름과 나이 필드는 각각 type="text"와 type="number"를 사용합니다. 나이 입력은 0에서 200 사이로 제한됨.
비밀번호 입력은 type="password"를 사용하여 입력 내용을 가림 **표시.
placeholder 는 미리보기 글자. 아무것도 입력이 안되었을시만 표시

  
<fieldset>
  <legend>기본정보</legend>
  <ul>
    <li>이름: <input name="name" type="text" placeholder="실명입력" /></li>
    <li>
      나이: <input name="age" type="number" placeholder="0" min="0" max="200" />
    </li>
    <li>비밀번호: <input type="password" /></li>
  </ul>
</fieldset>

부가 정보 입력 폼

사용자의 거주지역, 기술, 과정, 색상 선택, 이메일, 프로필 사진, 입학일, 밥시간 등을 입력 받는 폼.
거주지역은 select 태그와 option 태그를 사용하여 드롭다운 목록을 제공.
기술은 checkbox를 사용하여 여러 항목을 선택할 수 있도록 함.
과정은 radio 버튼을 사용하여 한 가지만 선택할 수 있게 함.
색상 선택은 type="color"를, 이메일은 type="email"을, 파일업로드는 type="file"을 사용.
입학일과 밥시간은 각각 type="date"와 type="time"을 사용하여 날짜와 시간을 입력 받음.
input의 레이블 표시는 input의 id와 레이블의 for과 일치하도록 해야함

  
<fieldset>
  <legend>부가정보</legend>
  <li>
    거주지역
    <select name="" id="">
      <!-- 서버에 코드값이나 서울로 되어잇다면 거기에 맞춰야함 -->
      <option value="SE">서울</option>
      <option value="경기">경기</option>
      <option value="경남">경남</option>
      <option value="제주">제주</option>
    </select>
  </li>
  <li>
    기술:
    <!-- label의 글자를 클릭해도 체크가 되도록 -->
    <input type="checkbox" name="" id="html" />
    <label for="html">HTML</label>
    <input type="checkbox" name="" id="css" />
    <label for="css">CSS</label>
    <input type="checkbox" name="" id="js" />
    <label for="js">JS</label>
  </li>
  <li>
    과정:
    <!-- name을 통합하지 않으면 여러개 선택이 가능 -->
    <input type="radio" name="과" id="통학" />
    <label for="통학">통학</label>
    <input type="radio" name="과" id="기숙사" />
    <label for="기숙사">기숙사</label>
    <input type="radio" name="과" id="자퇴" />
    <label for="자퇴">자퇴</label>
  </li>
  <li>
    과티 색상 선택:
    <input type="color" name="" id="" />
  </li>
  <li>
    이메일:
    <input type="email" name="" id="" />
  </li>
  <li>
    프로필 사진:
    <input type="file" name="" id="" />
  </li>
  <li>
    입학일:
    <input type="date" name="" id="" />
  </li>
  <li>
    밥시간:
    <input type="time" name="" id="" />
  </li>
</fieldset>

자기소개 입력 폼

textarea 태그를 사용하여 사용자로부터 자유 형식의 텍스트 입력을 받습니다. 입력 글자수는 200자에서 300자로 제한.

  
<fieldset>
  <legend>자기소개</legend>
  <textarea
    placeholder="200자 내외로 입력"
    maxlength="300"
    minlength="200"
    name=""
    id=""
    cols="30"
    rows="5"
  ></textarea>
</fieldset>

설문 입력 폼

progress 태그를 사용하여 프로젝트 진척도를 시각적으로 표시.
input 태그의 type="range"를 사용하여 범위 선택 슬라이더를 제공.

모든 입력 데이터는 제출 버튼을 눌러 서버로 전송. 폼의 method 속성에 따라 데이터 전송 방식이 달라짐(get은 데이터를 URL에 포함시켜 전송, post는 데이터를 요청 본문에 포함시켜 전송).

  
<fieldset>
  <legend>설문</legend>
  <ul>
    <li>
      프로젝트 진척:
      <progress value="10" max="100"></progress>
    </li>
    <li>
      <input type="range" max="100" value="20" name="" id="" />
    </li>
  </ul>
</fieldset>

form의 method

method는 restfull api의 기본 post는 write이고 get은 read 수정은 put 삭제는 delete

  
<form action="" method="post"></form>

폴리텍, web

html

This post is licensed under CC BY 4.0 by the author.