FE BE 개발 메모장/HTML& DOM & CSS

HTML(Hyper Text Markup Language)

HTML을 알기위해 WEB이란 무엇인지 알아보자.

 

WEB

웹 페이지는 월드 와이드 웹 상에 있는 개개의 문서를 가르킨다. 다른 확장자(.gif, .jpg, .hwp. .doc)들 처럼 HTML도 .htm. .html 확장자 포맷을 가지고있다. 이 html 문서는 단순히 텍스트파일에 불과하지마 웹 브라우저가 구조를 해석을 해서 화면에 렌더링 해주고 사용자는 view라고 하는 스크린을 통해 접한다.

HTML

html은 Hyper Text Markup Language의 약자고, 문서화된 웹 페이지의 구조를 설계하는 마크업 언어이다. 

 

기본 용어

  • 엘리먼트(element) - 요소 (콘텐츠와 태그가 하나로 묶였을때 사용하는 용어)
  •   Open tag (여는 태그) 
  •   Close tag (닫는 태그)
Open tag       Close Tag
  <div> contents </div>
------------------------
        element
  • 어트리뷰트(attribute) - 속성
  • 밸류(value) - 값
 
        attribute 
       ------------
  <div class="tg-1"> contents </div>
             ------
              value

 

<HTML> 기본 문법

 HTML을 작성하기 위해선 DTD(DOCTYPE or Document type Definition)라는 문서타입을 반드시 HTML 문서의 최상단 위치에 넣어야한다. 

DTD 정의를 생략할 경우 웹 브라우저가 표준모드대신 비표준모드(Quirks mod)로 렌더링 되어 크로싱 브라우징에 어려움을 겪을수있다.

 

기본 HTML5 문서의 형태

 

<!DOCTYPE html>                  HTML 문서임을 명시
//html 문서 시작              
<html>                           html시작 태그, 문서 전체의 틀을 구성
<head>                           head 태그는 문서의 메타데이터를 선언
 <title>page title</title>       문서의 제목, 브라우저의 탭에 보여짐
 </head>                         </태그이름>은 해당 태그가 끝났음을 의미
 <body>                          body 태그는 문서의 내용을 담는 곳
   <h1></h1>                     heading을 의미하며, 크기에 따라 h1부터 h6까지 있음
  <div>                          content division을 의미하며, 줄바꿈 됨
   <span></span>                 줄바꿈이 없는 content 컨테이너
</div>                           div 태그가 끝났음을 의미
</body>                          body 태그가 끝났음을 의미
</html>                          html 태그가 끝났음을 의미
<!DOCTYPE html>
<html lang="ko">
  <head>
   <meta charset="utf-8">
   <meta name="html" content="html 기본 알아보기">
   <meta property="html:image" content="....logo.png">
   <title>타이틀</title>
  </head>
  <body>
  </body>
</html>

 

 

HTML문서 내에서 script(JS)와 styling(CSS)의 삽입 위치

브라우저는 HTML의 구조와 CSS 스타일을 렌더링 하는 도중 자바스크립트를 만나면 이에 대한 해석과 구현이 완료될때까지 브라우저 렌더링을 멈춘다. 그렇기 때문에 css와 자바스크립트 삽입 위치에 따라 실행순서와 브라우저 렌더링에 영향을 미치게된다.

 

외부 스크립트 연결방법

<script>자바스크립트 코드</script>

<script src=".../path/script.js"></script>
              [경로나 링크주소]
              
       type="text/javascript" [생략가능]
  • <script>요소 내에 코드를 삽입하는 경우: 해당 문서에만 적용되는 코드, 초기화등에 사용한다.
  • <script>요소에 링크 및 경로를 넣는 경우: 반복사용되는 코드를 저장해두고 필요에 따라 불러온다. 이런점 덕분에 가독성과 실행순서, 의존성들을 확인하기에 수월하기 때문에 추천되는 방식

 

<Script> 요소의 위치

<head> 에 삽입되는 경우

  <head>
   <meta charset="utf-8">
   <meta name="html" content="html 기본 알아보기">
   <meta property="html:image" content="....logo.png">
   <title>타이틀</title>
   
   <scirpt src="dd"></script>
  </head>
  • 브라우저 렌더링에 방해가 되어 무거운 스크립트가 실행되는 경우 오랫동안 완성되지 못한 화면을 노출하게 된다.
  • 문서를 초기화하거나 설정하는 가벼운 스크립트들이 자주 사용된다.
  • 문서의 DOM 구조가 필요한 스크립트의 경우 document.onload와 같은 로드 이벤트가 추가되어야 에러없이 작동된다.

 

