풀스택개발자로 살아남기

HTML23

<html> - Hypertext Markup Language HTML은 하이퍼텍스트 마크업 언어(Hypertext Markup Language)의 약자 웹 페이지를 구성한 표준 마크업 언어이다. 일반적인 HTML 태그는 다음과 같다: : HTML 문서의 루트 Home About Contact Welcome to my website! Here you will find information about my interests and hobbies. Copyright © 2021 My Website jsfiddle.net에서 테스트 https://jsfiddle.net/ html, css, javascript영역에 해당 코드를 작성하고 좌측 상단의 Run을 실행하면 테스트가 가능하다. javascript란에서 라이브러리를 지정할 수 있다. 또한 우측 하단의 console.. HTML 2023. 1. 25.

<div> 태그 - 레이어 HTML의 div 태그는 다른 block타입 컨트롤로 사용시 기본 줄바뀜이 된다. 다른 요소를 위한 컨테이너를 만들고 CSS를 사용하여 해당 요소에 스타일이나 레이아웃을 적용하는 데 사용한다. id 스타일 A link #container{ background-color: #ccc; padding: 20px; text-align: center; } let div = document.getElementById("container"); console.log(div.innerHTML); 또한 div 요소에 id 또는 class를 추가하여 CSS 및 JavaScript에서 각각 스타일을 적용하거나 동작을 수행할 수 있다. This is some text inside the div element. A link 이 .. HTML 2023. 1. 25.

<img src="..."> 태그 HTML의 태그는 웹 페이지에 이미지를 표시하기위해 사용되며 src속성에 이미지 파일의 URL을 지정한다. src 속성은 표시할 이미지 파일의 URL인 "image.jpg"로 설정됩니다. alt 속성은 이미지의 텍스트 설명을 제공하는 데 사용되며, 이는 접근성 및 SEO 목적에 중요하다. 또한 width 및 height 특성을 사용하여 이미지의 너비와 높이를 설정할 수 있다: 또한 클래스나 ID를 img 요소에 추가하여 스타일을 위한 css와 수행 작업을 위한 javascript에 사용할 수 있다. 이미지 테스트 let div = document.getElementById("demo"); let img = document.getElementsByClassName("image")[0]; div.innerH.. HTML 2023. 1. 25.

<p> , <br> - paragraph , 줄바꿈 태그 p태그 HTML의 태그는 텍스트 단락을 만드는 데 사용되며 문단의 텍스트 내용은 여는 태그와 닫는 태그 사이에 배치한다. This is the first paragraph. This is the second paragraph. 또한 클래스나 ID를 태그에 추가하여 스타일을 위해 CSS에서, 수행 동작을 위해 JavaScript에서 사용할 수 있다. This is a paragraph of text. #style정의 .paragraph{ font-size: 20px; } // paragraph클래스명을 selector로 사용해서 객체 핸들링 let p = document.getElementsByClassName("paragraph") br 태그 HTML의 태그는 줄 바꿈을 만드는 데 사용된다. 빈 태그로,.. HTML 2023. 1. 25.

<link> 태그 HTML에서 태그는 외부 CSS 스타일시트에 링크하는 데 사용된다. href 속성은 CSS 파일의 위치를 지정하는 데 사용되며, rel 속성은 HTML 문서와 링크된 파일(이 경우 "스타일시트") 사이의 관계를 정의하는 데 사용된다. 예를 들어, 다음 코드는 HTML 문서와 같은 디렉터리에 있는 "styles.css"라는 이름의 CSS 파일로 링크된다: HTML 2023. 1. 25.

<UL> <LI> 태그 - 리스팅 HTML의 태그와 태그는 정렬되지 않은 목록을 만드는 데 사용된다. 태그는 정렬되지 않은 목록 전체를 나타내며, 태그는 각 개별 목록 항목을 나타낸다. Item 1 Item 2 Item 3 .list{ list-style-type: none; /* remove bullet points */ } .item{ font-size: 20px; } let items = document.getElementsByClassName("item") console.log(items[0].innerHTML); console.log(items[1].innerHTML); console.log(items[2].innerHTML); 이 예에서는 태그를 사용하여 정렬되지 않은 목록 컨테이너를 생성하고, 태그를 사용하여 컨테이너 내의 .. HTML 2023. 1. 25.

