아싸지만 1일1글 하고싶어

목차 이미지 크기 아는 법 인터넷에 익숙하지 않은 사람들은 연습에 사용할 이미지를 구하기도 쉽지 않다. 인터넷에서 찾은 이미지 크기 구별법을 질문을 받아 구별하는 법을 포스팅해본다. 구글 이미지를 검색한다. 마음에 드는 이미지를 클릭한다. 오른쪽에 생겨난 상세 이미지에 마우스를 갖다 대면 이렇게 왼쪽 밑에 이미지 크기가 뜬다. 가로 세로 순으로 가로 : 540px 세로 : 540px이다. 네이버 간단하게 검색하기에는 네이버가 국내 서비스로 잘 되어있다. 그러나 앞으로는 우리나라 사이트를 넘어, 해외 전문적 사이트에 접근하기 위해 구글에 더 친숙한 게 좋다. 이미지를 검색한다. 마음에 드는 이미지를 선택한다. 네이버는 마우스를 올리지 않아도, 사진의 밑을 보면 크기가 나와있다. 감성적 이미지 찾는 법 페이..

목차 Carousel이란 사전적 의미로는 회전목마로써 웹에서 이런 콘텐츠를 뜻한다. 회전하면서 콘텐츠를 보여주는 모습이 회전목마를 닮아 Carousel이라 부른다. React-Slick 라이브러리는 여러가지 있겠지만 이게 제일 깔끔하고 대중적인 것 같아 이걸 선택했다. Neostack The last react carousel you will ever need react-slick.neostack.com 대략 이런느낌인데, setting과 css 수정으로 자유도가 높다는 게 마음에 들었다. (setting에서 화면에 나열되는 콘텐츠 개수도 정할 수 있다) 설치방법 npm npm install react-slick yarn yarn add react-slick 다운로드를 했을 때 이 문장이 중요하다. 다운..

목차 서론 React가 프로젝트를 계속 최신버전으로 만들라고 한다. 4.0.1부터 계속 이러는거보니 version 4에서 획기적인 기능을 추가해서 좀 불안정해서 그런가 싶기도 하다. 그래서 새로 업그레이드 하는 김에 react 설치 , 프로젝트 만드는 방법도 포스팅 할려 한다. 기존의 방법으로 React 프로젝트가 생성되지 않을때 이 문단은 생성방법은 알고있는데, 에러때문에 생성안되는 사람들을 위한 구간이다. 새로 배우는사람들은 조금만 더 밑으로 내리자. 이렇게 뜰때 일단은 글에 적힌것과 같이 기존의 create-react-app을 제거해주자. npm uninstall -g create-react-app yarn global remove create-react-app 그러고 난 다음 밑에서 기술하는바와 ..

목차 오늘의 목표 오늘은 웹에 정보를 입력하는 input종류와 form에 대해서 포스팅해보자! input / form input input은 말 그대로 집어넣는다는 뜻으로 데이터를 집어 넣겠다 라는 뜻이다. 그런데 웹 개발자로서 중점을 두어야 하는 건, 정확한 정보를 얻는 것이다. 정확한 정보를 얻으면 정보를 정제하는 과정이 줄어들고, 줄어든 과정은 사용자에게 좀 더 빠르고 편한 서비스의 자원이 된다. 정확한 정보를 얻기 위해선 사용자에게 요구되는 정보를 올바른 형태로 적게 하는 것이 필요하다. 그렇기에 input의 올바른 type과 알맞은 속성을 쓰는 것이 중요하다. form form은 자신의 태그 안에 있는 input으로 얻은 데이터를 한 번에 다 옮기는 태그이다. ID: PW: 로그인 예를 통하면 ..

목차 확장 프로그램 확장 프로그램이란 보다 편리한 개발환경을 위해 추가적으로 설치할 수 있는 프로그램 설치방법 Visual Studio Code를 열어 좌측 중앙의 확장 프로그램 아이콘을 눌러준다 (단축키 Ctrl + Shift + X) 설치하고 싶은 프로그램을 검색한다 설치할 프로그램을 선택한다. 화면에 뜨는 프로그램 상세 내용을 통해 내가 원하는 프로그램이 맞는지 확인 후, 설치 버튼을 눌러 설치한다. 확장 프로그램을 적용시키기 위해 Visual Code를 다시 켜야 하는 프로그램도 있다는 걸 알아두자. (우측 하단에 알림 창이 뜬다.) 추천 확장 프로그램 가독성 향상 Bracket Pair Colorizer 괄호마다 다른 색을 입혀 구분하기 쉽게 해 준다. 주로 괄호를 열었다가 어디까지가 괄호 안인..

목차 git! 모든 것을 기록하는 시스템 git이란 우리가 작업하는 파일의 모든 변화를 기록하는 시스템이다. 여기서 모든 것이란 누가 언제 어떤 파일 어떤 부분을 어떻게 했는가 이다. (지운 것도 포함이다!!) 버전 관리(branch) git이 한 기록을 토대로 우리는 파일을 언제든지, 얼마든지 복구할 수 있다. 언제든지란 옛날 버전을 불러올 수도, 얼마든지란 권한을 가진 여러 개발자들이 같은 파일을 받아 각자 개발을 할 수 있다는 뜻!! 그리고 이렇게 나뉘는걸 나뭇가지와 닮았다는 뜻에서 branch라 한다. 또한 변화된 부분만을 적용시켜 분산된 버전을 합치는 것도 가능하다. github github란 git을 관리하는 클라우드 Git 저장소이다. 여기서 알아둘게 git을 다루는 프로그램은 github ..

목차 그림자의 효과 그림자는 웹디자인에서 입체감 / 깊이를 주는 아주 좋은 요소이다. (내가 정말정말정말 좋아하는 요소이다!!) 그림자 함수 box-shadow div{ box-shadow: 10px 5px 5px #aa96da; width: 100px; height: 100px; background : #a8d8ea; border-radius: 10px; } box-shadow 구조 div{ box-shadow: 200px 200px 10px 50px #aa96da; width: 100px; height: 100px; background : #a8d8ea; border-radius: 10px; } 가로 / 세로위치 첫번째 두번째 인자는 가로 / 세로위치를 뜻하며, 기본적 그림자 크기는 대상의 크기와 같..

목차 시작하기 전 이전에 아이콘을 쓰는 법을 포스팅 한 적 있는데 무료 icon 쓰기 / fontAwesome 이 포스팅의 목적은 fontAwesome이 설정에 따라 출력이 안 되는 걸 발견해서이지만, 나는 언제나 포스팅을 이 정보를 처음 접하는 사람이 본다 생각하고 쓰니 fontAwesome을 설명하고 나서 쓰겠다. 서 sirong.tistory.com React에서 그대로 쓰면 style 제한이 좀 있다. 그래서 React용 icon 쓰는 법을 새로 찾아 포스팅해본다. 설치방법 react-icons.github.io/react-icons React Icons React Icons Include popular icons in your React projects easily with react-icons..