2022/05 16

React 이미지를 넣는 방법

#1 src 폴더에 파일이 있을 경우 1) css에 background로 적용하는 방법 일반적인 css 적용 방법과 동일. (App.css) .logo { background-image : url('./logo.png'); } 2) html 내부에서 적용하는 방법 import [이름] from [경로]를 적은 후, 이미지를 삽입하고 싶은 위치에 img src = {} 태그를 사용 (App.js) import logo from './logo.png' function App(){ return ( ) } #2 public 폴더에 파일이 있는 경우 그냥 /로 시작해서 이미지 경로를 입력하는것으로도 적용은 된다. 하지만, 빌드하여 배포할때 도메인이 아닌 하위 경로에 위치하게되면 파일을 찾지 못하기 때문에 다음과 ..

티스토리 이용자 제작 스킨 설치 및 적용하기

유저들이 제작한 이용자 제작 스킨을 자신의 블로그에 적용하는 방법입니다. #1 스킨 파일을 다운 이용자가 직접 제작한 스킨 파일을 다운 받습니다. 공유 방식이 어떻든 압축이 되어있다면 압축을 다 풀어줍니다. #2 스킨 파일을 업로드 1) '블로그 관리 > 꾸미기 > 스킨 변경'으로 이동합니다 2) '스킨 등록' 버튼을 클릭 3) '추가' 버튼을 눌러 다운 받은 파일을 모두 업로드 해 줍니다. * 파일은 폴더째로 업로드 되지 않기 때문에 바깥에 있는 파일을 모두 업로드 한 후, images 폴더 안에 파일들도 다시한번 모두 업로드 해 줍니다. (폴더는 자동으로 지정되니 신경스지 않아도 됩니다) 4) 업로드가 완료되었다면 '저장'을 합니다. #3 블로그에 적용 1) '꾸미기 > 스킨 변경'에서 '스킨 보관함..

웹 개발자/디자이너가 사용하면 좋은 Google의 Tools

#1 모바일 친화성 테스트 모바일 친화적인 사이트를 보유하는 것은 온라인 인지도를 유지하는 데 중요한 역할을 합니다. 여러 국가에서 스마트폰 트래픽이 데스크톱 트래픽을 넘어서고 있습니다. 아직 사이트를 모바일 친화적으로 만들지 않았다면 모바일 친화적인 사이트를 만들어야 합니다. Search Console의 모바일 친화성 테스트 도구를 사용하면 사이트가 모바일 친화적인지 빠르고 간편하게 테스트할 수 있습니다. 사용 방법은 매우 간단합니다. 테스트 하려는 웹페이지의 전체 URL만 입력하면 됩니다. 모바일 친화성 테스트 페이지로 바로가기 > #2 PageSpeed Insights 웹페이지의 전반적인 속도를 측정하여 사이트 성능을 파악할 수 있습니다. 사이트를 로드하여 시뮬레이션을 한 후 속도에 관한 다양한 분..

Sass(SCSS) 설치와 기본적인 사용방법

#1 설치 다양한 설치 방법과 컴파일러가 존재하지만 VSCode를 사용하고 있다면, 확장 마켓플레이스에서 'Live Sass Compiler'를 검색하여 설치만 하면 모든 준비 과정은 끝입니다. * 각종 블로그에서 node.js설치부터 시작해서 이것저것 너무 건들여대는 설명이 많아서 이 글 적어봄. #2 사용방법 (1) CSS 파일을 사용하는것과 큰 차이는 없습니다. (2) 새로운 파일의 확장자를 *.scss로 생성하여 코드를 작성. (3) 웹 브라우저는 html, css, js만 읽을수 있기 때문에 scss로 작성된 파일은 웹 브라우저가 읽을수 있도록 변환(Compile)해줄 필요가 있습니다. (4) 컴파일을 하는 방법은 화면 하단의 Watch Sass 버튼을 클릭하면 끝. *만일 하단 바가 안보이면 ..

이미지를 랜덤으로 삽입하기 (Unsplash)

웹 개발을 하다 보면 이미지 소스가 필요한 경우가 상당히 많습니다. 매번 사이즈를 확인하고 작업 중인 폴더로 이미지를 옮기는 과정도 귀찮아지기 시작하는데... Unsplash에서 제공해주는 API를 이용하면 이러한 고민이 쉽게 해결됩니다. #1 Unsplash Developers 사이트 주소는 다음과 같습니다. https://unsplash.com/developers 개발자로 등록(Register as a developer)한 후 다양하게 사용하는 방법도 있지만, 웹 개발용 샘플 이미지만 사용할 거라면 등록은 물론이고 특별히 거쳐야 할 과정도 없어 매우 편리합니다. 예전에는 샘플 이미지와 함께 복붙만 하세요 처럼 샘플 이미지와 함께 디테일한 설명이 있었던 거 같은데, 다 사라진 거 같아서 정리할 겸 글을..

임팩트 있는 코딩을 해보자: Power Mode

쓸데없지만 멋있는!? 마치 스타벅스 한복판에 자리잡고 이걸로 코딩을 하고있으면 주변의 이목을 끌수있을거 같은. 그런 확장앱을 하나 소개해보고자 합니다. #1 Power Mode 당신의 코드가 파워풀해진다! Power Mode는 VSCODE, Brakets 등에서 사용할 수 있는 확장 툴입니다. 코딩을 할때 지진과 같이 화면이 흔들리면서 이펙트와 콤보수(연속 타이핑수)를 표시해 줍니다. #2 설치 방법 확장 마켓 플레이스로 이동한 후, power mode를 검색하면 쉽게 설치 할 수 있습니다. #3 사용방법 (1) 설정 창으로 이동 하여 power mode를 검색합니다. (2) 가장 위쪽에 위치한 powermode: Enabled를 체크해주면 사용 상태가 됩니다. 설정을 통해 찾아 들어가는게 귀찮다면 명령..

반응형