HTML
[HTML/CSS] 시맨틱 태그 Semantic Tag
[HTML/CSS] 시맨틱 태그 Semantic Tag
2024.04.25Semantic(语义)은 "의미가 있는"이라는 뜻. 물을 마시는 "컵", 문을 여는 "손잡이"처럼 일상 생활에서 쉽게 볼 수 있는 사물들이 각각 의미를 가지고 있는 것처럼 HTML의 여러 태그들도 각각 의미를 가지고 있다. 시맨틱 태그의 장점SEO : 제목 ``, 부제목 `` 같은 시멘틱 태그를 적절하게 사용하면 검색엔진이 해당 사이트를 더 잘 이해할 수 있기 때문에 검색 최적화에 유리하다. Accessbility(웹접근성) : 시맨틱 태그를 잘 사용하면 스크린 리더(웹페이지를 음성으로 읽어주는)나 키보드만 사용해서 웹사이트를 이용하는 사람들도 큰 문제 없이 사용할 수 있다. Maintainability : `` 태그만 사용해서 개발한 웹사이트보다 한 눈에 알아보기 쉬운 시맨틱 태그를 사용하면 개발자들도..
[HTML/CSS] CSS 팝업 애니메이션 만들기
[HTML/CSS] CSS 팝업 애니메이션 만들기
2024.04.25요소 숨김 방식 차이점 렌더 트리리플로우리페인트이벤트 핸들러DOM 트리`display: none`제외발생발생비활성유지`visibility: hidden`유지발생 안함발생비활성유지`opacity: 0`유지발생 안함발생활성유지display: none렌더 트리 : 제외리플로우 : 발생 (렌더트리 상태가 변경됐으므로)리페인트 : 발생 (리플로우 발생시 리페인트도 함께 발생)이벤트 핸들러 : 비활성DOM 트리 : 유지 (자바스크립트로 조작 가능)visibility: hidden렌더 트리 : 유지 (화면에선 안보이지만 공간은 차지함)리플로우 : 발생 안함 (레이아웃에 영향을 미치지 않으므로)리페인트 : 발생 (요소가 보이지 않도록 변경했으므로)이벤트 핸들러 : 비활성DOM 트리 : 유지 (자바스크립트로 조작 가능)..
[HTML/CSS] 아이폰 사파리에서 입력창 자동확대 방지
[HTML/CSS] 아이폰 사파리에서 입력창 자동확대 방지
2024.04.25, , 태그를 모바일에서 터치하면(포커스하면) 화면이 자동으로 확대될 때가 있다. 입력창의 폰트 크기가 16px보다 작으면 자동으로 확대되기 때문에 발생하는 현상. 대표적으로 아래 3가지 해결 방법이 있다. 확대 금지 — 모바일용으로 적절하게 디자인된 경우폰트 크기를 16px 이상으로 변경 — 추천폰트 크기를 16px로 변경하고 `transform: scale()`을 이용해 원하는 만큼 줄이는 방법 — 복잡함 방법1 — 확대 금지html 파일 메타 태그의 content 속성에 최대 확대 배율을 1배수만 허용하고, 단말기 확대 기능을 사용하지 못하도록 명시하면 방법. 작은 글씨를 잘 보지 못하는 사람들은 확대할 수 없기 때문에 접근성이 떨어지는 단점이 있다. initial-scale 초기 화면 배율max..
[HTML/CSS] 줄바꿈(개행문자) 표시 / 넘치는 텍스트 생략 기호 표시 방법
[HTML/CSS] 줄바꿈(개행문자) 표시 / 넘치는 텍스트 생략 기호 표시 방법
2024.04.25💡 미립자 팁 : textarea 태그에 readonly 속성을 추가하면 읽기만 가능하고 쓰기는 불가능하다. 로그인하지 않은 유저는 댓글을 쓰지 못하게할 때 유용하다. `` 줄바꿈 적용하기 textarea 태그에 엔터키(개행문자)를 눌러 줄바꿈을 적용해도, 입력한 value를 p 태그 등에 출력해보면 줄바꿈이 하나도 적용되지 않는다. 가장 간단한 해결 방법은 텍스트를 표시할 태그의 스타일에 white-space 속성을 추가하는 것. white-space는 공백 문자를 어떻게 처리할지 결정하는 속성이다. white-space: normal — 기본값 여러 공백 : X (1개로 표시)改行문자 \n 표현 : XWrap : O white-space: nowrap — normal과 동일하나 wrap이 안됨 여러..
[JS] 캔버스 Canvas 도형 확대 축소 후 원점 조정하기
[JS] 캔버스 Canvas 도형 확대 축소 후 원점 조정하기
2024.04.24도형 사이즈 조정 메서드ctx.scale(x, y) : 도형 크기 확대/축소. 캔버스에서 1 단위는 1픽셀. scale(2, 2)는 하나의 단위를 2픽셀로 확대(좌표 사이의 간격 증가) ctx.translate(x, y) : 캔버스의 원점 이동. 기본값은 왼쪽 좌상단 (0, 0) ctx.rotate(angle) : 도형을 라디안(angle) 단위 만큼 시계 방향으로 회전. 항상 캔버스 원점이 회전의 중심 ctx.transform(scaleX, skewX, skewY, scaleY, translateX, translateY)scale(), rotate(), translate() 일괄 적용하는 메서드이전 변형 결과 값에 이어서 수행초기 상태에서 transform(1.2, 0, 0, 1.2, -30, -30)..
[React] Canvas API 기본 내용 정리 / 리액트에서 사용법
[React] Canvas API 기본 내용 정리 / 리액트에서 사용법
2024.04.24캔버스 기본 세팅 for React💡 캔버스는 HTML 요소 중 하나로 스크립트 언어로 그림을 그리는데 사용한다. canvas를 사용하기 위해선 캔버스 context에 DOM으로 접근해야 한다. React에선 useRef()를 사용해서 Ref 객체를 만들고 접근하고 싶은 DOM의 ref 값으로 설정해주면 된다. 그럼 Ref 객체의 .current 값은 해당 DOM을 가리킨다. 캔버스 엘리먼트 생성 및 useRef 설정import React, { useRef, useEffect, useState } from 'react';import styled from 'styled-components';const Canvas = () => { const canvasRef = useRef(null); // 생략 ..