HTML 기본 개념

SERI·2022년 5월 5일
html
0

📌 HTML?

  • Hyper text

    링크
    텍스트를 초월하는
    웹페이지의 특정 부분과 연결할 수 있는 기능

  • Markup Language

    정보를 구조적으로 표현하는 언어

📝 HTML 기본 구조

<!DOCTYPE html> // HTML이라 알림, 버전 정보 알림
<html>
	<head> // 문서의 설정
		<meta charset="utf-8"> // 인코딩 방식 
	</head>
	<body> // 본문에 넣을 내용 
	</body> 
</html>

🔗 TAG

태그 상세 정보

  • <a> : 링크 생성 태그

    • target
      새 링크가 열릴 곳 설정
      • _self
        현재 페이지(default)
      • _blank
        새 탭
    • href=#(id 속성값)
      내부 링크. 설정 id로 이동.

  • 리스트

    • <ol>
      ordered list
    • <ul>
      unordered list
      • <li>
        <ul>, <ol>의 자식 태그

  • <dl> : 용어 설명 list

    • <dt>
      용어
    • <dd>
      용어 설명

  • <img>

    • src(sorce) : 필수 속성. 이미지 경로.
      • 경로
        • <상대경로>
          같은 이미지를 삽입해도 불러오는 페이지의 위치에 따라 이미지 주소 바뀜
        • <절대 경로>
          항상 주소 같음. 실제 이미지가 위치한 곳.
      • alt
        • 대체 텍스트 (필수 입력)
      • width, height
        w만 입력하면 h도 이미지의 비율을 유지하며 같이 줄어든다. 반대도.

  • <table>

    • <captin> : 표의 제목
    • <colgroup> : 열을 그룹화
      • <col> : <colgroup>에 속하는 열의 속성 정의
    • <thead> : 제목 행 그룹
      • <th> : <thead>의 셀
      • scope
        웹 접근성을 위함. 헤더 셀과 관련된 셀의 종류 명시. 스크린 리더기 장치에 유용.
    • <tbody> : 본문 행 그룹
      • <tr> : 행
      • <td> : <tbody> <tfoot>의 셀
        • colspan, rowspan : 가로 셀 병합, 세로 셀 병합
        • headers : 데이터 셀과 연관된 헤더 셀 명시
    • <tfoot> : 바닥 행 그룹. <tbody> 뒤에 위치 해야 함(HTML 5.2)

  • <form> : form 요소의 데이터를 묶어 서버로 전송

    • action : 폼 데이터를 처리하기 위한 서버의 주소

    • method : 데이터 전송 방식 지정
      (get:url에 정보 표시,default/post:url에 정보표시X)

    • <fieldset> : 여러 개의 폼 요소를 그룹화하여 구조적으로 만든다 (폼의 성격에 따라 구분)

      • <legend> : 폼 요소의 제목. fieldset 요소에 가장 먼저 자식으로 선언.

      • <input> : 입력 양식

        • type
          • text
          • password
          • radio
            : 버튼 중 하나만 선택하게 하는 방법은 name 값을 같게. checked 기능.
          • checkbox
            : 버튼들의 name을 같게 입력. 전달에 좋음. checked 기능.
          • file
            : 컴퓨터에 있는 파일을 서버에 올림
          • image
            : submit과 유사. 값을 서버에 전송. 버튼에 이미지를 넣는 기능. src, alt 작성 필요.
          • submit
            : 값을 서버에 전달
          • reset
          • button
            : custom
            => submit, reset, button은 value로 버튼의 이름 변경 가능
            - placeholder : 양식 가이드
            - id

      • <select> : 콤보박스

        • <option> : select의 자식 태그. 항목.
          • selected

      • <text area> : 여러 줄 텍스트 입력 상자

        • cols : 한 줄의 글자수
        • rows : 줄의 개수
        • placeholder

      • <button>

        • type : <input>보다 더 자유롭게 스타일 설정
          • submit
          • reset
          • button

      • <label> : 폼 컨트롤과 연결시켜주기 위함 웹 접근성에 도움

        • for
          <label for="userid">아이디:</label> <input type="text" id="userid">
          => for과 id의 값을 같게 적는다
          => "아이디:"와 text 상자는 연결된다
          => 아이디: <- 이 텍스트를 클릭하면 text 상자가 선택이 된다

    • form 태그 안에<button>를 이용해야 submit 이벤트 감지 type='button'(X)

📖 CONTENTS MODEL

HTML 요소들이 가지고 있는 성격에 따라 요소의 종류를 정의하는 규칙들이 있는데 이런 규칙들을 그룹화 시켜놓은 것

  • METADATA

    • 컨텐츠 style(표현), script(중복)을 설명하거나 다른 문서와의 관계 등 정보를 포함하는 요소
      대부분 head 태그 안에 들어가는 태그

  • FLOW

    • 문서에 사용되는 대부분의 요소
      대부분의 콘텐츠 모델, 태그가 여기에 속함

  • SECTIONING

    • heading과 footer의 범위를 결정하는 요소
      문서의 구조(아웃라인)와 관련

  • HEADING

    • 섹션의 헤더를 정의하는 요소

  • PHRASING

    • 문서의 텍스트이며 문단 내부 레벨로 마크업하는 요소

  • EMBEDDED

    • 이미지, 비디오, 플레시 등 외부 콘텐츠를 문서 내에 표현하는 요소
  • INTERACTIVE
    • 사용자와 상호작용하는 요소

🔎 SEMANTIC

컴퓨터(브라우저)가 잘 이해할 수 있는 코드

  • 의미에 맞는 요소 사용
  • 문서의 구조화
  • 인간과 기계가 모두 이해할 수 있는 것이 목표
시맨틱 태그
<article> <aside> <details> <figcaption> <figure>
<footer> <header> <main> <mark> <nav> <section>
<summary> <time>
  • 검색 엔진 최적화
    HTML 코드에서 정보를 모아 검색 키워드에 적절한 웹사이트를 구성해 검색 결과의 상위에 나올 수 있도록 하는 작업
    웹페이지의 내용을 파악하고 검색엔진에 노출이 잘되도록 하기 위해서는 HTML 요소를 적절하게 사용한 시멘틱한 마크업이 필요

📰 BLOCK LEVEL / INLINE LEVEL

  • block-level
    • 한 줄에 하나의 요소 표시
    • 부모 요소의 영역을 가로로 다 채워 표현
    • 요소 앞 뒤로 줄바꿈
    • 일반적인 모든 요소 포함
      div, h1~h6, p, ul, li, table 등
  • inline-level
    • 한 줄에 여러 개의 요소 표시
    • 본인이 가지고 있는 내용만큼의 요소 박스를 만든다
    • block 레벨의 자식 요소
      span, i, img, em, strong 등

블록레벨 요소가 인라인 레벨 요소의 자손으로 들어가지 못함
인라인 레벨 요소는 블록레벨 요소로 감쌀 수 없음 (예외:a 태그)

profile
SERI
절망의 계곡을 탈출하자
다음 포스트

CSS 기본 개념

0개의 댓글