<body>에 삽입되는 경우

 

  <body>
     <scirpt src="dd"></script>
  </body>
  • 브라우저가 렌더링이 완료된 상태에서 스크립트가 실행되기에 콘텐츠를 변경하는 스크립트의 경우 화면에 노출된체로 변화된다.
  • 대부분의 스크립트위 위치로 추천되는 위치
  • 문서의 DOM 구조가 완료된 시점에 실행되기에 별다른 추가설정이 필요없다.
  • 웹을 사용하는데 있어서 자바스크립트 없이는 어떠한 활동도 없다면(자바스크립트에 의존적인 웹) 의미가 없어질 수도 있다.

 

Async와 Defer

async: 브라우저가 HTML을 파싱하다가 script 태그를 만나면 파싱하는 동시에 script를 다운로드한다. 그리고 script를 실행시키는 동안에는 HTML파싱을 멈추게한다.

 

  <head>
     <scirpt async src="dd"></script>
  </head>
  • 자바스크립트에 의존적인 웹을 좀 더 빨리 실행시킬 수 있다.
  • HTML 파싱이 잡스크립트 파일을 실행시키는 동안 멈추게되어 일반적인 Head에 넣는 방식과 비슷한 문제를 겪을 수 있다.

 

defer: async와 비슷한 방식으로 html을 파싱하는동안 script를 동시에 다운받지만 HTML파싱이 끝나면 script를 실행시킨다.

 

  <head>
     <scirpt defer src="dd"></script>
  </head>
  • HTML파싱이 중간에 멈출 염려도 없으며, async의 단점도 개선시킬 수 있다.
  • 여러개의 scripot 태그를 이용해도 미리 다운을 받고 HTML도 끝까지 파싱시킨 후에 순서대로 실행된다.
  • 모든 브라우저에서 지원이된다.

<Styling>요소의 위치

 

1. 인라인 방식

인라인 방식은 단일 요소에 고유한 스타일을 적용할 수 있다.

<body>
  <p style="color:blue;text-align:center;">나는 <p>다.</p>
  <h1 style="font-size:2em"> 나는 H1이다. </h1>
</body>

2. 내부 스타일 시트

하나의 HTML 페이지에 고유한 스타일을 주려고한다면 내부 스타일 시트를 사용할 수있다. <head> 구역 안에서 <style> 요소를 정의한다.

 

<head> 
 <style>
   body {
    margin: 0;
    padding: 0;
    box-sizing: content-box;
   }
   
   div {
    display:flex;
   }
 </style>
</head>

 

3. 외부 스타일 시트

 

외부 스타일은 HTML페이지의 <head>구역 안에 <Link> 요소로 정의한다.

<head> 
  <link rel="stylesheet" href="myCSS.css">
</head>

 

기타 등등

 

 

<header></header>
<section></section>
<footer></footer>
<article></article>
<nav></nav>
<div></div>
<aside></aside>
<span></span>
<main></main>
<form></form>
<address></address>


<div>           Division
 div태그는 한 줄을 차지한다.
 <div>division1</div>
 <div>division2</div>

<span>          Span
 span태그는 컨텐츠 크기만큼 공간을 차지한다.
 <span>span 1</span>
 <span>span 2</span>
 
<header>
 주위 구획의 제목(<h1>~<h6>요소)을 감싸기 위한 요소지만 필수는 아님
 <header>
  <h1>Main Page Title</h1>
  <img src="logo.png.jpg" alt="Logo">
 </header>

<p>

<p>요소는 하나의 문단을 나타낸다. html에서 이미지나 입력 폼 등 서로 
   관련있는 콘텐츠 무엇이나 될 수 있다.</p>
   
<footer>
 <footer>
  <p>pixel blog</p>
 </footer>
 
<article>  

<article>요소는 문서, 페이지, 애플리케이션 또는 사이트 안에서 독립적으로 구분해 배포하거나 
재사용할 수 있는 구획을 나타낸다.

<arcticle class="pixelA">
  <h1>pixelA title</h1>
  <article class="pixelB">
    <h2>id</h2>
    <p>pixel</p>
  </article>
</article>

<section>

<aside>

<address>
 <address> 요소는 가까운 HTML요소의 사람, 단체, 조직 등에 대한 연락처 정보를 나타낸다.
  <a href="Mail:pixelstudio411@gmail.com">pixelstudio411@gmail.com</a><br>
  <a href="Tel:+82 01011111111">010-1111-1111</a>
 </address>

 

ref="W3School", "HTML SCRIPT 태그위치", "HTML 태그", 

'FE BE 개발 메모장 > HTML& DOM & CSS' 카테고리의 다른 글

HTML 5의 시멘틱 요소  (0) 2021.06.03
label  (0) 2020.11.28
input  (0) 2020.11.25
form과 link 태그  (0) 2020.11.25

    티스토리툴바