kasumil의 코딩 공작소

사이트를 개발하는데 있어 생뚱 맞은 게 왔다. 무려 keyframe을 통한 애니메이션 구동... 이게 내가 만드려고 해보니 너무 어려웠다. 왜냐하면 x축 이동만 있는 게 아니라 y축도 이동시키면서 이동시 모습은 해당 부분이 보이지 않아야 하므로 그래서 기본 코드에서 기존 3개에서 4개로 밀어넣는 부분을 고쳤고, 해당 넓이를 찾기위해서 message 태그 위치에서 개발자 도구로 top, width를 넣어가며 해당 태그의 길이와 위치를 일일히 찾아야만 했다. 그리고 overflow hidden, animation css를 꺼둔 상태로. 해야 이동되지 않음. code epen에서 위치랑 실제 구동 되는 위치가 달라서 원본 소스코드로는 -3, -6, -9, -12.5em으로 잡야한다. 좀 많이 어려웠지만 ani..

별건 없고, 그냥 css 적용할때 알게된 사실을 적기위해 적는다. https://jsfiddle.net/92qvegtr/2/ Edit fiddle - JSFiddle - Code Playground jsfiddle.net progress { -webkit-appearance: none; // 이부분이 있어야 기본적으로 먹힌 색상을 수정할 수 있다. height: 5px; } progress::-webkit-progress-bar { background: "lightblue"; border-radius: 5em; } progress::-webkit-progress-value { background-color: #19E0A7; border-radius: 5em; } 프로그레스바 커스텀.

처음에는 https://pang2h.tistory.com/227 masonry 레이아웃 구성하기 이런 식으로 이미지, 혹은 내부 요소를 구성하는 방법이 필요해서 검색 좀 해봤습니다. 개인적으로 몇몇과 함께 하고 있는 프로젝트에서 갤러리 레이아웃이 필요해서요. 이 스타일로 페이지를 pang2h.tistory.com 이분의 코드를 사용했다. 그런데 말야... 너무 느리다.. 이미지 200개가 뜨는데 10초 걸리는게 말이 되나? 그래서 엎었다. 그래서 찾아보니까 우연히보니 이미 잘 만들어놓은 코드가 있더라. 무엇보다 JS로 컨트롤하는 것이 아니라 CSS로 컨트롤해서 더 빠르고. Cinderella wearing European fashion of the mid-1860’s Rapunzel, clothed in..

-webkit-mask: linear-gradient(rgb(255, 255, 255) 70%, transparent); 선형 그라디언트를 사용하여, 글자가 들어간 아랫부분을 opercity를 준 것마냥 희미하게 보이게 해준다. 원래는 opensea에서 쓰던 건데, UI 개선하면서 사라졌길래 적어둔다. 저 가운데, 70%를 낮출수록 뿌옇게 보여지는 부분이 줄어든다

좀 뻘글이긴한데, 그냥 회사에서 쓰려고 디자인 찾기 귀찮아서 저장해둠. https://csshint.com/css-input-text/ 20+ CSS Input text - csshint - A designer hub Latest Collection of free Hand picked Html CSS Input text Examples. Demo and Download the zip (*.zip). jumping input text, CSS Floated Labels csshint.com https://freefrontend.com/css-select-boxes/ 31 CSS Select Boxes Collection of free HTML and CSS custom select box code exam..

구형까지만해도 그냥 자체적으로 지원하던 부분이었는데 1.15버전으로 와서는 지원하지 않는다. 아마도 하는것 같은데 내가 구한게 그런건지는 잘 모르겠다. 그래서 귀찮지만 직접 만들었다. @media only screen and (max-width: 900px) { .layout__area--left, .charts-popup-list .separator, .charts-popup-list .title { display: none !important; } .layout__area--top, .layout__area--center, .chart-container { left: 0 !important; width: 100% !important; } .chart-container-border .chart-widg..

Styled-component import React from 'react'; import styled from 'styled-components'; import Button from './components/Button'; const AppBlock = styled.div` width: 512px; margin: 0 auto; margin-top: 4rem; border: 1px solid black; padding: 1rem; `; function App() { return ( BUTTON ); } SCSS import React from 'react'; import './Button.scss'; function Button({ children }) { return {children}; } expor..

- 보통 대부분의 React Native 교재에선 보통 styled-component로 css를 컨트롤 할 것이다. 하지만, 회사에서 유지보수 측면에선 좋은 것은 아니므로 css를 한개에서 컨트롤 하는 것이 나을 것이다. 그렇기에 한개에서 컨트롤 하는 것을 적어보려고 한다. 호출 방법은 간단하다. const styles = require('../../cssstyle/StyleSheet').member; //css 위와 같이 styles에 함수 설정을 하고 해당 값으로 접근하여 해당 설정한 값을 보면 된다. css파일에선 이렇게 구성하여 놓는다. const { StyleSheet } = require('react-native'); module.exports = { member: StyleSheet.crea..

- 오늘 학습한 내용. CSS 선택자 종류 universal * type tag ID # class . state : Attribute [] display block : 화면에 보이도록 하는 고정. none : 화면에서 숨기는 것. 렌더링 하지 않음. null : 화면에 존재하나 보이지 않는다. position 2020/06/23 - [코딩/위코드 코딩과제] - position 속성 - relative, absolute, fixed position 속성 - relative, absolute, fixed Position 속성 relative absolute fixed static(앞서 코딩학습 2일차에서 잘 안쓴다는 속성이 static이다.) static static은 기본값입니다. position: st..

inline 속성값을 가진 태그로 a, span 태그 등이 있다. 인터넷주소링크, 요소(엘리먼트) block 속성값을 가진 태그로 div, p, h1 등이 있다. 정해진 것 없음 내용 제목 코드의 차이점은 html에서 표시될때 영역할당에 따른 구분이다. block은 한 줄을 차지하고, 그 옆에 아무런 속성, 요소등이 올 수가 없지만, inline 속성은 딱 감싸진 글자들만 표시되기때문이다. inline-block 블록 자체의 성질은 block이지만, inline-의 문구가 붙으므로 inline의 성질이 생겨서 block속성을 동시에 가진 것. 이해하기 쉽도록 한번 예제를 만들어 보았다. 맨 마지막은 inline-block을 블록성질이 inline으로 바뀐것을 볼 수 있도록 확인하기 위해서 작성하였다. d..