HTML

Vincent·2023년 1월 31일
0

웹 페이지를 작성(구조화)하기 위한 언어

HTML 문서의 기본구조(!+tab)

  html : 문서의 최상위 요소
  head : 문서 메타데이터 요소 (문서 제목, 인코딩, 스타일, 외부 파일 로릳)
  -> title, meta, link, script, style
  body : 문서 본문 요소 (실제 화면 구성과 관련된 내용)
  • 시맨틱 태그 : HTML5로 넘어오면서 대거 추가. 콘텐츠의 의미를 명확하게 하기 위해 이름에 의미를 붙이자. 가독성을 높이고 유지보수 쉬워짐.

header, section, footer, form, nav, aside, article
  • DOM

    -> 텍스트 파일인 HTML 문서를 브라우저에서 렌더링 하기 위한 구조. HTML 문서 내의 각 요소에 접근

  • 주요 태그와 속성

    • <html>
      <head> : 헤드
      <title> : 타이틀 - 헤드 안에 속한다.
      <body> : 문서의 본문  - 헤드와 바디 사이에는 아무것도 들어갈 수 없다. 
      <h1> ~ <h6> : 제목
      <p> : 단락
      <hr> : 수평줄 삽입
      <br> : 줄 바꾸기 - <br> 태그는 다른 글자 태그 내부에 삽입이 가능하나 <hr> 태그는 불가능하다. 
      <b> : 진하게
      <strong> : 중요한
      <em> : 강조
      <i> : 이탤릭으로 강조
      <div> : 블록 형식으로 공간 분할 - 블록 전체에 동일한 CSS 스타일 적용 또는 자바스트립트로 블록을 하나의 단위처럼 다루고자 할 때 사용 
      <span> : 인라인 형식으로 공간 분할 - 텍스트 일부분에 특별한 모양 적용 또는 자바스크립트 코드로 텍스트 일부분을 제어할 때 사용 
      <a> : 하이퍼링크 - 현재 HTML 페이지에서 다른 HTML 연결하는 링크를 만들고자 할 때 사용 (href 속성 활용)
      <style> : CSS 스타일 시트를 담는 태그 
      <ol> : 순서 있는 리스트 
      <ul> : 순서 없는 리스트
      <li> : 리스트의 아이템 

Element

  • form : 웹에서 사용자 정보를 입력하는 여러 방식(text, button, checkbox 등)을 제공하고 사용자로부터 할당된 데이터를 서버로 전송하는 역할을 담당

    • 핵심속성

      • action : 입력 데이터가 전송된 URL 지정

      • method : 입력 데이터 전달 방식 지정(http request method)

        1. GET : 서버로부터 정보를 조회하는 데 사용. 데이터를 가져올 때만 사용해야 함

          ​ 우리가 서버에 요청을 하면 html 문서 파일 한장을 받는데, 이때 방식이 get

          ​ 반드시 특정 리소스를 가져오도록 요청할 때만 사용(CRUD 중 R)

        2. POST : 서버로 데이터를 전송할 때 사용. 리소스를 생성/변경

          ​ 서버에 변경사항을 만듦 (CRUD 중 C,U,D)

  • input : 사용자로부터 데이터를 입력받기 위해 사용. type 속성에 따라 동작 방식 달라짐

    • 핵심속성
      • name
      • 중복 가능, 양식을 제출했을 때 name이라는 이름에 설정된 값을 넘겨서 값을 가져올 수 있음
      • 주요 용도는 GET/POST방식으로 서버에 전달하는 파라미터로 매핑하는 것
      • GET 방식에서는 URL에서 ?key=value&key=value 형식으로 데이터를 전달함
  • label : 사용자 인터페이스 항목에 대한 설명을 나타냄

    • label을 input 요소와 연결하기
      • input에 id 속성 부여
      • label에는 input의 id와 동일한 값의 for 속성이 필요
      • label을 클릭해서 input에 초점을 맞추거나 활성화시킬 수 있음
      • label 요소와 연결할 수 있는 요소 : button, input, select, textarea...

Attribute

  • for : for 속성의 값과 일치하는 id를 가진 문서의 첫번째 요소를 제어

  • id : 전체 문서에서 고유해야 하는 식별자를 정의

    • 사용 목적 : linking, scripting, styling 시 요소를 식별
profile
Frontend & Artificial Intelligence

0개의 댓글