본문 바로가기
[css] 반응형 유동적 너비에 따른 이미지 가운데 정렬 방법 반응형에 맞는 이미지 가운데 배치 방법입니다. 처음 화면에는 이미지나 컨텐츠가 가운데 정렬로 잘 되다가, 브라우저 너비를 늘리거나 줄였을 경우, 이미지 또는 컨텐츠가 가운데 유지가 안되거나 잘릴 경우가 많습니다. 부모 요소 혹은 요소에 css로 text-align: center 또는 margin: 0 auto 값을 주어도 브라우저가 유동적으로 움직임에 따라 요소가 가운데 유지가 안되는 한계를 가지고 있을 경우, 사용하는 정가운데에 배치하는 방법입니다. 가운데 배치 적용한 예 아래와 같이 브라우저 너비를 줄였을 경우에도 계속해서 이미지가 가운데 잘 배치되어있습니다. 처음 화면 브라우저 너비 줄였을 경우 화면 예제 코드 css 요소 가운데 정렬 구현 방법 left: 50%으로 브라우저의 절반만큼 왼쪽에서부터..
[js] 자바스크립트스와이퍼 슬라이드 라이브러리, swiper.js 사용법 swiper.js 를 이용하여 사이트에 슬라이드를 적용합니다. 보통 사이트 메인 페이지의 네비게이션 아래 컨텐츠 부분에는 비주얼 슬라이드가 위치합니다. 홈페이지에 처음 들어갔을 때 가장 먼저 눈에 띄는 곳으로 사이트의 첫인상을 좌우하는 가장 중요한 부분입니다. 이 슬라이드는 스와이퍼라는 자바스크립트 라이브러리 사용을 추천합니다. 스와이프 이동, 버튼 이동, 화살표 이동, 자동 플레이, 루프, 반응형의 기능을 캐러셀 슬라이드에 적용이 모두 가능한 라이브러리입니다. swiper.js 사이트 구글에서 swiper js를 검색하여 사이트로 이동합니다. https://swiperjs.com/ Swiper - The Most Modern Mobile Touch Slider Swiper is the most mode..
[css] 레이아웃 position 배치 사용법(ft. css 포지셔닝) css 레이아웃의 방법, positon 입니다. position position 속성은 요소들을 자유자재로 배치해 주는 속성으로, 이를 이용하면 텍스트나 이미지를 나란히 배치할 수 있고, 가로나 세로로 원하는 위치에 배치할 수도 있습니다. 레이아웃 시, 주로 컨텐츠를 서로 겹치게 배열하거나 마크업 순서와 화면상 배치 순서가 다를 경우에 사용합니다. position 값 static: 오소를 이동하거나 겹칠 수 없는 원래 그대로의 상태로 요소를 문서의 흐름에 맞추어 배치합니다. relative: relative로 지정된 요소는 left와 top 속성으로 이동할 수 있으며, absolute로 지정된 요소의 부모 역할(깃발)을 합니다. absolute: 다른 요소와 겹칠 수 있고, left와 top 속성을 이용..
[js] 자바스크립트 애니메이션 라이브러리, gsap 사용법 JS 애니메이션 스크립트 라이브러리, gsap의 사용법입니다. 일반적으로 웹에서 애니메이션 효과는 css 또는 제이쿼리를 사용하여 구현합니다. 하지만 최근에는 제이쿼리 보다는 순수 자바스크립트 코드를 사용하는 추세이고, css에서 제공하는 것, 그 이상의 복잡한 애니메이션을 구현해야할 경우가 있습니다. 예를 들어, css의 dispaly 요소에 none과 block을 이용한 효과를 주었을 때, 영역이 나타나고, 사라지는 부분이 부자연스러울 경우, 이를 해결하기 위해 보다 자연스럽게 요소를 제어해주는 자바스크립트 애니메이션 라이브러리를 사용합니다. 라이브러리를 사용하면, 자바스크립트를 통해 html 요소에 간단한 애니메이션을 추가할 수 있습니다. GSAP GSAP는 GreenSock에서 만든 자바스크립트 ..
[css] position으로 가운데 배치, 정렬 css로 가운데로 정렬하는 방법입니다. 수직 가운데 정렬 부모 요소 클래스 이름 {position: relative;} 자식 요소 클래스 이름 { height: 특정 사이즈 px 지정; position: absolute; top: 0; bottom: 0; margin: auto 0; } 수평 가운데 정렬 부모 요소 클래스 이름 {position: relative;} 자식 요소 클래스 이름 { width: 특정 사이즈 px 지정; position: absolute; left: 0; right: 0; margin: 0 auto; } 수직, 수평 가운데 정렬 부모 요소 클래스 이름 {position: relative;} 자식 요소 클래스 이름 { width: 특정 사이즈 px 지정; height: 특정 사이즈..
[css] 구글 메터리얼 아이콘 사용 방법(ft. 무료 아이콘 제공 사이트) google material icons을 사이트에 설치, 적용하는 방법입니다. 웹사이트 개발할 때 퍼블리싱, 프론트 개발 시점에 꼭 사용되는 것이, 아이콘입니다. 특히 자주 사용하는 icon은 검색에 사용되는 돋보기, 위치 표시의 place, 이미지, 화살표 등입니다. 이런 아이콘들은 현업에서 매번 디자이너에게 요청할 수 없고, 혹은 디자이너가 없을 때 알아서 찾아 작업해야하는 경우가 있습니다. 이렇게 아이콘 적용이 필요할때 추천하는 사이트가 있는데요. 바로, 구글에서 제공하는 google material icons입니다. 구글 메터리얼 아이콘 사이트를 통하여 설치하고, 사이트에 적용하는 방법을 알아보겠습니다. google material icons 검색 구글에서 google material icons을..
[css] 구글 폰트 사용법 (ft. google fonts, 무료 웹폰트 적용) 웹사이트 구글 폰트 적용법을 알아보겠습니다. 구글 폰트 사이트 이동 구글에서 google fonts 또는 구글 폰트를 검색하여, 해당 사이트로 이동합니다. 태그 방식 원하는 폰트 선택 여기서 사용할 폰트와 폰트 사이즈를 선택합니다. Noto Sans KR 폰트를 적용하여, 해당 페이지로 이동한 후 원하는 사이즈 Regular 400과 Bold 700을 선택하면, 오른쪽 바에 해당 정보가 나옵니다. 아래 메뉴에서 태그 부분와 font-family 복사합니다. 사이트에 구글 폰트 적용 웹에디터에서 복사한 태그 코드를 태그 사이에 붙여넣기 합니다. style sheet 또는 태그 사이에 복사한 font-family 코드를 붙여 넣기 합니다. 아래와 같이 로컬 서버를 띄워서 개발자 도구를 통하여 적용이 잘 된 ..
[css] reset css cdn 설치(ft. 기본 css style 세팅) reset css cdn 설치 방법을 알아보겠습니다 . 브라우저의 기본 style을 초기화하기 위하여, reset css를 설치합니다. reset css cdn 검색 구글에서 reset css cdn 검색 reset-css CDN by jsDelivr - A CDN for npm and GitHub 사이트 이동 중간에 보이는 /npm/reset-css@5.0.1/reset.min.css 의 클릭 후 Copy HTML 선택하여 내용 copy css cdn 코드 삽입 vs code와 같은 코드 편집기로 이동하여 index.html 파일에서 복사한 코드를 link 태그로 추가하면 이제 브라우저에서 제공하는 기본적인 style이 이렇게 초기화 완료됩니다.
[css] block, inline의 뜻과 사용법(ft. display, inline-block) CSS, display의 block과 inline의 개념과 사용법에 대하여 알아보겠습니다. display display 속성이란 화면을 배치하는 방법입니다. display 종류 none | contents | block | inline | inline-block | table | table-cell block과 inline 요소의 개념을 잡는 것은 html 마크업 요소에서 가장 중요하다고 할 수 있습니다. 그래서 이번 기회에 확실하게 짚고 넘어가겠습니다. 이 두 가지의 요소에 따라 전체 레이아웃이 변합니다. block 요소 block 요소는 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지합니다. 즉, 해당 요소의 너비가 100%라는 의미입니다. 따라서 그 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수..
[js] 글자 타이핑 효과 라이브러리 소개 타이핑 효과를 주는 라이브러리를 소개합니다. 실무에서 텍스트에 타이핑하는 디자인 효과를 주고 싶을 때가 있습니다. 보통 css로 효과를 주기 하는데 부자연스러운 편입니다. css 대신 라이브러리를 이용하면 보다 간편한 소스로 자연스러운 타이핑 효과를 나타낼 수 있습니다. 타이핑 효과 사이트 https://libraries.io/npm/typewriter-effect typewriter-effect on NPM [![CircleCI](https://circleci.com/gh/tameemsafi/typewriterjs.svg?style=svg)](https://circleci.com/gh/tameemsafi/typewriterjs) libraries.io 설치 방법 cdn NPM npm install ty..
thailwind css 스타일 프레임워크 (ft. 무료 컴포넌트 사이트 제공) tailwind css 무료 사이트 리스트입니다. 실무에서 tailwind를 스타일 프레임워크를 사용하고 있는데, kit 패키지를 구매하지 않고, 무료 배포된 정보를 구글링하여 찾으면서 구현하다 보니 tailwind의 정보가 많아져서 공유하도록 하겠습니다. thailwind cheatsheet 요약표 한 페이지에 모든 클래스이름 정리표입니다. 작업시에 가장 우선적으로 띄워놓는 사이트입니다. umeshmk.github.io/Tailwindcss-cheatsheet/ Tailwindcss-cheatsheet umeshmk.github.io 위의 사이트 보다 더 디테일 한 요약표입니다. 위에 찾는것이 없을 경우, 아래 사이트를 이용합니다. nerdcave.com/tailwind-cheat-sheet Tailw..
[react] 리액트 삼항 연산자 조건부 스타일링(ft. tailwind, className) react에서 조건에 따른 스타일링하는 방법입니다. 스타일링은 tailwind라는 리액트 CSS 프레임 워크를 사용하여 디자인 합니다. 조건에 따라 className의 내용에 변화를 주어 다른 스타일을 주는 방법입니다. onClick 이벤트에서 클릭할때마다 state 값을 true, false를 적용시켜, className 내에 삼항 연산자를 사용합니다. 이로 toggle 기능과 같이 on/off switch의 개념으로 스위치를 켰다, 껐다 하는 효과를 나타낼 수 있습니다. 화면구현 모바일, 태블릿 또는 어플리케이션에서 자주 쓰이는 네비게이션(햄버거 메뉴바) 메뉴를 조건부 style 로 구현합니다. 조건부 스타일 예제 import React, { useState } from "react"; const I..
[react] react 상태관리 context API, useContext 사용법 react에서 context API가 필요한 이유와 사용하는 방법에 대하여 알아보겠습니다. Context API가 필요한 이유 기존에 최상위 컴포넌트에서 여러 레벨을 거쳐 props로 원하는 상태와 함수를 전달 하였지만, context API를 이용하면 단 한번에 원하는 값을 전달하여 사용할 수 있습니다. 복잡한 redux 또는 MobX와 같은 상태 관리 라이브러리를 사용할 필요 없이 context API를 통하여 전역 상태를 손쉽게 관리 할 수 있습니다. Context API가 사용법 createContext() 함수를 사용하여 Context 만들기 src 디렉터리에 contexts 디렉터리를 만든뒤 그 안에 새로 Store 파일을 만들거나, 최상위 컴포넌트에 바로 입력하여도 됩니다. context의 ..
[react] react-router-dom 설치, 라우팅하기 react-router-dom 설치하는 방법을 알아보겠습니다. routing ・ 다른 주소에 다른 화면을 보여 주는 것을 라우팅이라고 합니다. ・ 리액트 자체에 이 기능이 내장되어 있지 않기 때문에 라이브러리를 사용하여 이 작업을 진행합니다. ・ 리액트 라우팅 라이브러리는 react-router, reach-router, Next.js 등이 있고, 가장 많이 사용하는 것은 react-router입니다. react-router-dom ・ react의 내비게이션 라이브러리입니다. ・ React Router를 사용하면 앱에서 발생하는 라우팅이 location나 history와 같은 브라우저 내장 API와 완벽하게 연동이 됩니다. react-router-dom 설치 React Router는 웹과 앱용이 있습니다..
[react] react로 api 이용하여 뉴스 사이트 만들기 newsapi에서 제공하는 API를 사용하여 최신 뉴스를 불러와 블로그 형태의 뉴스 사이트를 만들겠습니다. 예제는 길벗의 리액트를 다루는 기술을 보면서 공부한 예제입니다. 화면 결과 axios로 뉴스 api 호출 준비(ft. promise) 아래의 사이트에 회원 가입 후에 받은 각자의 API 키를 이용하여 데이터에 접근할 수 있습니다. https://newsapi.org/ News API – Search News and Blog Articles on the Web Get JSON search results for global news articles in real-time with our free News API. newsapi.org 발급받은 API 키를 가지고 나중에 API를 요청할 때 API 주소의..
[react] react로 axios로 API 호출 (ft. promise, hooks) API에 대한 간단한 설명과 axios로 API를 호출한 예제를 살펴보겠습니다. axios axios는 현재 가장 많이 사용되고 있는 자바스크립트 HTTP 클라이언트로서 HTTP 요청을 promise 기반으로 처리합니다. axios 설치 npm install axios //또는 yarn add axios API 구글링을 할때 나오는 API에 대한 정의는 사실 개발자인 저도 무슨 말인지 이해하기 어렵습니다. 그래서 좀더 쉬운 풀이를 찾아보았습니다. 예제 free fake API인 jsonplaceholder.typicode.com 를 이용한 예제입니다. 아래의 주소를 입력하면 JSON 형식의 data가 나옵니다. 이 data를 axios를 통해 웹에서 출력해보겠습니다. promise 방식 app.js im..
[react] react로 지뢰찾기 게임 만들기 ver.2 리액트로 구현한 지뢰찾기 게임(ver.2) 입니다. - 지뢰판 세팅 - 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 순수 자바스크립트로 만든 지뢰찾기 게임은 아래 포스트로 이동해주세요. https://goddino.tistory.com/107 [js] 자바스크립트로 지뢰찾기 게임 구현하기 자바스크립트를 이용하여, 지뢰찾기 게임을 구현하는 예제입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 순서도 기능 REMARK 실행 버튼 클릭 후 지뢰 goddino.tistory.com react로 구현한 지뢰찾기 게임 ver.1은 아래 포스트로 이동해주세요. https://goddino.tistory.com/156 [js] react로 지뢰찾기 게임 ..
[react] react로 지뢰찾기 게임 만들기 ver.1(ft. context API, useReducer) 리액트로 구현한 지뢰찾기 게임(ver.1) 입니다. - 지뢰판 세팅 - 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 순수 자바스크립트로 만든 지뢰찾기 게임은 아래 포스트로 이동해주세요. https://goddino.tistory.com/107 [js] 자바스크립트로 지뢰찾기 게임 구현하기 자바스크립트를 이용하여, 지뢰찾기 게임을 구현하는 예제입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 순서도 기능 REMARK 실행 버튼 클릭 후 지뢰 goddino.tistory.com 구현내용 · useReduer, context API 이용하여 지뢰칸 세팅 · 마우스 오른쪽 클릭하여 로직 작성하기 컴포넌트 구조 MineSearch.jsx >Form...
[react] 리액트 테이블 게시판 만들기 ver.2 (데이터 추가, 수정, 저장, hooks, form) 구현내용 · npm package: creat-react-app · css 라이브러리: tailwind · axios를 통한 서버 통신 · 테이블 형식의 게시판 구현 · 데이터 추가/수정/삭제 기능 추가 · 모달 팝업창 오픈 구현 화면 이전 시간에 이어서 폼을 삽입하여 새로운 데이터를 추가하고, 수정 버튼을 클릭하면 모달창을 띄워서 해당 데이트를 바로 수정하고, 저장하는 기능을 알아보겠습니다. 데이터 추가하기 onChange, onSubmit, spead 연산자/concat Form, input 태그를 사용하여 만들었고, input에 name, value, onChange 속성을 만들어 onChange 이벤트로 입력할때 마다 각각의 name 속성에 value 값을 넣어줍니다. Post.js (하위1 컴포..
[react] 리액트 테이블 게시판 만들기 ver.1 (axios, useEffect, 글삭제) 구현내용 · npm package: creat-react-app · css 라이브러리: tailwind · axios를 통한 서버 통신 · 테이블 형식의 게시판 구현 · 데이터 추가/수정/삭제 기능 추가 · 모달 팝업창 오픈 구현 화면 프로젝트 폴더 설치 npm 패키지 설정 npm create react-app 폴더이름 //폴더 생성 cd 폴더이름 //해당 폴더로 접근 npm start //local 서버 띄우기 처음에 어설픈 기억력으로 npm install create-react-app으로 계속 입력하다가 시간을 버린 기억이 있습니다. ㅠㅜ 구글링하면 될 것을…. 아무튼 npm start 로 local 서버를 띄웁니다. tailwind 설치 tailwind를 설치하여 간편하게 css를 적용하겠습니다. ..
[react] react의 useReducer 사용법 useReducer state가 많을 경우, state를 하나로 묶어주는 역할을 합니다. useReducer 사용 방법 state 값과 dispatch 함수를 받아오게 되는데, 여기서 state 는 현재 가르키고 있는 상태고, dispatch 는 액션을 발생시키는 함수입니다. dispatch(action) 함수 안에 파라미터로 액션 값을 넣으면 리듀서 함수가 호출되는 구조입니다. state를 바꾸기 위해 action을 만들고, 이벤트를 통해 action을 dispatch하여 reducer 함수의 action을 불러와 state 값을 변경합니다. useReducer 문법 //state 초기값 세팅 const initialState = { winner: ' ', } //export로 모듈화, 변수로 지정, ..
[react] react로 틱택토 게임 만들기(ft. useReducer) 리액트 hooks로 구현한 틱택토 게임 입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 순수 자바스크립트로 만든 로또 게임은 아래 포스트로 이동해주세요. https://goddino.tistory.com/102 [js] 자바스크립트로 틱택토 구현하기 자바스크립트를 이용하여, 틱택토(Tic Tac Toe) 게임을 구현하는 예제입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 순서도 css 코드 순수 자바스크립트 코드 goddino.tistory.com https://goddino.tistory.com/113 [js] 자바스크립트로 틱택토(심화버전) 구현하기 이전 포스팅에서 구현했던 틱택토 게임에서 업그레이드된 심화 과정입니다. 예제는 인..
[js] react로 로또 게임 만들기 리액트 class/hooks로 구현한 로또 게임 입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 순수 자바스크립트로 만든 로또 게임은 아래 포스트로 이동해주세요. https://goddino.tistory.com/103 [js] 자바스크립트로 로또추첨기 구현하기 자바스크립트를 이용하여, 로또 추첨기를 구현하는 예제입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 구현 순서 번호 순서 사용 메서드 1 45개의 후보 goddino.tistory.com client.jsx import React from 'react'; import ReactDom from 'react-dom'; import Lotto from './Lotto'; React..
[react] react로 가위바위보 게임 만들기 리액트 class/hooks로 구현한 가위바위보 게임 입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. client.jsx import React from 'react'; import ReactDom from 'react-dom'; import RSP from './RSP'; ReactDom.render(, document.querySelector('#root')); index.html RSP.jsx - class 방식(before 리팩토링) import React, { Component } from 'react'; //클래스 경우 -> constructor -> render -> ref -> componentDidMount // -> (setState/props 바뀔때..
[react] react로 반응속도 테스트 게임 만들기(ft. useRef, 조건문, spread 연산자) 리액트 class/hooks로 구현한 반응속도 테스트 게임 입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. client.jsx import React from 'react'; import ReactDom from 'react-dom'; import ResponseCheck from './ResponseCheck'; ReactDom.render(, document.querySelector('#root')); index.html ResponseCheck.jsx - class 방식 import React, { Component } from 'react'; class ResponseCheck extends Component { state = { screenState: 'wai..
[react] 리액트 끝말잇기 게임 만들기(ft. 컴포넌트 구조) 리액트 class/hooks로 구현한 숫자야구 게임 입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 구현 순서 순서 특이사항 컴퓨터가 랜덤 4자리 숫자 문제 제출 예시) 4385, 조건)겹치지 않는 4개 사용자가 답을 입력 입력한 답의 결과 발표 결과 발표: 홈런/스트라이크/볼 홈런) 숫자가 모두 일치할 경우 스트라이크) 자리수가 맞을 경우 볼) 자리수는 맞이 않으나, 숫자가 맞을 경우 답이 맞을때까지 10회 제한을 둠 파일 구조 client.jsx >NumberBaseball.jsx >Try.jsx client.jsx import React from 'react'; import ReactDom from 'react-dom'; import NumberBaseball f..
[react] 리액트로 끝말잇기 게임 만들기 리액트 class/hooks로 구현한 끝말잇기 게임 입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. client.jsx const React = require('react'); const ReactDom = require('react-dom'); const WordRelay = require('./WordRelay') ReactDom.render(, document.querySelector('#root')); WordRelay.jsx - class 방식 클래스 메소드를 무조건 화살표 함수의 문법을 사용합니다. const React = require('react'); class WordRelay extends React.Component { state = { word: ..
[react] 리액트 컴포넌트 props로 데이터 전달 리액트에서 컴포넌트간 데이터 전달 방법, props에 대하여 알아보겠습니다. props 부모컴포넌트에서 자식 컴포넌트로 데이터 전달 방식입니다. props 사용방법 //컴포넌트 태그내 예제1. 반복문을 컴포넌트 분리 class 방식 태그의 반복되는 부분을 컴포넌트로 만듭니다. props를 이용하여 데이터를 전달합니다. 부모 컴포넌트 import React, { Component } from 'react'; import Fruit from './Fruit'; class Map extends Component { state = { fruits: [ {fruit: '🍉', color: 'green' }, {fruit: '🍓', color: 'red' }, {fruit: '🍊', color: 'orange' }..
반응형

티스토리툴바