14. HTML - 기초 개념, 문서 구조, 태그

20190 단어 TILsemanticTagshtmlTIL

HTML 기초 개념

  • HyperText Markup Language
  • 웹페이지의 내용과 구조를 담당한다.
  • 태그를 통해 정보를 구조화한다.
  • W3C

HTML 문서 구조

  • HTML5 문서의 구조
<!DOCTYPE HTML>
<html lang="ko">

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>문서 제목</title>

    <link rel="stylesheet" href="style.css">

    <script src="main.js"></script>

  </head>

  <body>

    화면에 표시할 모든 콘텐츠는 이곳에 기술한다.

  </body>

</html>
  • <!DOCTYPE HTML> : 무슨 버전의 HTML을 사용했는지 브라우저에 알려준다. (HTML5)
  • <html> 태그 : html 문서의 시작과 끝을 알린다.
  • <style> </style> : style 정보를 넣을 수 있다. (보통 link로 대신해 사용)

<meta> 태그

  • <head>태그 안에 위치하며 웹서버와 웹브라우저간에 교환되는 정보를 정의한다.

  • 브라우저나 검색엔진 등에 의해 사용된다.

  • name="정보명" -> 지정하지 않으면 http-equiv와 같다
    content="정보값" -> meta 정보의 내용
    http-equiv="항목명" -> 브라우저가 서버에 명령을 내리는 속성
    (문서가 응답 헤더와 함께 웹 서버에서 웹 브라우저로 전송되었을 때에만 의미를 갖는다.)

브라우저가 사용할 문자셋 -> 한,중,일어가 포함되면 반드시 추가한다.
<meta charset="utf-8">

디바이스의 가로크기가 웹페이지의 가로크기와 같다.
<meta name="viewport" content="width=device-width">

검색엔진이 사용할 키워드
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

웹페이지의 설명
<meta name="description" content="Web tutorials on HTML and CSS">

웹페이지의 저자
<meta name="author" content="John Doe">

30초마다 refresh
<meta http-equiv="refresh" content="30">

HTML의 태그

제목, 텍스트, 본문 태그

  • <h1> ~ <h6> : 제목
  • <span> : inline-element로 주로 텍스트 입력
  • <div> : division (레이아웃 분리, 그룹화)
  • <strong> : bold체
  • <em> : 강조 이탈릭체
  • <small> : 작은 글씨
  • <mark> : 글씨 하이라이트
  • <del> : 글씨 취소선
  • <ins> : 밑줄 추가
  • <p> : 단락
  • <br> : 강제 개행 (line break) → empty element로 종료 태그가 없다.
  • <pre> : 형식화된 텍스트 (작성한 그대로 보여주기)
  • <hr> : 수평줄 삽입
  • <q> : 짧은 이용문 (따옴표로 감싸기)
  • <blockquote> : 긴 이용문 (양쪽 여백을 자동으로 적용)
  • &nbsp; : 공백(space) 추가하기

HyperText와 <a> 태그

  • Hyper : 정보가 동일 선상에 있는 것이 아니라 다중으로 연결된 상태

  • Hyperlink : 한 텍스트에서 다른 텍스트로 건너뛰어 읽을 수 있는 기능

  • HTML에서 <a> tag가 그 역할을 한다.
    Ex) <a href="[http://www.google.com](http://www.google.com/)" target="_blank">*Visit google.com !*</a>

  • href="" 속성 : 이동하고자 하는 파일의 위치(경로path)를 값으로 받는다.

    절대 URL or 상대 URL

    fragment identifier : 페이지 내 특정 id를 갖는 요소에 링크. ex) #top

    메일 : mailto : 메일주소

    script : 자바스크립트 코드

  • target="" 속성 : 링크를 클릭했을 때 윈도우를 어떻게 오픈할 지

    _blank : 현재 윈도우에 오픈 (기본값)

    _self : 새로운 윈도우에 오픈

디렉터리와 링크 파일경로

  • 루트 디렉터리 : 최상위 디렉터리

    Unix: /

    Windows: C:\

  • 홈 디렉터리 : 사용자에게 할당된 디렉터리

    Unix: /Users/{계정명}

    Windows: C:\Users\{계정명}

  • 작업 디렉터리 : 작업 중인 파일이 위치한 디렉터리

    ./

  • 부모 디렉터리 : 작업 디렉터리의 부모 디렉터리

    ../

  • 절대 경로 : 루트 디렉터리를 기준으로 파일의 위치

    /Users/leeungmo/Desktop/myImage.jpg

  • 상대경로 : 현재 작업 디렉터리를 기준으로 상대적인 위치

    ../../dist/index.js

리스트 태그

  • 순서없는 목록 (Unordered List)
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
  • 순서있는 목록 (Ordered List)
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

  • type="" : 순서를 나타내는 문자 지정

    1 : 숫자 (기본값)

    A, a, I, i 올 수 있다. (Ex : 로마 숫자로 변경)

  • start="" : 리스트의 시작값 지정

  • reversed : 리스트의 순서를 역으로 표현

테이블 태그



이미지와 미디어 태그

<img> 태그

  • empty element로 종료 태그가 없다.
<img src="assets/images/doug.jpg" alt="doug" width="100">
  • src : 이미지 파일 경로
  • alt : 이미지 파일이 없을 경우 표시되는 문장
  • width와 height : 이미지의 너비와 높이 (CSS에서 지정하는 것이 일반적)

<audio> 태그

  • <source> 태그를 사용해 브라우저별 파일 형식 차이 문제를 해결 할 수 있다.
<audio src="assets/audio/Kalimba.mp3" controls></audio>

<audio controls>
   <source src="assets/audio/Kalimba.mp3" type="audio/mpeg">
   <source src="assets/audio/Kalimba.ogg" type="audio/ogg">
 </audio>

type 속성 생략 가능하다.
  • src : 파일 경로
  • preload : 재생 전 파일을 모두 불러올 것인지
  • autoplay : 자동 재생 여부
  • loop : 반복 여부
  • controls : 재생도구 표시 여부

<video> 태그

  • <source> 태그를 사용해 브라우저별 파일 형식 차이 문제를 해결 할 수 있다.
<video width="640" height="360" controls>
  <source src="assets/video/wildlife.mp4" type="video/mp4">
  <source src="assets/video/wildlife.webm" type="video/webm">
</video>
  • src : 파일 경로
  • poster : 준비 중 표시될 이미지 파일 경로
  • preload : 재생 전 파일을 모두 불러올 것인지
  • autoplay : 자동 재생 여부
  • loop : 반복 여부
  • controls : 재생도구 표시 여부
  • width 와 height : 너비와 높이를 지정
    • 자꾸 헷갈리지마
      <input>, <img>, <br> ----> 시작과 동시에 종료되는 empty element
Pythhon: 객체 가져오기 메소드 목록
인생의 게임

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage