본문 바로가기
728x90
반응형

실전 코딩61

메타태그(meta tag)에 대하여 메타태그(meta tag)란? 메타태그는 웹 서버와 웹 브라우저간에 상호 교환되는 정보를 정의하는데 사용한다. HTML 문서의 사이에 입력하는 특수 태그로서 사이트의 디자인에는 전혀 영향을 미치지 않고 문서가 어떤 내용을 담고 있고, 문서의 키워드는 무엇이며, 누가 만들었는지 등의 문서 자체의 특성을 담고 있다. 요소는 , , , , 요소와 같은 다른 메타데이터 관련 요소들이 나타낼 수 없는 다양한 종류의 메타데이터를 제공할 때 사용되며, 이렇게 제공된 정보는 브라우저나 검색 엔진, 다른 웹 서비스에서 사용하게 된다. 대표적으로 title 태그를 설명하자면 title 태그를 설명합니다. 페이지의 제목을 나타내며 ie(Internet Explorer), safari, firefox의 경우에는 브라우저의 타.. 2023. 4. 19.
swiper fade 겹침 현상 해결 방법 swiper slide를 사용할 때 fade효과를 쓰는데 자꾸 겹침현상이 난다면 아래 fadeEffect 옵션을 추가 적용해준다. effect : 'fade', fadeEffect: { crossFade: true }, 2023. 4. 18.
모바일 기기마다 폰트 크기가 다를 때 휴대폰 기종이 다양한 만큼 모바일에서 폰트 크기가 다르게 나올 때 쓸 수 있는 속성이다. (특히 아이폰이..) text-size-adjust 속성 표준 속성이 아니므로 벤더 프리픽스를 적용시켜야 한다. -webkit-text-size-adjust : none; /* 크롬, 사파리, 오페라 신버전 */ -ms-text-size-adjust : none; /* IE */ -moz-text-size-adjust : none; /* 파이어폭스 */ -o-text-size-adjust : none; /* 오페라 구버전 */ 1. text-size-adjust : none 기본값(default)으로 화면의 크기에 따라 크기를 조정하지 않는다. 기본값이기는 하나 특정 디바이스에 해당값이 무시되는 경우가 있기 때문에 .. 2023. 4. 12.
웹 호환성 css 속성(벤더 프리픽스) css속성을 쓰다보면 -webkit-, -moz- 이렇게 생긴애들이 있다. '-' 기호를 쓰는 이유는 벤더 프리픽스라고 검색해보면 다음과 같다. 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix)를 의미한다. 특정 브라우저에서만 지원되는 css 속성을 사용하기 위해 쓴다고 보면 된다. 결국 호환성 문제인데 scss를 쓰면 컴파일 되면서 css 파일에 자동으로 생기는데 css 파일을 쓰고 있다면 웹 호환성(크로스 브라우징)을 위해서 써주는게 좋다. 파이어폭스를 제외한 신형 데스크탑, 모바일 브라우저는 모두 -webkit-을 사용한다고 생각하면 되고, webkit 기반의 엔진을 공통으로 사용하기 때문에 벤더프리픽스를 .. 2023. 4. 11.
css 속성 flex/grid를 게임으로 이해하기 Flex 이해하기 Flexbox Froggy flex속성을 이용하여 개구리를 연잎 위로 옮기는 게임 https://flexboxfroggy.com/#ko Grid 이해하기 Grid Garden grid속성을 이용하여 정원 가꾸기 게임 https://cssgridgarden.com/#ko 2023. 4. 11.
React에서 a태그 사용해서 화면 이동할 때 (useNavigate) 제목을 보면 이해 안될 수도 있지만 문제는 이거였다. react 사용 프로젝트에서 gnb 메뉴를 누르면 컴포넌트로 이동하는게 아닌 a 태그의 href 속성과 섹션의 id를 묶어서 현재 있는 화면에서만 이동이 이루어지다가 서브페이지로 빠지고 나서 다시 gnb메뉴를 누르면 도메인/서브페이지/#main 이런식으로 뜨기 때문에 서브페이지에서는 메인의 해당 섹션으로 이동하기가 어려웠다. 한참을 헤매고 찾아보다가 해결한 방법을 정리해놓으려 한다. 우선 useNavigate 이 녀석이 답이였다!!!! 뭐라고 검색해야할지도 감이 안오고 한참을 헤매다가 찾아내었다. useNavigate를 쓰려면 router-dom을 설치해주어야 한다. 아래 복사해서 설치하고 npm i react-router-dom gnb 메뉴가 있는 .. 2023. 3. 9.
728x90
반응형

티스토리툴바