고객의 요청으로 폰트 미리보기 사이트를 만들었는데, 갑자기 모든 폰트가 고딕체로 변했다는 연락이 왔습니다.확인해보니 다른 브라우저에서는 모두 정상적으로 보이는데 '네이버앱' 에서만 폰트가 고딕체로 되어있더라고요. 왜 눈누 페이지는 되는데 내껀 안되지?! 하고 여기저기 뒤져본 결과 일단 확인할 내용1. 네이버앱 설정 > 화면 스타일·폰트 설정에 기본글꼴로 되어있어야함. (눈누에서도 동일하게 보이는지 확인)네이버앱은 사용자가 폰트를 정할수있기때문에, 웹폰트보다 앱에 적용된 폰트가 최우선으로 먹힘..이의경우 강제로 설정할수있는 방법은 없는듯 합니다.!important 를 먹여도 네이버앱 설정이 제일 최고순위인거 같아요. 2. css 확인이의경우 개발자님이 건든뒤로 확인은 안했었는데 다시보니 콤마, 가 들어가있..
Frontend
자바스크립트 중에 clipboard.js 라는 라이브러리가 있는데,이걸로 우리는 아주 쉽게 클립보드 기능을 구현할 수 있어요. 아래의 링크로 접속하여 파일을 다운로드 하거나,https://clipboardjs.com/ clipboard.jsA modern approach to copy text to clipboard. No Flash. No frameworks. Just 3kb gzippedclipboardjs.com아래에 올려놓은 CDN 스크립트를 HTML에 삽입해주세요. 1. JavaScript let clipboard = new Clipboard('a'); clipboard.on('success', function(e) { console.log(e); }); clipboard.on('error'..
jQuery를 사용하여 작업을 하다가 clientHeight, clientWidth 값이 undefiend 가 뜰때 해결방법입니다. 1. console.log($(element)) 먼저 콘솔로 값을 찾고싶은 엘리먼트를 찍어주고 새로고침하여 콘솔창을 리로드합니다.그럼 이런식으로 console 창에 요소 정보들이 나열되는데,우리가 구하려는 clientWidth, clientHeight는 0 이라는 배열에 정보가 담기는것을 확인할 수 있습니다. 2.$(element).clientHeight 를 스크립트 작성하면 undefiend값이 뜨지만$(element)[0] 를 사용하면 객체값에 정상적으로 접근되게 됩니다. let e = $(element)[0]let eHeight = e.clientHeight;let e..
작업 중 서버에서 불러오는 요소의 위치가 같으나 불러오는 이미지가 다를경우, 이미지의 alt 또는 title 속성에 따른 css를 적용할 수 있다. 아래 css를 공유하는 두 태그가 있다. 이 이미지에 class를 부여할 수 없을때(외부에서 불러오는 요소 등), 스크립트를 사용해 class를 개별적으로 부여하여 작업하는 경우가 많다. 이미지 하나에 쓰이는 작업량이 많기에 스크립트를 사용하지 않고 CSS만 사용하여 이미지에 적용시키려 한다. 나는 boss 라는 이름(title)을 가진 img 태그에 margin-top : -10px을 주고싶었다. /* 예시 CSS */ img[title$="boss"]{margin-top:-10px;} img[alt$="boss"]{margin-top:-10px;} 이의 ..
목표.slideDown(), .slideUp() 함수를 이용하여 마우스 오버시 작동되는 드롭다운 메뉴 구현하기HTML 마크업 컴퓨터 조립PC 할인안내 마우스 2만원 이하 5만원 이하 키보드 게이밍 사무용 CSS 1. 먼저 1차 카테고리 역할을 할 li를 정렬 해 줍니다. 기능만 구현 할 것이기 때문에 최소한의 꾸밈 없이 진행합니..
1. css에 오타 없는지 빼먹은 기호 없는지 확인한다. 2. 1번이 아니라면 헤더 메타태그 선언을 확인한다. title 선언 위로 아래 문구가 없다면 붙여넣기
https://github.com/kenwheeler/slick/issues/3271 Slick Center Mode - Animations Bug between last and first slide · Issue #3271 · kenwheeler/slickHello, I'm using SLICK in center mode with some CSS animations but i have a bug, like a rebound of animations, between last and first slide. Do you have any idea to stop this rebound ? Thanks a lot...github.com 해당 문제infinite : true 일때 첫 슬라이드와 마지막 슬라이드의 애..
목표 :hover 이벤트에 대해 알기 특성 마우스를 올릴 요소를 A, 주고싶은 변화를 B 라고 칭했을 때. A:hover {B;} 형식으로 CSS를 작성해주면 됩니다. 학습 1) HTML 마크업 저는 각 텍스트에 마우스를 올렸을때 (hover 했을 때) 해당 글씨대로 색깔을 변경해보려고 합니다. 빨간색 파란색 검정색 배경, 하얀색 글씨 2) CSS 그리고 무쟈게 간단한 CSS .red:hover{color:red;} .blue:hover{color:blue;} .bnh:hover{color:white; background:black;} 결과
목표.on('click',function(){}) 함수에 대해 알아보자. 함수.on('click',function(){발생시킬 이벤트 함수 작성})이 함수는 .bind() 함수를 사용하지 않아도 this 값을 쉽게 잡아줄 수 있어 사용하기 편한 함수입니다..on('타입',function(){}) 함수의 '타입' 에는 click 이 아닌 다른 이벤트도 들어갈 수 있습니다.그건 나중에 따로 다루도록 하겠습니다. 학습1. HTML 우리는 스크립트만 다루면 되기 때문에 최소한의 마크업을 해주었습니다. 이 버튼을 클릭 해 보세요. 2. JavaScript이 함수를 입력하고 버튼을 클릭하면 개발자 모드(F12) 로 접속하여 콘솔창에 '클릭 되었어요' 라는 문구가 뜹니다.$(function(){ console.lo..
