Dev-dotoli TIL

inf 2 html



HTML

demo1.html



HTML

Hyper Text Markup Language

  • 그 주문을 기록해둔 책

    • 프로그래밍 도구 x
    • 문서를 기술하는 양식 o

  • markup
    사람이 읽을 수 있는 문서의 요소를
    태그를 이용해서 기술하는 컴퓨터 언어


요소(element)는 tag로 둘러 쌓여있음

<p>Hello world!</p>

tag 중첩사용

<p>My text is so <i>italic</i> today</p>

중요한 element의 종류

  • 불록(block)단위 element

    • 항상 새 줄에서 시작
    • 가능한 너비를 모두 차지

  • 인라인(inline) element

    • 새 줄에서 시작하지 않고, 필요한 만큼만 너비를 차지

      • 인라인 블록
        • 너비와 높이를 가짐(block의 특징)
        • 새 줄에서 시작하지 않음(inline의 특징)


Block element

webpage에서 보여지는 block webpage를 나타내는 구조적인 element

  • 단락 paragraphs
  • 목록 list
  • 탐색 메뉴 navigation menu
  • 바닥 글 footer
  • 기타 등등

inline element 안에 중첩되지 않음 다른 block level element안에 중첩 가능

<style>
  strong {
    background-color: blanchedalmond;
    width: 100px;
    height: 100px;
    display: block;
  }
</style>

<span> 안녕하세요 </span>
<strong>설리번 프로젝트 </strong>
<em>예시 입니다.</em>


Inline element

block level element 안에 존재 문서 안에서 작은 부분으로 존재함

  • 문서에서 새로운 줄로 나타나지 않고
    text의 구문안에서 나타남

  • <a>, <em>, <strong> 등의 형태

<style>
  strong {
    background-color: blanchedalmond;
    width: 100px;
    height: 100px;
    display: inline;
<style>

Inline-block element

<style>
  strong {
    background-color: blanchedalmond;
    width: 100px;
    height: 100px;
    display: inline-block;
<style>


Void element

Single tag만으로 구성 (종료 tag 없음)
문서에 삽입 / 첨부 되는 경우

  • <img>, <embed>
<img src="sample_image.png" />


Attribute 속성

HTML element는 attribute를 보유
elelment에 대한 추가적인 정보를 제공

  • id, disabled, onclick
<div id="hello"></div>


HTML 문서 구성

DOCTYPE
HTML page가 올바른 html로
간주하기 위해 따라야 하는 일련의 규칙

  • DOCTYPE : HTML page가 올바른 html로
    간주하기 위해 따라야 하는 일련의 규칙
  • html : 모든 페이지를 감싸는 역할
  • meta : website의 character set을 바꾸는 것
    utf-8로 바꾸면 세계대부분의 문자가 잘 표시됨
  • title : page의 제목을 설정
  • body : text, audio, video등 모든 내용을 포함
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>


주석

브라우저가 읽어 들이지 않는 문장

  • 개발자들이 코드를 이해하기 위해 사용함
<p>I'm not inside a comment</p>
<!--<p>I'm not inside a comment</p> -->