본문 바로가기

Dev128

React Js - Global CSS 설정 + styled reset. classNames/bind :global local css 동시 적용 react module.css :global local css 동시 적용하는 방법. classNames/bind를 사용하고 있을 때 className={cx("label","labelTst")} .labelTst는 app.module.css에 등록. React Js - Global CSS 설정 + styled reset css 초기화를 위해 styled-reset 설치 styled-components는 local로 동작하기 때문에 global 한 css를 만들기 위해 GlobalStyles.js 생성 설치 NPM설치 : npm install styled-reset styled-components 얀 살치: yarn add styled-reset styled-components 사용 Components/G.. 2021. 3. 10.
CSS3 text-shadow 텍스트 쉐도우 배경 BG에도 잘 보이는 글자 국어청 인사말 퍼블리싱 작업 중인데... 2016. 9. 8. 17:35 디자이너가 원색 찬연한 BG를 깔았다. PC 화면에서라면 문제가 없지만... 반응형으로 모바일 화면이 되면, 백그라운드 이미지와 텍스트가 겹치게 되는데... 글씨가 배경 때문에 잘 안보일 수가 있다. 이럴 때 선택은 3가지다. 1. 모바일 상태에서 BG를 날려버린다. (화면이 굉장히 심심해진다.) 2. 텍스트와 BG레이어를 absolute로 띄워서 모바일 미디어 쿼리일 때는 BG레이어에만 opacity를 먹인다. (배경 흐려짐 효과) 3. BG에도 잘 보이는 글자가 되게끔 텍스트에 스트로크를 씌운다. CSS에 스트로크가 없으니 text-shadow를 응용한다. 텍스트의 css속성으로 text-shadow:#fff 0 0 2px 2p.. 2021. 3. 10.
jquery로 페이지 상단으로 부드럽게 이동하는 탑 스크롤 버튼 만들기 보통 탑스크롤이라고 부르는 버튼인데요. 흔한 방식이지만, 가끔 떠 오르지 않아서 검색하시는 분들을 위해 올려둡니다. 뭐~ 저도 가끔은 까먹어서 다시 생각해내는 일 없이 떠다 쓰려공.... /* top 스크롤 */ var speed = 500; $("a.top").css("cursor", "pointer").click(function(){ $('body, html').animate(, speed); }); speed 변수는 스크롤이 애니메이트 되어서 이동하는 속도를 지정해줬습니다. 귀찮으면 그냥 변수 쓰지 말고 숫자로 바로 써도 됩니다. . css("cursor, "pointer")는 생략해도 무방하며, css자체에 a.top { cursor:pointer}로 작성해두어도 무방합니다. 실질적인 핵심은 $(.. 2021. 3. 5.
텍스트간격조절 & cursor:pointer; cusor:hand; <a 태그가 아니라도 클릭 아이콘 나타내기. cursor:pointer; cusor:hand; 글자 한 자 한 자... ‘영어 글자 부분만 따로’ 스타일시트 코드를 적용시키면 됩니다. size：10pt；text- indent：10px；text-align：justify；letter-spacing：－1 px； --> 글자 한 자 한 자... ‘영어 글자 부분만 따로’ 스타일시트 코드를 적용시키면 됩니다. 2021. 2. 12.
jquery hover function 사용 예 제이쿼리 이벤트 중에서 꽤 흔하게 사용되는 이벤트 메소드가 바로 hover다. 특정 엘러먼트 위에 마우스가 위치하거나 벗어났을 때의 이벤트를 정의한다. 자바스크립트의 mouseenter, mouserover를 한 번에 제어할 수 있다. CSS의 :hover 선택자를 이용한 것과 같은 이벤트를 타기 때문에, 키보드로 앵커에 위치했을 때는 동작하지 않는다. jquery hover function 사용 예 $(document).ready(function(){ //2depth menu showing when menu is collapsed var hoverMenu = $('.lnb .lnb1depth >li'); hoverMenu.hover( function () { var menuInitH = $('#menu.. 2021. 1. 18.
부트스트랩 날짜선택 폼 bootstrap 4.3 datepicker 부트스트랩을 사용하면 여러 편리함이 있는데 그중에서도 드롭다운, 데이터 피커 같은 것을 쓰기가 굉장히 쉽다. 그런데 부트스트랩 4.3으로 업그레이드를 하면, 기존에 부트스트랩으로 작성했던 스타일이 흐트러진다. 그중에서도 특히 datepicker는 최악이다. 또한 부트스트랩 4.3에서는 더 이상 글리피콘을 지원하지 않는다. 글리피콘이 유료화된 탓이다. 기존의 부트스트랩 데이터 피커를 그대로 사용했다면, 클래스 명을 변경해 주고 글리피콘 대신 :before 선택자로 이미지 캘린더를 달아 주면 된다. 꽤 비슷한 화면이 나왔다. html markup은 다음과 같다. - 달라진 점은 input-group-addon 대신에 input-group-append을 사용했다. 또한 캘린더 아이콘이 뿌려지던 태그에서 글리 .. 2021. 1. 16.
nginx woff mime type error 설정 해결 방법 Unexpected character in input: 에러 nginx woff mime type error 설정 해결 방법 Unexpected character in input: 에러 2019/07/25 15:19:07 [error] 25892#24016: *313 FastCGI sent in stderr: "PHP Warning: Unexpected character in input: ' ' (ASCII=11) state=0 in C:\work\cj_003\dcms-ui\assets\fonts\glyphicons-halflings-regular.woff2 on line 100 PHP Warning: Unexpected character in input: '' (ASCII=16) state=0 in C:\work\cj_003\dcms-ui\assets\font.. 2021. 1. 14.
CSS 선택자 (selector)의 정의와 사용법 CSS를 다루는 데 있어서 가장 기초적이고 기본적이고 핵심 적인 것이 바로 CSS 선택자의 활용이죠. CSS의 선택자 문법은 다음과 같죠. 선택자 { 속성:값} /*example*/ select {position:absolute} #selector { position:absolute; } .selector { postition:absolute; } 이런 선택자는 우리가 CSS의 스타일을 적용하고 싶은 특정 대상을 제한하고 지정하는 것을 지칭하는 것이죠. 쉽게 생각하면 타깃이라고 여겨도 무방합니다. 위에서 예를 든 선택자 3종에 대해서 일단 알아보죠. 요소 선택자 (type Selector) 아무런 기호가 없이 오는 단어는 html 태그의 Element요소입니다. a, p, div, table, li, u.. 2021. 1. 13.
bootstrap4 datepicker tempusdominus style css 수정을 위한 달력 element dom class bootstrap4 datepicker tempusdominus style css 수정을 위한 달력 element dom class 부트스트랩 4에서는 기존의 datepicker가 작동하지 않는다. 그렇다고 bootstrap을 마이너그레이션을 하기도 애매하다. 부트스트랩 4에 적용이 가능한 데이트 피커는 tempusdominus가 거의 유일하다. 좀 더 커스터마이징을 하려면 필스 라이브러리인 moments.js도 건드려야 하지만, 일단은 tempusdominus가 그리는 calendar의 class와 html element 구조만 알아도 대략적인 스타일링은 가능하다. 하지만 유감스럽게도 데이터피커를 멈추고 돔을 탐색하기가 쉽지 않다. 시간이 없어서 일단 그냥 tempusdominus datepicker .. 2021. 1. 11.
css3 :not 선택자 css3를 쓰면 css2에 비해서 퍼블리셔가 원하는 결과를 얻기가 굉장히 수월하다. 예전 같으면 스크립트의 도움을 받았어야 할 일을 css만으로 처리가 가능해졌기 때문이다. display:flex, nth-child(), calc()와 더불어 :not 선택자는 정말 축복이다. 사용방법은 간단하다. :not(.foo) {color:blue} 와 같이 사용하면 .foo 클래스가 아닌 다른 엘레먼트는 모두 텍스트 컬러 색을 파란색으로 바꾸란 뜻이다. 좀 더 세분화 할 수도 있다. div:not(.foo) { color:blue} div중에서 foo클래스가 없는 div는 텍스트 컬러를 파란색으로 하라는 뜻이다. Elements뿐만 아니라 클래스, ID를 대상으로도 선언할 수 있는 것은 당연하다. .chartAr.. 2021. 1. 5.
location.href과 split()함수로 이미지 변경하기 실제로 홈페이지를 개발하게 되면, 퍼블리싱과는 별개로 개발언어가 입혀지는 경우에 한 개의 소스 페이지로 파라미터 값을 달리해서 다른 메뉴를 구성하게 되는 경우가 종종 있다. 2015.03.26 01:30 이럴 때 특정 이미지 혹은 특정 코드만 다르게 보여져야 하는 경우 개발자를 귀찮게 하기 싫으면 location.href를 이용하면 편리하다. 예시로 들 사이트는 종로구시설관리공단인데, 유지보수 의뢰로 담당부서의 전화번호를 페이지에 삽입해 달라는 의뢰가 들어왔다. 개발자들이 바쁜 관계로 개발을 거치지 않고 UI단에서만 처리한 소스이다. http://www.ijongno.co.kr/front/main/11 종로구시설관리공단 www.ijongno.co.kr 문화체육시설, 종로구민회관, 종로문화체육센터, 동무여.. 2021. 1. 4.
[웹접근성] jquery checked checkbox radio 체크 유무, 선택된 값 가져오기 제이쿼리 체크박스 개수체크 소스 웹접근성을 고려한 jQuery를 활용한 체크박스와 라디오 버튼 처리 개요 이번 포스트에서는 웹 접근성을 준수하면서 jQuery를 활용하여 라디오 버튼과 체크박스를 처리하는 방법에 대해 알아보겠습니다. 웹 접근성을 고려하면서 사용자가 오류 발생 시 알림을 받고 해당 입력 폼으로 포커스를 이동시키는 방법을 예제를 통해 살펴보겠습니다. 예제 소개 오늘은 강동구립통합도서관 회원가입 페이지에서 라디오 버튼과 체크박스를 사용한 예제를 다루겠습니다. 사용자가 약관 동의와 개인정보 처리 방침 동의를 선택할 때, jQuery를 사용하여 선택 여부와 포커스 이동을 처리하는 방법을 살펴보겠습니다. 예제 코드 설명 아래는 사용된 라디오 버튼과 체크박스의 예제 코드입니다. 통합회원 구립도서관회원 작은도서관회원 회원 약관에 동의.. 2021. 1. 3.

티스토리툴바