• HTML이란

    • 웹브라우저 위에서 동작하는 언어, 웹브라우저가 해석하는 언어
      • html, css, javascript 모두 웹브라우저가 해석하는 요소
    • HyperText Markup Language의 약자
    • HyperText : 참조(하이퍼링크)를 통해 독자가 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트
    • Markup<태그이름> // 시작 태그</태그이름> // 종료 태그
      • <img> <br> 등과 같이 종료 태그 없이 시작 태그만을 가지는 빈태그도 존재
      • 확장자를 .html로 저장
      • 마크다운
        • 마크업의 일종으로 태그를 사용하지 않는 형식
        • github, 노션 등 서식있는 문서 사용시 활용

  • HTML의 기본 구조

    Untitled

    • <!DOCTYPE html> : HTML5 문서임을 명시(버전명시2014~)
      • 생략가능하지만 되도록 웹브라우저에 따라 달리 해석할 여지가 있어 넣는것을 권장
    • <html>
      • HTML 문서를 감싸는 최상단 태그
      • 루트 요소라 부름
    • <head>
      • HTML 문서의 메타데이터(metadata) 정의
      • 메타데이터(metadata)란 HTML 문서의 구조에 대한 부가정보(data)로서 웹 브라우저에는 직접적으로 표현되지 않는 정보
    • <body>
      • 웹 브라우저를 통해 보이는 내용(content) 부분

  • HTML의 상세 구조

    • <head>
      • <title>, <style>, <script>, <meta>, <link>등이 있음
      • <title>
        • 즐겨찾기(favorites)에 추가시 즐겨찾기의 제목으로 사용
        • 검색 엔진의 결과 페이지에 제목으로 표시
      • <script>
        • javascript 코드 또는 javascript파일 명시
      • <style>
        • 디자인을 적용하는 코드
      • <link>
        • 디자인의 외부 파일 링크 명시
          • <link rel="stylesheet" href="styles.css" type="text/css">
        • 외부 스크립트의 경우
          • <script src="script.js" type="text/javascript"></script>
      • <meta>
        • 문자인코딩, 모바일관련, 화면배율 등의 정보
        • <head>태그 내의 <meta>태그에 명시
        • <meta charset=“UTF-8”>
          • 당 문서가 어떠한 문자셋으로 저장되었는지 표기하기 위한 태그로 UTF-8이 표준 문자
          • HTML5에서는 <meta charset="UTF-8">으로 표기
            • HTML5이전에는 <meta http-equiv="Content-Type" content="text/html; charset=utf-8”>
        • <meta name="viewport" content=…>
          • 웹 페이지가 어떻게 보여질지 제어하는 데 사용되는 HTML 태그(주로 모바일 기기를 위한 설정)
          • content값으로, width=device-width, initial-scale=1.0 등 옵션을 통해 크기 조절
      • vscode에서 !+tap키를 통해 기본 틀 자동완성
    • <body>
      • 웹 브라우저를 통해 보이는 내용(content) 부분
      • <h1> ~ <h6> : 제목(heading)을 나타냄
      • <p> : 단락(paragraph)을 나타냄
      • 각종 서식태그와 수많은 태그 존재
      • h태그
        • 제목을 의미하는 태그로서 검색엔진은 각 웹 사이트의 제목을 <h>태그를 이용하여 파악
        • <h>태그의 위아래로는 약간의 여백이 자동으로 삽입
        • 크기별로 h1~h6까지 존재 <h1>제목1의 크기입니다!</h1> <h2>제목2의 크기입니다!</h2> <h3>제목3의 크기입니다!</h3>
      • p태그
        • 단락이란 내용상 끊어서 구분할 수 있는 부분을 의미하며, 문단이라고도 부름
        • 웹 브라우저는 기본적으로 여러 번의 띄어쓰기나 줄 나누기를 오직 하나의 띄어쓰기로 인식
          • 태그 내에서 줄바꿈을 하고 싶다면 <br> 태그
          • <br>태그는 종료 태그가 없는 빈 태그
        • <p>태그는 줄바꿈이 되고, 위아래로는 약간의 여백(margin)이 자동으로 삽입
        • 예시) <p>p태그는 단락(paragraph)을 나타내고, 태그의 위아래로는 여백이 자동으로 삽입됩니다.</p> <p>태그 내에서 줄바꿈을 하고 싶다면 br태그를 쓰셔야 합니다.<br> 또한 웹 브라우저는       여러 번의 띄어쓰기나 줄 나누기를 오직 하나의 띄어쓰기로 인식합니다.</p>

  • HTML 요소 기본 구조

    Untitled

    • 유의사항
      • 속성명은 소문자
      • 속성값은 쌍따옴표로 감싸서 사용

  • 그외 서식태그

    • 강조 효과
      • <b>태그(bold text) : 굵게
      • <strong>태그 : 굵게 && 중요함
      • <i>태그 : 이탤릭체
      • <em>태그 : 이탤릭체 && 중요함
      • <mark>태그 : 형광펜 하이라이팅
    • 삭제 효과
      • <del>태그(delete) : 중앙가로줄
    • 위첨자와 아래첨자 효과
      • <sup>태그 : 제곱을 나타내는데 사용
      • <sub>태그 : H2O같은 화학기호에서 2를 아래첨자로 사용할때

  • 주석, 엔티티

  • HTML 배경

  • HTML 태그안에서의 스타일-인라인 Style

  • HTML 링크

  • HTML 이미지

  • HTML 리스트

  • HTML 테이블

  • HTML 블록/인라인

  • form 태그

  • input 태그 타입

  • input 태그 속성

  • textarea 태그

  • select 태그

  • HTML과 CSS

  • css선택자