핵심정리

HTML 핵심 요약 정리

아이티프로 2023. 2. 1.

유튜브 동영상 링크 - https://www.youtube.com/watch?v=c6UipjiKlDc&t=6s

HTML은

DOCTYPE 이 최상단에 선언되고

<head></head>안쪽으로 메타성 정보들 title, meta, link, script, style 태그 등으로 구성되고

<body></body>안쪽은 콘텐츠 영역으로 div, ul, form, p, a, img 태그 등으로 구성된다.

body태그안에는 콘텐츠영역을 구성하기 위해 header, nav, main, footer같은 영역구분 태그도 있다.

<!DOCTYPE html> : 문서가 HTML5 문서임을 선언한다.

<base.href="도메인/경로/"> : 문서의 모든 상대 URL에 대한 기본 URL을 지정하는 데 사용된다.

<h1>, <h2>, <h3> ...<h6> 태그

<h1>, <h2>, <h3> 태그는 제목을 정의하는 데 사용된다. 6레벨인 <h6>까지 있음.

<h1> 태그는 페이지에서 가장 중요한 제목, 일반적으로 페이지의 제목 또는 주요 주제
<h2> 태그는 일반적으로 내용을 섹션으로 나누는 데 사용되는 하위 제목
<h3> 태그는 일반적으로 내용을 더 작은 섹션으로 나누는 데 사용되는 하위 제목

<div> 태그 - 레이어

HTML의 div 태그는 다른 block타입 컨트롤로 사용시 기본 줄바뀜이 된다.

다른 요소를 위한 컨테이너를 만들고 CSS를 사용하여 해당 요소에 스타일이나 레이아웃을 적용하는 데 사용한다.

display: inline-block - 인라인 블록 요소는 필요한 만큼의 너비만 차지하고 새 줄을 만들지 않는다는 점에서 인라인 요소와 유사하다.

그러나 인라인 요소와 달리 인라인 블록 요소는 지정된 너비와 높이를 가질 수 있으며 패딩과 여백을 적용할 수 있다.

또한, 컨트롤이 한줄로 나열되다가 상위 컨테이너의 폭을 넘어가게 되면 줄바뀜이 일어난다.

<img src="..."> 태그

HTML의 <img> 태그는 웹 페이지에 이미지를 표시하기위해 사용되며 src속성에 이미지 파일의 URL을 지정한다.

p태그

HTML의 <p> 태그는 텍스트 단락을 만드는 데 사용되며 문단의 텍스트 내용은 여는 <p> 태그와 닫는 </p> 태그 사이에 배치한다.

br 태그

HTML의 <br> 태그는 줄 바꿈을 만드는 데 사용된다. 빈 태그로, 닫는 태그가 없다.

인라인 텍스트 강조 태그

<u>언더라인</u> 언더라인

<i>이탈릭체</i> 이탈릭체

<b>강조</b> 강조

<span style="font-weight:500; color:red;">스팬</span> 스팬

인라인 텍스트태그는 문자를 강조할 때 주로 사용한다.

<UL> <LI> 태그 - 리스팅

HTML의 <ul> 태그와 <li> 태그는 정렬되지 않은 목록을 만드는 데 사용된다.

<ul> 태그는 정렬되지 않은 목록 전체를 나타내며, <li> 태그는 각 개별 목록 항목을 나타낸다.

table 태그

<table> 태그는 테이블 전체를 나타낸다.
<tr> 태그는 테이블 행을 나타낸다.
<th> 태그를 <tr>태그 내부에서 사용하여 테이블 헤더를 만들 수 있다.
<td> 태그는 <tr>태그 내부에서 테이블 셀을 나타낸다.

그리고, rowspan 및 colspan 속성을 사용하여 셀을 수평 또는 수직으로 병합할 수 있다.

<a href="..."> 앵커태그

<a> 태그는 다른 웹 페이지 또는 동일한 웹 페이지의 특정 위치에 대한 하이퍼링크를 만드는 데 사용된다.

<a> 태그를 사용하려면 링크의 대상을 지정하는 데 사용되는 href 속성을 사용해야 한다.

<a href="https://www.naver.com">go naver.com</a>

<form> <input> <select> <textarea> 태그

정보를 입력하고 선택할 수 있는 양식을 작성할 때 사용하는 태그이다.