display 속성 display: block : 이 값은 요소를 블록 레벨 요소로 만든다. 즉, 블록 컨트롤은 상위 컨테이너의 전체 너비를 차지하고 해당 요소 뒤에 새 줄을 작성하여 줄바뀜이 일어난다. 일반적인 블록 레벨 요소에는 , , 및 이 있다. This is a block-level element .block-element{ display: block; width: 50%; /* takes up 50% of the parent container width */ background-color: #ccc; /* adds a background color */ } display: inline :필요한 만큼의 너비만 차지하고 줄바뀜이 일어나지 않는다. 일반적인 인라인 요소로는 , 및 가 있다. This is a inlin.. HTML 2023. 1. 25.

<table> <tr> <td> 태그 table 태그 태그는 테이블 전체를 나타낸다. 태그는 테이블 행을 나타낸다. 태그는 테이블 셀을 나타낸다. Header 1 Header 2 Header 3 Row 1, Column 1 Row 1, Column 2 Row 1, Column 3 Row 2, Column 1 Row 2, Column 2 Row 2, Column 3 이렇게 하면 3개의 열과 2개의 행이 있는 테이블이 생성되고 각 셀에는 태그에 정의된 텍스트가 포함된다. 또한 내부에서 태그를 사용하여 테이블 헤더를 만들 수 있다. Header 1 Header 2 Header 3 Row 1, Column 1 Row 1, Column 2 Row 1, Column 3 셀병합 : rowspan colspan HTML 테이블의 rowspan 및 cols.. HTML 2023. 1. 25.

<style> 태그 HTML의 태그는 텍스트 형식, 색상, 레이아웃 등 HTML 문서의 요소에 스타일을 적용하는 데 사용된다. 태그는 일반적으로 HTML 문서의 Welcome to my website This is some text on my website. 태그 내에서 정의된 CSS 스타일은 HTML 문서의 섹션에 있는 요소에 적용됩니다. 본문 요소의 배경색은 #f0f0f0이고 h1 요소의 색상은 파란색이며 텍스트는 가운데에 정렬된다. 태그를 사용하여 CSS 파일을 HTML 문서에 연결하여 외부적으로 스타일을 포함할 수도 있다: You can use the tag to customize the appearance of your web page and make it HTML 2023. 1. 25.

<h1>, <h2>, <h3> ..<h6>태그 HTML의 , , 태그는 제목을 정의하는 데 사용된다. 태그는 페이지에서 가장 중요한 제목, 일반적으로 페이지의 제목 또는 주요 주제 태그는 일반적으로 내용을 섹션으로 나누는 데 사용되는 하위 제목 태그는 일반적으로 내용을 더 작은 섹션으로 나누는 데 사용되는 하위 제목 6레벨까지 제목 테그를 정의할 수 있다. Welcome to my website This is some text on my website. About Us Learn more about our company and mission. Our Team Meet the people behind our success. 이 예에서 태그는 주 제목인 "Welcome to my website"에 사용되고, 태그는 소제목인 "About Us"에 사용되고.. HTML 2023. 1. 25.

<a href="..."> 앵커태그 HTML의 태그는 다른 웹 페이지 또는 동일한 웹 페이지의 특정 위치에 대한 하이퍼링크를 만드는 데 사용된다. 태그를 사용하려면 링크의 대상을 지정하는 데 사용되는 href 속성을 사용해야 한다. go naver.com 이 예에서는 태그를 사용하여 example.com 웹 사이트에 대한 링크를 생성합니다. 웹페이지에 "Example.com 방문"이라는 텍스트가 링크로 표시되며, 사용자가 이를 클릭하면 example.com 웹사이트로 안내된다. 또한 를 사용하여 ID 속성을 사용하여 동일한 웹 페이지의 특정 위치에 연결할 수 있으며 "책갈피"라고도 한다. go naver.com Go to section 1 empty div Section 1 이 링크를 클릭하면 해당 ID를 가진 웹 페이지 섹션으로 이동하는.. HTML 2023. 1. 25.

<form> <input> <select> <textarea> 태그 form enctype 속성 HTML 양식의 enctype 속성은 양식이 제출될 때 서버로 전송되는 데이터의 형식을 지정하는 데 사용된다.enctype 특성은 태그와 함께 사용되며, 폼에 파일 업로드가 포함되어 있거나 non-ASCII가 아닌 경우 설정해야 한다. multipart/form-data: 이 값은 양식에 파일 업로드가 포함된 경우 사용. Name: Email: Upload a file: form type method 메소드 속성은 태그와 함께 사용되며 "get"과 "post"의 두 가지 가능한 값을 가질 수 있다. "get" 메서드는 기본 메서드이며 서버에서 데이터를 검색하는 데 사용된다. "get" 메서드를 사용하여 양식을 제출하면 데이터가 쿼리 매개 변수로 URL에 추가되고 데이터가 UR.. HTML 2023. 1. 25.

selector 선택자 - id(#), class(.) HTML에서 id와 클래스 속성은 HTML 문서에서 요소를 식별하고 CSS를 사용하여 스타일을 적용하는 데 사용된다. id 속성은 페이지의 특정 객체에 고유 식별자를 제공하는 데 사용됩니다. ID는 페이지에서 한 번만 사용할 수 있으며 전체 문서에서 고유해야 한다. 객체는 CSS에서 "#" (샾)기호를 사용하여 ID로 선택할 수 있다 #header { background-color: blue; } 클래스 속성은 하나 이상의 객체에 동일한 식별자를 제공하여 여러 객체에 동일한 스타일을 적용할 수 있도록 하는 데 사용된다. 클래스는 한 페이지에서 여러 번 사용될 수 있으며, 전체 문서에서 고유하지 않아야 한다. 객체는 "."(점) 기호를 사용하여 CSS의 클래스에 의해 선택될 수 있다 .header { ba.. HTML 2023. 1. 25.

<link href="..."> href 속성은 CSS 파일의 위치를 지정하는 데 사용되며, rel 속성은 HTML 문서와 링크된 파일(이 경우 "스타일시트") 사이의 관계를 정의하는 데 사용된다. 예를 들어, 다음 코드는 HTML 문서와 같은 디렉터리에 있는 "styles.css"라는 이름의 CSS 파일로 링크된다: HTML에서 태그는 외부 CSS 스타일시트에 링크하는 데 사용된다. href 속성은 CSS 파일의 위치를 지정하는 데 사용되며, rel 속성은 HTML 문서와 링크된 파일(이 경우 "스타일시트") 사이의 관계를 정의하는 데 사용된다. HTML 2023. 1. 25.

<script> 태그 script> 태그는 일반적으로 웹 사이트에 대화형 기능이나 동적 콘텐츠를 추가하는 데 사용된다. 이 예제에서 태그는 HTML 문서의 또는 섹션 내에 배치해야 한다. 섹션의 하단에 태그를 배치하는 것이 가장 좋다. 이렇게 하면 스크립트가 실행되기 전에 페이지를 로드하고 렌더링할 수 있으므로 페이지의 성능을 향상시킬 수 있다. HTML 2023. 1. 25.

<canvas> 태그 HTML에서 캔버스 태그는 이미지, 드로잉, 애니메이션과 같은 그래픽을 위한 컨테이너이다. 웹 페이지에서 그래픽을 만들고 표시하는 데 사용되며 자바스크립트를 사용하여 조작할 수 있다. 캔버스의 크기는 캔버스 요소에 직접 너비와 높이 속성을 설정하거나 CSS 스타일을 사용하여 정의할 수 있다. 캔버스에 그림을 그리려면 JavaScript를 사용해야 한다. 캔버스 요소는 캔버스에 도형, 선, 이미지 및 텍스트를 그릴 수 있는 JavaScript API를 제공한다. 다음은 자바스크립트를 사용하여 단순한 직사각형을 만드는 방법의 예이다: var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle.. HTML 2023. 1. 25.

특수문자 와 이모지 특수문자 몇가지 : > (grater then) & : & (ampersand) " : " (double quotes) ' : ' (apostrophe) 스페이스 : (non-breaking space) × : × ÷ : ÷ 이모지 "Smiling face with sunglasses" (😎) : 😎 or 😎 "Thumbs up" (👍) : 👍 or 👍 "Red heart" (❤️) : ❤️ or ❤️ "Crying face" (😢) : 😢 or 😒 "Winking face" (😉) : 😉 or 😉 "Rolling on the floor laughing" (🤣) : 🤣 or 🤗 "Fire" (🔥) : 🔥 or 🔥 "Praying hands" (🙏) : 🙏 or.. HTML 2023. 1. 25.

HTML Favicon 즐겨찾기 아이콘()은 브라우저의 주소 표시줄, 웹 사이트 제목 옆 또는 브라우저의 탭, 책갈피 및 기록에 표시되는 작은 아이콘이다. HTML에서 이미지 파일(16x16픽셀 또는 32x32픽셀 크기)을 .ico, .png 또는 .gif 형식으로 만들어 파비콘을 만들 수 있다. 그런 다음 HTML 문서의 이 예제에서 태그는 HTML 문서와 동일한 디렉토리에 있는 favicon.ico라는 파일에 연결된다. rel 속성은 이것이 favicon임을 지정하고 href 속성은 favicon 파일의 위치를 지정합니다. type 특성은 favicon의 파일 형식을 지정한다. HTML 2023. 1. 25.

<video> <audio> 태그 요소는 웹 페이지에 비디오 파일을 내장하는 데 사용할 수 있는 멀티미디어 태그이다. Your browser does not support the video tag. 요소는 웹 페이지에 오디오 파일을 내장하는 데 사용할 수 있는 멀티미디어 태그이다: Your browser does not support the audio tag. 요소와 유튜브 임베디드 코드를 사용하여 유튜브 비디오를 웹 페이지에 임베디드할 수 있다. 이 예에서는 요소를 사용하여 YouTube 비디오를 내장하고, src 속성은 비디오의 URL을 지정한다. 너비 및 높이 속성은 비디오 플레이어의 치수를 지정한다. 프레임 경계 특성은 비디오 플레이어 주변의 경계를 제거하기 위해 0으로 설정되며, 허용 특성은 재생할 비디오에 대한 사용 권한을 지.. HTML 2023. 1. 25.

HTML Drag and Drop HTML5는 드래그 앤 드롭 이벤트를 도입하여 웹 페이지에 드래그 앤 드롭 가능한 요소를 만들 수 있다. Drag me 이 예에서, 우리는 두 개의 요소, 즉 ID가 "드래그-요소"인 와 ID가 "드롭-요소"인 를 가지고 있다. 드래그 요소 div는 드래그 가능한 속성을 "true"로 설정하여 드래그할 수 있다. "drop-element" div에는 "ondrop"과 "ondragover"라는 두 개의 이벤트 수신기가 있는데, 이는 각각 요소가 "drop-element" div에 드롭될 때와 요소가 "drop-element" div 위로 끌릴 때 호출된다. 드래그(이벤트) 함수는 요소가 끌릴 때 전송될 데이터(이 경우에는 요소의 ID)를 설정하는 데 사용된다. HTML 2023. 1. 24.

HTML Web Storage 로컬스토리지 : 사용자 pc에 직접 저장됨 이 예에서는 setItem() 메서드를 사용하여 로컬 저장소에 키-값 쌍을 저장하고 getItem() 메서드를 사용하여 키와 관련된 값을 검색한다. 세션스토리지 : 브라우저 단일세션에 저장 웹 스토리지 API는 특정 키-값 쌍을 삭제하는 removeItem(), 저장소의 모든 키-값 쌍을 삭제하는 clear(), 인덱스를 통해 키를 검색하는 key()와 같은 다른 방법을 제공한다. 또한 웹 스토리지에는 일반적으로 5-10MB 정도의 제한이 있으며 저장된 데이터는 XSS 공격에 취약하므로 스토리지에서 저장 및 검색되는 모든 데이터의 유효성을 제대로 검사해야 한다. HTML 2023. 1. 24.

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 s.. HTML 2023. 1. 24.

HTML SSE API SSE(Server-Sent Events)는 웹 페이지가 서버로부터 실시간으로 업데이트를 받을 수 있도록 하는 기술이다. 채팅, 알림 및 대시보드와 같은 양방향 실시간 애플리케이션을 구축하는 간단하고 효율적인 방법이다. 이 예에서는 이벤트를 인수로 처리할 서버 측 스크립트의 URL을 전달하여 새 EventSource 개체를 만든다. 그런 다음 스크립트는 서버로부터 수신된 메시지를 처리하도록 메시지 수신기를 설정한다. 서버 측에서는 이벤트를 전송하는 스크립트, 즉 PHP 스크립트 또는 HTTP 요청을 처리할 수 있는 다른 서버 측 언어를 사용해야 한다. 이 스크립트는 스크립트가 요청될 때마다 현재 서버 시간이 포함된 메시지를 클라이언트에 보낸다. SSE는 HTTP를 통해 작동하며 클라이언트에서 서버로 단일.. HTML 2023. 1. 24.

이전 1 다음

티스토리툴바