2025-08-25

오늘 배운 것

HTML

block 요소와 inline 요소

  • block 요소
    • 태그를 사용하면 자동적으로 줄바꿈이 되는 요소
    • 주로 문서의 구조나 레이아웃을 정의하는데 사용됨
    • 종류
      • address
      • blockquote
      • hr
      • center
      • dir
      • div
      • dl
      • fieldset
      • form
      • h1 ~ h6
      • br
      • isindex
      • menu
      • noframes
      • ol
      • p
      • pre
      • table
      • ul
  • inline 요소
    • 태그를 사용하면 한 줄 안에서 다른 인라인 요소와 함께 표시됨
    • 주로 텍스트와 관련된 요소와 사용됨
    • 종류
      • a
      • b
      • big
      • button
      • cite
      • code
      • em
      • i
      • iframe
      • img
      • input
      • label
      • q
      • select
      • small
      • span
      • strong
      • sub
      • sup
      • textarea
      • u

문서의 구조

  • 문자 인코딩 및 문서 키워드, 요약 정보 표시
    • <meta charset="UTF-8">
  • 주석문
    • <!-- -->

특수 문자와 공백

  • &nbsp; : 공백
  • &lt; : <
  • &gt; : >
  • &amp; : &
  • &dollar; : $
  • &won; : 원화
  • &copy; : 카피라이터
  • &reg; : 레지스터 트레이드마크

셀병합

  • <td colspan="2"> : 가로로 셀 병합
  • <td rowspan="2"> : 세로로 셀 병합

img

  • src : 이미지 파일의 경로를 지정함
  • alt : 이미지를 설명하는 텍스트
    • 이미지가 로드되지 않을 때 대체 텍스트로 사용됨

a

  • target = "_blank" : 새 창이나 새 탭으로 열림
  • target = "_selt" : 현재 화면에서 열림(기본값)

form

  • enctype = "multipart/form-data" : 파일 업로드나 javaScript의 FormData 객체를 이용한 전송

하위 태그

  • <fieldset> : 관련된 입력 요소를 그룹화하여 시각적으로 구분함
  • <legend> : <fieldset>의 제목을 정의
  • <label> : 입력 필드에 대한 설명이나 이름을 제공함
  • <input> : 사용자로부터 데이터를 입력받기 위한 필드
  • <textarea> : 여러 줄의 텍스트 입력을 위한 필드
  • <select> : 선택할 수 있는 옵션 목록을 제공하는 드롭다운 메뉴
  • <option> : <select> 태그 안에서 선택할 수 있는 개별 옵션
  • <button> : 폼 제출을 위한 버튼을 생성함.

전송방식의 비교

  • Get
    • 상황
      • 명시적으로 post라고 하지 않은 모든 경우로 default
      • 주소창에 직접 경로명을 입력하고 요청하거나 <a>를 통한 경우
      • form 명시적으로 get 방식으로 전달할 경우
    • 파라미터 전달
      • 주소창을 통해 query string으로 파라미터 전달
      • www.google.co.kr?page=1&q=today
    • 데이터 양
      • 브라우저별로 길이 제한. 상대적으로 적은 데이터만 전송 가능
    • 보안성
      • 데이터가 노출될 수 있어 보안에 취약
    • 용도
      • request의 처리가 데이터에 영향을 주지 않을 경우 : 단순 조회
      • 파라미터가 포함된 요청 자체를 bookmark로 사용 하고 싶을 때
  • Post
    • 상황
      • 명시적으로 post 방식으로 선언한 경우
    • 파라미터 전달
      • 요청의 바디에 포함되어 전달
    • 데이터 양
      • 용량에 제한이 없음
    • 보안성
      • 데이터가 노출되지 않고 상대적으로 보안에 강함
    • 용도
      • 요청 처리가 서버의 데이터에 영향을 줄 경우
        • 자료 수정, 삭제, 추가
      • 보안이 필요한 경우, 파일 업로드 등

input

  • type="checkbox" : 여러 항목 중 0개 이상을 선택할 때 사용
  • type="radio" : 여러 항목 중 최대 하나를 선택할 때 사용
  • 속성 특성
    • name : 항목들이 그룹핑 되어야 하므로 input의 name 속성이 같아야 함
    • value : <checkbox>의 경우 동일한 name으로 여러 값이 전달되므로 서버에서 배열로 처리
    • checked : 요소들의 초기 선택 상태 설정
  • 요소 선택과 <label> 사용
    • 글씨를 눌렀을 때 해당 인풋 요소가 선택되도록 라벨로 둘러싸거나, 라벨의 for 요소에 input id 속성 연결

results matching ""

    No results matching ""