본문 바로가기

분류 전체보기

 (254)
[SVG] data 형식으로 변환하기 svg 이미지 파일을 해당 파일 없이 scss나 css 파일에 저장해둔 background-image 형태로 가지고 다니기 위해선 data 형식의 svg 소스가 필요하다. 그럴때 변환 해주는 유용한 사이트는 아래와 같다. https://yoksel.github.io/url-encoder/ URL-encoder for SVG yoksel.github.io
[SVG] svg window 미리보기 윈도우 환경에서 svg 이미지 파일을 미리보기란 쉽지 않다. 1. 탐색기에서 오른쪽 마우스> 보기> 큰아이콘 으로 설정 해두기 2. 아래 깃허브 레파지토리에 있는 .exe를 다운받아 실행하기 https://github.com/tibold/svg-explorer-extension/releases Releases · tibold/svg-explorer-extension Extension module for Windows Explorer to render SVG thumbnails, so that you can have an overview of your SVG files - tibold/svg-explorer-extension github.com 자신 로컬환경에 맞는 비트.exe를 골라 저장 및 실행한다. ..
[Publishing] position 상쇄 ie 대응 기존 스타일에 position이 정의되어 있을 때 상쇄하는 스타일로 'initial'를 사용하였을 때 ie에서 인식하지 못한다. position: intial; left: initial; bottom: initial; width: initial; 익스를 고려한다면 initial 보단 static를 사용하여 상쇄시킨다. 참고 url: https://www.w3schools.com/css/css_positioning.asp CSS Layout - The position Property W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subje..
[Publishing] 이미지 블러 처리 및 텍스트 위치 CSS 위의 예시로 1770px 과 1130px window 사이즈를 들어보았는데, 이야기 하고자하는 바는, 이미지 블러처리 + 하단에 "2022.03 Sample Onboard Training Programme" 텍스트 위치가 window 사이즈를 줄였을 때에도 같은 위치에 떨어지게 구현하는 것이다. CSS 1. blur 영역의 부모 및 blur 클래스 .blur-parents { display: inline-block; position: relative; } .blur { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient( to bottom, rgba(255, 255, 255, 0) 14%, r..
[Javascript] window bottom 값 알아내기 window의 top 값은 window.top으로 값을 알아낼 수 있지만 bottom 값은 알아내기 어렵다. 따라서 계산식으로 bottom값을 도출해낼 수 있다. 하단 scrollBottom 변수 값이 window bottom 값이 된다. footer가 없을경우 제일 하단에 있는 블록 높이값이 footer 높이값으로 대체된다. var footerHei = $('.footer').outerHeight(); var scrollBottom = $(document).height() - $(window).height() - footerHei;
[React.js] 여러 개의 컴포넌트를 쉽게 만들 수 있는 map() 함수 React.js를 배우고서 사용하지 않은 때가 오면 어쩌지 하고 걱정이 앞서는데, Javascript 로 작성되어 있기 때문에 나중에 그런 날이 오더라도 그동안 배우고 사용한 Javascript 지식은 그대로 있으니 안심이다. map()함수는 Javascript의 함수중 하나인데, 이 함수를 통해서 여러 개를 손쉽게 출력할 수 있다. 아래는 React.js에서 map()함수를 사용한 예시이다. import React from 'react'; function Movie({ title, year, summary, poster, genres }) { return( { genres.mapp((genre) => { return {genre}; }) } ); } export default Movie; map 함수는..
[React.js] props란? props란? 컴포넌트 간에 데이터를 전달해주는 역할. 함수를 예를 들면, 매개변수를 통해 해당 변수의 값을 이용하여 함수안의 코드를 따라 실행 결과가 달라지는 것을 생각하면 쉽다. import React from 'react'; import Food from './Food' function App() { return( Hello ); } export default App; Food 컴포넌트에 fav라는 props를 전달할때, ES6 Javascript 문법인 구조 분해 할당을 이용하면 훨씬 코드가 간결해진다. 아래는 구조 분해 할당을 이용한 예이다. import React from 'react'; function Food({fav}) { return I like {fav}; } export defaul..
[React.js] state와 클래스형 컴포넌트의 관계 state란? 동적 데이터를 다루는 객체이며 클래스형 컴포넌트에서 사용할 수 있는 개념이다. 직접적으로 state를 변환 할수 없고, 간접적인 방법인 state를 받아서, this.setState()를 통해 간접적으로 데이터를 변경할 수 있다. setState()함수는 바뀐 데이터 값만 변환해준다. 바뀌지 않은 데이터에 대해선 그대로 둔다. 여기서 React.js의 장점이 발휘되는 것인데, React.js는 데이터 변경이 생기면 해당 데이터만 변경해주고 그렇지 않은 것에 대해선 그대로 두기 때문에 속도가 빠른 장점이 있다! 즉, React.js는 필요한 부분만 바뀌니까, 화면 구성이 빠르다. state는 반드시 클래스형 컴포넌트 안에서 추가되어야 한다. 이 객체 형태의 데이터(state)를 사용하기 위해..

티스토리툴바