본문 바로가기

HTML & CSS

 (36)
[HTML] 카카오톡 오픈그래프(og) 이미지 안 뜨는 오류 해결 오류 현상HTML에서 og 태그를 설정하였다.그 중 og:image 는 웹페이지와 연관된 이미지 인데, 만약 카카오톡으로 사이트 링크를 전송하면 상단에 이미지가 뜬다.▼ og 태그 참고 아래는 정상적으로 보냈을때의 예시이다. 하지만 개발중인 사이트를 공유했을때 아래와 같이 이미지가 미노출되는 현상이 발생했다.아래와 같이 코드를 작성했는데 다른 사이트에서는 정상적으로 이미지가 노출되었다. 원인원인을 찾아본 결과, 카카오톡 오픈그래프 캐시 문제일 수도 있다는 글을 발견했다.카카오톡은 더 빠른 데이터 로딩을 위해 og 정보를 캐시하는데 링크를 처음 공유할때 og정보가 제대로 설정되지 않았다면 캐시가 갱신되지 않아 이미지가 표시되지 않을 수 있다는 것이다.따라서 카카오 developers에서 캐시 초기화를 통해..
[CSS] 이미지 드래그, 선택 막는 방법 이미지 보안을 위하여 드래그 및 선택(우클릭)을 막는 경우가 있다. 방법은 다음과 같이 CSS에 적용시키면 된다. 드래그 막기 img { -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; user-drag: none; } 선택 막기 -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; 이미지 선택, 드래그 막기 //이미지 선택,드래그 막기 -webkit-user-select: none; -khtml-user-select: none; -mo..
[CSS] width: fit-content; 적용이 안되는 이슈 해결(feat:IOS) 이슈 width: fit-content; 를 통해 CSS를 작성했는데 PC에서는 이상이 없다가 IOS에서 확인을 하니 적용이 안되어 다르게 나타났다. 원인 크롬 46 이하 버전, 인터넷 익스플로러나 엣지, IOS에서 width:fit-content가 안될 수 있다고 한다. 해결 width:auto; 를 사용하여 조절하거나 (auto의 경우 display: inline-block;을 같이 사용해야한다.) 같은 역할을 하는 display:table; 를 사용하면 모든 버전에 적용된다. https://stackoverflow.com/questions/49095440/width-fit-content-working-on-chrome-but-not-explorer/49095568 width: fit-content;..
[css] background image hover시 확대하기 React 컴포넌트에서 다음과 같이 image가 변경되는 경우 scss를 아래와 같이 설정하자 hover시 이미지가 점차 확대되었다. .product-img { ... background-position: center; background-size: 100%; transition: background-size 0.5s ease-in; &:hover { background-size: 110%; } } 참고사이트) (CSS) background-size에 hover transition animation 적용 안될때 해결방법 오늘은 background image를 hover시 확대되는 효과와 자연스러운 transition 애니메이션 효과를 간단하게 해결해보도록 하겠습니다. background-size tran..
[CSS] ellipsis('...') 나타내는 방법 일정범위가 넘는 글자는 자르고 2줄부터 ...이 나타나도록 하고 싶었다. 아래와 같이 코드를 작성하여 다른곳에서 사용시 include를 통해 공통 적용될 수 있도록 만들었다. @mixin ellipsis($line-cnt) { overflow: hidden; text-overflow: ellipsis; //... letter-spacing: normal; word-break: break-word; //줄바꿈시 단어로 쪼개지도록 overflow-wrap: break-word; //요소내에서 단어 강제 줄바꿈 display: -webkit-box; //웹킷브라우저-다중 라인 레이아웃 -webkit-box-orient: vertical; //세로 방향으로 라인배치 -webkit-line-clamp: $line..
[css] SVG 사용 방법 React 에서 SVG를 사용하는 방법은 다음과 같다. import Logo from '@assets/images/logo.svg'; ... 위와 같이 img 태그를 사용할 경우, 이미지의 width, height는 스타일로 수정가능하지만 색은 변경하여 사용 할 수 없다. 값을 변경하여 사용하려면? >> 1. 바꾸고자 하는 svg 요소의 값을 current로 수정한다. 2. current로 바꾼 요소는 사용자가 원하는 값을 넣어 커스텀 사용이 가능하다. import { ReactComponent as DeleteIcon } from './Delete.svg' const LogoComponent = () => { return ( ) } React SVG 다루기 들어가며 musma.github.io
[CSS] CSS 방법론- class naming convention (OOCSS, BEM) 1. OOCSS (Object Oriented CSS) ✔ 주로 많이 사용되는 CSS방법론 OOCSS는 약어에서도 알 수 있듯이 객체 지향에 따라서 고안된 설계 방식입니다. 중복을 최소화하고 캡슐화를 원칙으로 하는 방법론 CSS를 모듈 방식으로 코딩하여 중복을 최소하는 방법입니다. 가능한 짧고 간결하게 작성합니다. 동작과 형태가 예상 가능하도록 명확하게 작성합니다. 어떻게 생겼는지 보다는 어떤 목적인지 알 수 있도록 의미 있게 작성합니다. 지나치게 구체적이지 않게 일반적으로 사용가능 하도록 작성합니다. 외양: .button, .box, .widget, .skin… 컨테이너와 콘텐츠 분리 .globalwidth + .header-inside / .main-btn .bg-blue, .bg-red 이 방법론의..
[SCSS] 전역 적용 대신 한 파일에서만 사용(module)/중복 클래스 피하기 SCSS를 사용 중, 컴포넌트내에서 파일을 import해도 컴포넌트를 또 다른 파일로 import 하면 결국 파일이 한 데 모인다. 클래스명이 동일할 시, 결국 같은 SCSS의 style이 적용되어 원치 않았지만 같은 스타일이 적용되고 큰 프로젝트 진행시에는 더 큰 문제가 생길 수 있다. 따라서 SCSS를 한 파일 내에서 해당 클래스에만 적용하고자 할 경우에는 module을 사용한다. 1. 파일명을 .module.scss로 변경한다. 2. 다음과 같은 방식으로 import 한다. (import styles from '파일명' ) import styles from './footer.module.scss'; 3. 클래스명을 사용시 {styles.클래스명}으로 사용한다. + 하이픈 -이 들어간 classNam..

티스토리툴바