[HTML] HTML 이란

HTML5 웹 문서를 구성하는 3요소

Web & HTML 작동 원리

  • 서버는 클라이언트의 요청 내용을 분석하여 결과를 HTML로 전송하고, 연결을 끊는다.
  • 클라이언트는 서버로부터 전달 받은 HTML을 Web Browser에 표시한다.

HTML 개요

  • Hypertext Markup Language의 약자

  • 구조

    <!DOCTYPE html> <!-- 문서 type 정의 -->
<html>
	<head> <!-- 문서 머리글: 메타 정보 제목, 검색 엔진에서 사용할 키워드, 내용 등등 -->
		<meta charset="UTF-8">
		<title>title</title>
	</head>
	<body> <!-- 문서 본체 -->
		body
	</body>
</html>

  • 태그와 속성

    • 태그는 시작 태그와 종료 태그로 쌍을 이루거나 시작 태그만 존재한다.

    • 종료 태그엔 / 문자로 구분된다.

    • 또 각 태그에는 속성값이 있다.

      <a href="https://2weeks0.tistory.com/">a 태그</a>

    • 어느 태그에나 들어갈 수 있는 공용 태그가 있다.

      1. class: tag에 적용할 스타일 클래스를 지정
      2. dir: 텍스트 방향 지정 (ltr, rtl)
      3. id: 유일한 id 지정 (주로 자바스크립트에서 id를 통해 태그를 참조함)
      4. style: 인라인 스타일 적용
      5. title: 추가 정보 지정. tag에 마우스 포인터를 위치시킬 때, 해당 title이 뜸.

  • head 태그의 요소

    • html 문서의 정보를 전달하는 역할
    • title, meta, style, script, link 태그 포함 가능

  • body 태그의 요소

    • Web Browser에 보여질 문서 내용을 작성하는 곳!

    • head 태그 하단에 위치함

      <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"> <!-- 인코딩 방식 -->
    <title>title</title> <!-- title -->
    <meta name="author" content="author"> <!-- 제작자 -->
    <meta name="description" content="description"> <!-- 설명, 검색 엔진이 수집 -->
    <meta name="keyword" content="keyword1, keyword2"> <!-- 키워드, 컴마로 구분하여 나열, 검색 엔진이 수집 -->
    <script type="text/javascript"></script>
    <style type="text/css">
    .common {
      background-color: steelblue;
      color: white;
    }
    #private {
      background-color: magenta;
    }
  </style>
    <link rel="stylesheet" href="test.css">
</head>
    <body>
    <h3>문단의 제목이 들어간다.</h3>
    <div class="common">div 1(.common)</div>
    <div class="common">div 2(.common)</div>
    <div class="common">div 3(.common)</div>
    <div class="common">div 4(.common)</div>

    <div id="private">div 5(#private)</div>
  </body>
</html>
[BaekJoon] 1057 토너먼트
1254 - python

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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