selector 선택자 - id(#), class(.)

id 속성은 페이지의 특정 객체에 고유 식별자를 제공하는 데 사용됩니다. ID는 페이지에서 한 번만 사용할 수 있으며 전체 문서에서 고유해야 한다. 객체는 CSS에서 "#" (샾)기호를 사용하여 ID로 선택할 수 있다. 클래스 속성은 하나 이상의 객체에 동일한 식별자를 제공하여 여러 객체에 동일한 스타일을 적용할 수 있도록 하는 데 사용된다. 클래스는 한 페이지에서 여러 번 사용될 수 있으며, 전체 문서에서 고유하지 않아야 한다. 객체는 "."(점) 기호를 사용하여 CSS의 클래스에 의해 선택될 수 있다.

<canvas> 태그

HTML에서 캔버스 태그는 이미지, 드로잉, 애니메이션과 같은 그래픽을 위한 컨테이너이다. 웹 페이지에서 그래픽을 만들고 표시하는 데 사용되며 자바스크립트를 사용하여 조작할 수 있다.

캔버스의 크기는 캔버스 요소에 직접 너비와 높이 속성을 설정하거나 CSS 스타일을 사용하여 정의할 수 있다.

<canvas id="myCanvas" width="500" height="500"></canvas>

<video> <audio> <iframe> 태그

<video> 요소는 웹 페이지에 비디오 파일을 내장하는 데 사용할 수 있는 멀티미디어 태그이다.

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <p>Your browser does not support the video tag.</p>
</video>

<audio> 요소는 웹 페이지에 오디오 파일을 내장하는 데 사용할 수 있는 멀티미디어 태그이다:

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  <p>Your browser does not support the audio tag.</p>
</audio>

<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" 
frameborder="0" 
allow="accelerometer; 
autoplay; 
encrypted-media; gyroscope; picture-in-picture" 
allowfullscreen></iframe>

HTML Web Storage

로컬스토리지 : 사용자 pc에 직접 저장됨

<script>
  // Store a value in local storage
  localStorage.setItem("key", "value");

  // Retrieve a value from local storage
  var storedValue = localStorage.getItem("key");
  console.log(storedValue); // "value"
</script>

이 예에서는 setItem() 메서드를 사용하여 로컬 저장소에 키-값 쌍을 저장하고 getItem() 메서드를 사용하여 키와 관련된 값을 검색한다.

세션스토리지 : 브라우저 단일세션에 저장

<script>
  // Store a value in session storage
  sessionStorage.setItem("key", "value");

  // Retrieve a value from session storage
  var storedValue = sessionStorage.getItem("key");
  console.log(storedValue); // "value"
</script>

웹 스토리지 API는 특정 키-값 쌍을 삭제하는 removeItem(), 저장소의 모든 키-값 쌍을 삭제하는 clear(), 인덱스를 통해 키를 검색하는 key()와 같은 다른 방법을 제공한다.

또한 웹 스토리지에는 일반적으로 5-10MB 정도의 제한이 있으며 저장된 데이터는 XSS 공격에 취약하므로 스토리지에서 저장 및 검색되는 모든 데이터의 유효성을 제대로 검사해야 한다.

Web Workers API 웹쓰레드

웹 워커 API는 웹 페이지가 메인 스레드와 별도로 백그라운드에서 스크립트를 실행할 수 있도록 하여 웹 페이지의 성능과 응답성을 향상시킬 수 있다. 이것은 특히 사용자 인터페이스를 동결하지 않고 이미지 처리, 데이터 조작 및 대량 계산과 같은 장기 실행 또는 계산 비용이 많이 드는 작업을 실행하는 데 유용하다.

worker.js라는 새 JavaScript 파일을 만든다.

  self.addEventListener("message", function(e) {
    var data = e.data;
    // Perform a long-running task here
    var result = performLongRunningTask(data);
    // Send the result back to the main thread
    self.postMessage(result);
  });

기본 HTML 파일에서 새 작업자를 만들고 시작한다:

<script>
  var worker = new Worker("worker.js");
  worker.addEventListener("message", function(e) {
    console.log("Worker finished: ", e.data);
  });
  worker.postMessage("Start working");
</script>

이 예에서는 먼저 작업자 스크립트 파일 "worker.js"의 경로를 인수로 전달하여 새 작업자 개체를 만들고, 그런 다음 작업자 스크립트의 메시지를 청취하기 위해 작업자 개체에 이벤트 수신기를 설정한다. 작업자 스크립트는 self.postMessage() 메서드를 사용하여 오래 실행된 태스크의 결과와 함께 메시지를 기본 스레드로 다시 보낸다.

web work들은 DOM에 접근할 수 없고 브라우저의 API 중 일부를 사용할 수 없으며 메시지를 통해서만 메인 스레드와 통신할 수 있다.

HTML SSE API

SSE(Server-Sent Events)는 웹 페이지가 서버로부터 실시간으로 업데이트를 받을 수 있도록 하는 기술이다. 채팅, 알림 및 대시보드와 같은 양방향 실시간 애플리케이션을 구축하는 간단하고 효율적인 방법이다.

<script>
  var eventSource = new EventSource("server.php");
  
  eventSource.onmessage = function(event) {
    console.log(event.data);
  }
</script>

이 예에서는 이벤트를 인수로 처리할 서버 측 스크립트의 URL을 전달하여 새 EventSource 개체를 만든다. 그런 다음 스크립트는 서버로부터 수신된 메시지를 처리하도록 메시지 수신기를 설정한다.

서버 측에서는 이벤트를 전송하는 스크립트, 즉 PHP 스크립트 또는 HTTP 요청을 처리할 수 있는 다른 서버 측 언어를 사용해야 한다.

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>

이 스크립트는 스크립트가 요청될 때마다 현재 서버 시간이 포함된 메시지를 클라이언트에 보낸다.

SSE는 HTTP를 통해 작동하며 클라이언트에서 서버로 단일 단방향 연결을 열고 최신 브라우저에서만 지원된다는 점을 언급할 필요가 있다.

또한 SSE는 WebSockets에 대한 간단하고 가벼운 대안으로, 단순한 실시간 애플리케이션에 유용하지만 양방향 통신, 낮은 대기 시간 및 높은 처리량이 필요하거나 복잡한 사용 사례에는 적합하지 않다.

다음 >> CSS 핵심 정리

https://itcamp24.tistory.com/207

CSS 핵심 정리

CSS(Cascading Style Sheets)는 마크업 언어로 작성된 문서의 프레젠테이션을 설명하는 데 사용되는 스타일 언어이다. 본 포스팅에서는 웹개발에서 이 정도는 알아야 된다고 필수 내용만 정리하였다. HT

itcamp24.tistory.com

저작자표시 비영리 동일조건

'핵심정리' 카테고리의 다른 글

CSS 핵심 정리 (0)	2023.02.01
Javascript 핵심 요약 정리 (1)	2023.02.01
PYTHON 기초 정리 (0)	2023.01.27
React 기초 정리 (0)	2023.01.26
jQuery 핵심 정리 (0)	2023.01.25