HTML
-
캐노니컬 태그란?HTML 2023. 8. 7. 23:05
URL 표준화 및 표준 태그 | Google 검색 센터 | 문서 | Google for Developers 사이트에 중복 콘텐츠가 있는 경우 Google은 표준 URL을 선택합니다. 표준 URL 및 중복 URL 통합 방법을 자세히 알아보세요. developers.google.com 캐노니컬(Canonical)은 웹 개발에서 중복되는 컨텐츠나 페이지를 표준화하고 정규화하는 방법을 말한다. 주로 검색 엔진 최적화(SEO)의 관점에서 중요한 개념으로 사용된다. 캐노니컬 태그는 하나의 웹 페이지가 여러 개의 URL로 접근되거나 중복되는 경우 (여러 기기를 지원하는 경우, 서버가 www가 있는 버전과 없는 버전, http/https 버전 등등), 검색 엔진은 어떤 페이지를 검색 결과로 표시할지 혼란스러울 수 있다..
-
[HTML] canvas 모바일에서 그리기HTML 2023. 4. 11. 15:17
보통 html canvas로 그림 그리기 같은 기능을 구현 할 때 'mousedown' 'mousemove' 'mouseup' 이벤트를 사용한다. 하지만 모바일 기기에서는 마우스 이벤트와는 다르게 터치 이벤트를 사용해야 한다. touchstart touchmove touchend 이때 우리는 보통 터치 이벤트로 스크롤을 하는데 캔버스에서 터치 이벤트가 발생하면 같이 스크롤이 되는 경우가 있다. 이때 canvas의 touchmove 이벤트가 발생하였을 때 e.preventDefault()를 하게 되면 스크롤이 되지 않아 문제를 해결할 수 있다. e.preventDefault()
-
[HTML] canvas 캔버스 도형 그리기 (사각형, 원)HTML 2023. 3. 25. 17:04
html canvas를 이용하여 드로잉 애플리케이션을 구현하던 중 도형 그리기 기능을 추가하고 싶었다. (도형 중 사각형을 위주로 설명한다.) canvas에서 사각형을 그리는 방법은 다음과 같다. const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); ctx.fillRect(x, y, width, height); // 채워진 사각형 ctx.strokeRect(x, y, width, height); // 윤곽선만 있는 사각형 하지만 우리가 원하는 건 캔버스 안에서 드래그를 통해 도형을 그리는 것이다. 이를 위해 캔버스에 이벤트로 mousedown, mousemove, mouseup 을 사용한다. moused..
-
[HTML] 시맨틱 마크업HTML 2022. 8. 19. 16:22
구조화 문서에는 구조가 있다. 웹페이지 역시 문서이다. 그러므로 웹페이지는 구조화가 잘 되어야 한다. HTML5 이전까지 웹 페이지의 구조를 표현하는 태그가 없었기 때문에 태그를 남발하는 경향이 보였다. 그러한 코드 소스를 들여다 보면 문서의 구조 파악이 힘들어진다. 구조화를 해야 하는 이유 브라우저를 통해 보는 것 이상으로 웹 문서에 들어 있는 정보 탐색이 중요해지기 때문이다. 빅데이터와 함께 사물인터넷 시대에는 사물 속에 내장된 컴퓨터들이 스스로 찾든 검색 엔진을 이용하든 인터넷 상 웹 문서에서 의미 있는 정보를 찾는다. 그러므로 검색엔진이 좋아하는 웹사이트를 만들어야 웹 사이트의 가치가 올라간다. 검색엔진 최적화(SEO) 시맨틱 마크업 (Semantic Markup) html5에서는 문서의 구조와 ..
-
[HTML] <dialog> 태그HTML 2022. 8. 4. 16:30
HTML element는 대화 상자 또는 경고, 검사, 하위창 같은 인터랙티브한 컴포넌트를 나타낸다. Attributes Hello opne 속성은 dialog가 활성 상태이며 상호작용할 수 있음을 나타낸다. method dialog 열기 Hellow 닫기 show() : dialog 표시. 다른 요소(dialog 외의 요소)와 상호작용 할 수 있다. showModal() : dialog 표시. dialog 외의 요소와 상호작용이 금지된다. close() : dialog 닫음. Usage notes method="dialog" 특성을 사용한 요소는 제출 시 dialog를 닫게된다. 이 때, dialog의 returnValue 속성은 폼을 제출할 때 사용한 버튼의 value로 설정된다. CSS ::back..
-
[HTML] form 태그와 웹접근성HTML 2022. 7. 7. 00:10
🏷️ 태그 사용하지 않더라도 필수로 과 같이 빈값으로 속성을 넣어줌 🏷️ 태그 폼 요소에 레이블을 붙이기 위한 태그 태그 사용시 폼 요소와 레이블 텍스트가 서로 연결되어 있는 점을 브라우저에게 알림 태그 사용 1. 명시적 작성 방법 요소와 폼 요소를 따로 사용하고 의 for 속성과 폼 요소의 id 속성을 이용해 연결 레이블 2. 암시적 작성 방법 태그 안에 폼 요소를 넣는 방법 레이블 placeholder 속성을 label로 사용? placeholder는 label을 대신하여 제공할 수 없다. 입력 시 내용의 사라짐 스크린리더에서 읽히지 않을 수 있음 번역 시 브라우저에서 건너뜀 디자인 상의 이유로 label를 화면에 명시하지 못할 경우 title 속성 활용 스크린리더는 label과 title을 둘 다 ..