본문 바로가기

Lect & Tip147

CSS로 네온 텍스트를 만드는 방법 ✈네온 텍스트는 모든 웹 사이트에 멋지고 미래적인 느낌을 더할 수 있습니다. 저는 항상 네온사인의 마법을 좋아했고 CSS를 사용하여 다시 만들고 싶었습니다. 나는 그것을 하는 방법에 대한 몇 가지 팁을 공유할 것이라고 생각했습니다! 이 기사에서는 텍스트에 빛나는 효과를 추가하는 방법을 살펴보겠습니다. 또한 CSS와 키 프레임을 사용하여 네온사인에 다양한 방법을 살펴보겠습니다. 다음은 우리가 만들 것입니다. 텍스트에 글로우 효과 추가 먼저 텍스트를 빛나게 만들어 보겠습니다. text-shadow속성을 사용하여 CSS에서 수행할 수 있습니다.깔끔한 점 text-shadow은 쉼표로 구분하여 여러 그림자를 적용할 수 있다는 것입니다. .neonText { color: #fff; text-shadow: 0 0 .. 2021. 5. 6.

ReactJS input, select disabled 제어. Warning: Received the string `false` for the boolean attribute `disabled`. The browser will interpret it as a truthy value. Did you mean disabled={false}? ReactJS Warning: Received the string `false` for the boolean attribute `disabled`. The browser will interpret it as a truthy value. Did you mean disabled={false}? ReactJS input, select disabled 제어. index.js:1 Warning: Received the string `false` for the boolean attribute `disabled`. The browser will interpret it as a truthy value. Did you mean disabled={false}? at input at td at tr at tbody at t.. 2021. 3. 23.

리액트 Warning: Use the `defaultValue` or `value` props on <select> instead of setting `selected` on <option>. 리액트 프런트엔드 개발 중에 select를 사용할 때 jquery를 쓰던 습성대로 코딩을 하다 보면 반드시 만나게 되는 흔한 오류 중의 하나가 바로 selected를 사용하지 말라는 경고다. Warning: Use the `defaultValue` or `value` props on instead of setting `selected` on . 'selected'대신에 select에 defaultValue 또는 value props를 사용하라는 뜻이다. 잘못 쓴 리액트 셀렉트 사용법 선택안함 가맹 해지 ; 아래와 같이 쓰면 간단하다. 선택안함 가맹 해지 ref props는 필요에 따라 사용된 것이니 신경쓰지 않아도 무방하다. 만약 select에서 멀티플 셀렉트로 선택할 경우에는 value를 배열로 주면 .. 2021. 2. 27.

여러가지 리액트 멀티 레이아웃 connected-react-router multi layout 적용하기 리액트를 별로 좋아하지 않는 1인이다. 그런데 어쩔 수 없이 리액트 플젝을 해야 해서 퍼블리셔 겸 프런트 엔드로 참여 중이다. jquery라면 단박에 끝낼 문제에 고민하지 않아도 될 문제들이 리액트에는 넘쳐난다. 왜 쓰는지는 여전히 모르겠지만 까라니까 깐다. 일단 SPA 사이트에서 리액트가 편한 것은 대충 짐작은 된다. 그런데 SPA사이트라고는 해도, 한 사이트에 서로 다른 레이아웃이 여럿 사용해야 되는 경우가 많다. 단적으로 GNB, LNB가 없는 Intro페이지, Login페이지 그리고 사용자 화면과 다른 관리자 화면의 레이아웃은 서로 다를 수 있다. 아니 다를 수 있는 정도가 아니라 대체로 다르다. 그럴 때 리액트 여러 가지 레이아웃 적용하는 방법은 꽤 다양하지만 직관적이고 쉬운 방법을 소개하겠다... 2021. 2. 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. 1. 29.

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. 1. 14.

✈ 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 wid.. 2021. 1. 11.

Jquery 스와이퍼 슬라이더 플러그인 idangerous.swiper.js pagination 스타일 변경하기 ✈ Jquery 스와이퍼 슬라이더 플러그인 idangerous.swiper.js pagination 스타일 변경하기 idangerous.swiper.js를 사용하면 모바일에서 슬라이드를 터치해서 넘길 수 있는 장점이 있다. 그런데, idangerous.swiper.js에서 제공하는 여러 템플릿 중에서 페이징 처리를 텍스트 문장으로 처리할 수 있는 기능은 없다. 약간의 꼼수를 사용해서 페이지네이션에 숫자나 불릿 대신 텍스트 문장을 보여주도록 변형했다. 그런데, 대략 6~8개 정도를 배치할 수 있는 이 형태에서 디자이너가, 페이지네이션을 다시 페이징처리를 해서 10개 정도 등록되었을 때 초반 6개만 보이고, 나머지는 다음 페이지에서 보이게 처리해 달라는 주문을 받았다. 그런데 그런 처리를 하려면 플러그인 자.. 2021. 1. 11.

📌 JSP에러 : HTTP Status 500 에러메세지- sda7: write failed, user block limit reached 2016.08.08 09:59 작업 중 기록한 글. 가끔 JSP 서버에서 작업하다 보면 아파치가 에라 모르겠다! 배 째! 이럴 때가 있다. 바로 HTTP Status 500 에러메세지 때문이다. 그중에서 sda7: write failed, user block limit reached를 만나게 되는 경우가 있는데... 이건 사실 별건 아니다. 톰캣의 로그를 살펴보면 위와 같이 에러가 나 있는데, 할당된 디스크 공간을 다 사용했다는 뜻이다. JSP호스팅 서버에서 웹 하드 용량을 살펴보니, 가득 차서, 불필요한 파일을 삭제해서 공간을 삭제해주니, 별문제 없이 제대로 웹페이지가 열렸다. 성남시청 홈페이지는 성남시 IDC에 웹서버를 두고 있다. JSP에러가 난 것은 내 개인 포트폴리오 상에서의 에러다. 2020. 9. 17.

이전 1 ··· 7 8 9 10 11 12 13 ··· 17 다음

티스토리툴바