본문 바로가기

전체 글85

[react] 리액트 react-router-dom 사용법 - BrowserRouter, Route, Switch, Link react-router-dom SPA(Single Page Application)의 경우 페이지 렌더링에 필요한 모든 자바스크립트가 초기에 브라우저에게 전달되기 때문에 페이지(혹은 탭) 간 이동 시 원칙적으로는 서버에 재요청을 할 필요가 없습니다. 따라서 SPA에서 다른 페이지로 이동할 때에 태그를 사용하는 것은 서버에 불필요한 요청을 보내는 안티패턴에 해당됩니다. react-router-dom을 사용하면 이런 상황에서 브라우저에 이미 로드되어 있는 코드들을 활용하여 페이지간 이동을 구현할 수 있습니다. react-router-dom은 리액트에서 SPA를 구현할 때 가장 많이 쓰이는 패키지 중 하나입니다. 기본적으로 웹페이지는 내부에서 URL을 요청할 때 페이지 전체를 서버에 재요청한 후 새로고침합니다... 2019. 8. 27.
[HTML, CSS] input, textarea의 placeholder에 스타일 작업하는 방법(색상 등) ::placeholder 가상 요소 ::placeholder를 사용하여 input과 textarea 태그의 placeholder에 스타일을 적용할 수 있습니다(간단 주의). 방법은 모두 동일하니 input 태그를 예시로 살펴보겠습니다. input 태그가 있습니다. HTML 삽입 미리보기할 수 없는 소스 email-input 클래스의 ::placeholder 요소를 설정합니다. HTML 삽입 미리보기할 수 없는 소스 감사합니다. 2019. 8. 23.
[HTML, CSS] 아이콘 추가하는 방법 - fontawesome 사용법 HTML에서 fontawesome 아이콘을 사용하는 방법입니다.(V5) fontawesome에서 제공하는 CDN를 활용하면 쉽고 빠르게 아이콘을 사용할 수 있습니다. 1. head 태그에 아래 script를 추가합니다. 2. fontawesome 사이트에 접속합니다. https://fontawesome.com/ Font Awesome The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome. fontawesome.com 3. 좌측상단의 검색창에서 원하는 아이콘의 키워드를 검색합니다. 4. 검색된 아이콘을 클릭한 후 태그.. 2019. 8. 22.
[HTML, CSS] 스크롤바 스타일(디자인)하는 방법 - webkit-scrollbar Scrollbar 스크롤바 디자인 스크롤바 스타일에 관한 웹표준은 존재하지 않습니다. 스크롤의 동작은 overflow와 같은 css 속성을 사용하여 간단히 제어할 수 있지만, 스타일의 경우에는 과거엔 불가능했습니다. 스크롤이 다른 HTML 요소들처럼 태그로 존재하지 않기 때문입니다. 당연히 W3C(World Wide Web Consortium) spec에서도 스크롤바 스타일에 관한 명확한 규정은 찾아볼 수 없습니다. 그러나 각 브라우저에서 스크롤과 관련된 가상요소를 만들어내면서 이제는 간단한 css만으로도 스크롤바 스타일이 가능하게 되었습니다. 이 글에서는 webkit 브라우저(크롬, 사파리, 오페라 등)에서 유효한 css 가상요소를 사용해서 스크롤바를 디자인하는 방법에 대해서 살펴보겠습니다. 스크롤바의.. 2019. 8. 20.
[HTML, CSS] 내용이 요소(div 등)를 벗어날 때 스크롤 적용하는 방법 - overflow CSS overflow HTML에서 요소 안의 내용이 요소를 벗어났을 때 스크롤을 생성하는 방법입니다. 다음과 같이 width와 height가 고정되지 않은 div 안에 텍스트가 있습니다. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reiciendis nam, nostrum sed vitae corporis quis quia deleniti quod doloremque consequuntur eius magni consectetur earum doloribus. Sapiente voluptas rem dignissimos repellat?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Bl.. 2019. 8. 18.
[HTML, JAVASCRIPT, CSS] 마우스 오버 시 HTML 요소(이미지, div 등) 확대(zoomIn) 하는 방법. 옆에 요소 안밀려나게/밀려나게 HTML에서 마우스 오버 시 요소를 확대, 축소하는 방법입니다. 확대, 축소는 아래와 같이 자바스크립트로 CSS를 직접 제어하여 구현할 수도 있지만 function zoomIn(event) { event.target.style.width = "600px"; } 이 작업은 CSS class의 변경만으로도 구현이 가능한 작업이기 때문에 위와 같이 JAVASCRIPT로 style을 직접 제어하지는 않겠습니다. 자바스크립트로 style을 직접 제어하게 되면 요소에 인라인 스타일이 적용되는데, 이후의 코드 관리와 확장성에 부정적인 영향을 끼치는 경우가 많습니다. 예를 들면 inline 스타일은 요소에 적용되는 여러 가지 스타일 중에서 가장 우선순위가 높기 때문에, 이후에 다른 class로 스타일을 적용했을 때 특.. 2019. 8. 18.
[HTML, JAVASCRIPT] fetch를 사용하여 데이터 요청 후 화면에 적용하는 방법 ajax fetch를 활용하여 프론트엔드에서 데이터 요청 후 화면에 적용하기 ajax는 Asynchronous JavaScript And XML의 약자로 HTTP 통신을 통해 비동기적으로 JSON(자바스크립트 객체)과 XML 데이터를 받아오는 기능을 말합니다. 현재 XML은 거의 쓰이지 않으니 예시에서는 JSON을 사용하겠습니다. ajax로 가져온 데이터는 DOM에 바로 적용하기 때문에 페이지를 다시 로드하지 않습니다. 예시 fetch API를 사용해서 ajax 통신으로 가져온 유저정보를 화면에 출력하는 기능을 구현해 보겠습니다. 다음과 같이 버튼과 div가 하나씩 있고, div의 id는 userInfo입니다. 클릭 버튼의 onclick 속성에 콜백함수를 설정합니다. 클릭 getUser라는 함수를 달아주었습니다... 2019. 8. 17.
[HTML, CSS] div 자식요소 가운데 정렬하는 방법 - margin, text-align, flexbox HTML div 요소의 자식요소를 가운데 정렬하는 방법 HTML에서 자식요소를 가운데 정렬하는 3가지 방법입니다. 각 속성은 레이아웃에 따라 다르게 적용되니 상황에 맞는 방법을 활용해 보세요. margin text-align flexbox 부모 div(outer)와 자식 div(inner)가 있습니다. HTML 삽입 미리보기할 수 없는 소스 1. margin 수평 가운데정렬을 위한 가장 간단한 방법입니다. margin 속성으로 요소의 상하좌우 여백을 지정하면서 요소를 정렬할 수 있습니다. 구문 - 전달하는 인자의 개수에 각각 다음과 같이 적용됩니다. /* 네 면 모두 적용 */ margin: 1em; margin: -3px; /* 세로방향 | 가로방향 */ margin: 5% auto; /* 위 | 가로.. 2019. 8. 14.
[HTML] video 태그로 동영상 플레이어 만드는 방법 웹 페이지에 동영상 플레이어 만들기 HTML의 태그를 사용하면 간편하게 웹 페이지에 동영상 플레이어를 구현할 수 있습니다. 이 포스팅에서는 태그의 기본 사용법을 알아보겠습니다. 주요 속성 src 동영상 파일의 경로를 지정합니다. poster 동영상이 로드되기 전에 표시될 이미지를 설정합니다. controls 표준 동영상 제어 버튼(재생, 일시정지, 볼륨 등)을 표시합니다. autoplay 페이지 로드 시 동영상이 자동으로 재생되도록 설정합니다 loop 동영상을 반복 재생합니다. muted 동영상의 음소거 여부를 설정합니다. 1. src src 속성에 파일의 경로를, width와 height 속성에 크기를 지정하였습니다. 동영상이 페이지에 나타났습니다. 초기화면은 동영상의 맨 처음 프레임입니다. 2. po.. 2019. 8. 14.
[HTML, CSS] opacity로 요소, 배경화면 투명하게(흐리게)하는 방법, 자식 요소에 같이 적용되는 문제 HTML 요소의 배경화면 투명하게 만드는 방법 CSS의 opacity를 활용하여 HTML 요소를 투명하게 만드는 방법, 특히 자식 요소는 제외하고 배경화면만 투명하게 만드는 방법에 대해서 살펴보겠습니다. div와 그 자식 요소 h1입니다. Hello 배경화면을 흐리게 하기 위해 opacity를 적용하겠습니다. opacity는 0~1 사이의 값으로 설정할 수 있습니다. 기본값은 1이고 0으로 갈수록 투명해집니다. .container { width: 100%; height: 100%; text-align: center; background: url("./images/sunrise.jpg"); opacity: 0.5; } opacity를 0.5로 적용했습니다. 단순히 투명도를 조절할 때에는 이처럼 간단히 해결.. 2019. 8. 14.
[HTML, CSS] div 요소를 전체화면으로 설정하기, 끝부분 적용안되는 문제, css reset HTML에서 최상위 div를 화면 전체로 설정하는 방법 1. % 사용 width와 height를 100%로 설정하면 전체화면이 될 것만 같습니다만, 그렇지 않습니다. %는 부모 요소 길이의 몇%를 차지할 것인지 나타내기 때문에 먼저는 부모 요소의 길이가 설정되어 있어야 합니다. 즉, 다음과 같이 해당 요소만 100%로 설정해서는 전체화면이 되지 않습니다. Hello container의 부모 요소인 body와 html의 width, height를 지정해줘야 합니다. Hello 2. vw(viewport width), vh(viewport height) 사용 %가 부모 요소의 길이를 기준으로 계산된다면, vw, vh는 뷰포트의 길이를 기준으로 계산됩니다. 각각 뷰포트 가로길이의 몇% 인지와 세로길이의 몇% .. 2019. 8. 12.
[HTML] 이미지에 링크거는 방법 - <a>, href, <img> HTML 이미지에 링크 HTML에서 img태그에 링크를 다는 방법입니다. 태그로 태그를 감싸주면 됩니다. href 속성에는 이동할 주소를 적습니다. 이미지를 클릭하면 해당 주소(https://google.com)로 이동합니다. a태그의 target 프로퍼티를 '_blank'로 설정하면 웹페이지가 새 창에서 뜹니다. 2019. 8. 10.
[HTML, CSS] div 요소를 동그랗게 만드는 방법 - border radius border-radius css의 border-radius 속성을 사용해서 기본 사각형인 요소들의 모서리의 형태를 바꿀 수 있습니다. div 뿐만이 아니라 border가 있는 다른 html 요소들에도 적용이 가능합니다. border-radius 적용 전의 div입니다. border-radius 속성으로 4개의 모서리 부분을 동그랗게 만들 수 있습니다. border-radius: top-left top-right bottom-right bottom-left 위/왼쪽, 위/오른쪽, 아래/오른쪽, 아래/왼쪽 (시계방향) 순서대로 각 모서리의 반지름의 길이를 전달합니다. 4방향의 값이 모두 동일하다면 한 개만 전달하면 됩니다. px뿐만 아니라 %나 em단위로도 설정할 수 있습니다. border-radius: 3.. 2019. 8. 10.
[HTML, CSS] 마우스 커서 올릴 때 (오버) 효과주는 방법 - hover 1. hover CSS의 :hover 선택자를 사용해서 마우스를 요소 위에 올렸을 때 적용되는 스타일을 정의합니다. :hover는 링크, 버튼, 이미지 등 다양한 요소에 사용할 수 있습니다. 예시 hover 효과를 적용할 금색 div입니다. HTML 삽입 미리보기할 수 없는 소스 해당 요소의 style 클래스에 :hover를 추가합니다. .container { width: 200px; height: 200px; background: gold; } .container:hover { background: silver; } 이제 마우스 커서를 올리면 백그라운드 색상이 silver로 변합니다. (직접 마우스를 올려보세요) HTML 삽입 미리보기할 수 없는 소스 여러 가지 효과를 동시에 줄 수도 있습니다. .co.. 2019. 8. 10.
[JAVASCRIPT] 배열 필터링하는 방법(걸러내기) - filter filter 자바스크립트 배열의 filter 메소드를 활용해서 요소를 필터링하는 방법입니다. 구문 result = arr.filter(callbackFn) 배열의 모든 요소를 순회하면서 콜백 함수(callbackFn)의 인자로 전달합니다. 콜백 함수가 true를 반환하면 요소가 유지되고 false를 반환하면 요소를 버립니다. 배열 arr const arr = [ 1, 2, 3, 4, 5]; arr를 필터링하여 arr2를 생성하겠습니다. const arr = [1, 2, 3, 4, 5]; console.log(arr); // [1, 2, 3, 4, 5] const arr2 = arr.filter(number => true); console.log(arr2); // [1, 2, 3, 4, 5] 배열의 요소에.. 2019. 8. 10.
[HTML, CSS] div 태그에 배경화면 지정하는 방법 div 배경화면 지정하는 법 다음과 같이 화면 전체를 차지하는 div가 있습니다. 현재는 div가 비어있는 상태입니다. 이곳에 배경화면을 지정해 보겠습니다. 이미지는 프로젝트 폴더 내부의 파일을 사용합니다. div의 background 속성으로 이미지를 전달합니다. 이미지는 url(이미지 경로) 형식으로 불러올 수 있습니다. 나머지는 동일하므로 실행결과 배경화면이 적용되었지만 shanghai.jpg 원본과 비교해 보면 아래쪽이 잘렸습니다. 원본 background-position 속성과 background-size 속성을 이용해서 고쳐줍니다. 이미지가 div의 가로, 세로를 모두 차지하며 정중앙에 위치하도록 설정하였습니다. 2019. 8. 9.
[HTML, JAVASCRIPT] 버튼 클릭 시 이미지를 변경하는 방법 HTML 이미지 동적으로 변경하는 방법(버튼 클릭) 이미지와 버튼이 있습니다. toggle 프로젝트 구조 루트에는 index.html 파일과 함께 이미지 폴더 내부에 두 개의 이미지가 있습니다. button을 클릭하면 현재 eiffel.jpg로 설정되어 있는 이미지가 rose.jpg로 바뀌도록 구현해보겠습니다. 1. 함수 생성 먼저 이미지를 바꾸는 기능을 수행하는 함수를 생성합니다. 자바스크립트 함수이므로 toggleImg() 함수를 생성했습니다. getElementById로 img태그를 가져온 후 src 속성을 바꿔주는 함수입니다. 2. 이벤트 핸들러 다음으로 button의 onclick 이벤트 핸들러에 toggleImg() 함수를 전달해 주면 됩니다. toggle 이제 button을 클릭하면 togg.. 2019. 8. 9.
[HTML, JAVASCRIPT] 브라우저에서 확인창, 경고창 띄우는 법 - confirm confirm 브라우저 창에서 확인창, 경고창 띄우기 구문 result = window.confirm(message); message 확인창에 띄울 문구 result 사용자가 '확인'을 누르면 true / '취소'를 누르면 false 예시 버튼을 클릭하면 배경화면의 색상을 바꾸는 예시입니다. confirm 변경 아직은 '확인'이나 '취소'를 눌러도 모달창이 닫힐 뿐 아무 일도 일어나지 않습니다. 다음으로 '확인'을 눌렀을 때와 '취소'를 눌렀을 때의 상황을 조건문을 이용해서 구현합니다. confirm 변경 이제 '확인'을 누르면 true를 반환하므로 색상이 바뀌고, '취소'를 누르면 false를 반환하므로 콘솔창에 메시지를 출력합니다. MDN document - Window.confirm() Window.. 2019. 8. 8.
[JAVASCRIPT] 배열 정렬하는 방법(숫자 오름차순/내림차순, 임의정렬) - sort sort 자바스크립트 배열 메소드 sort를 활용하여 요소를 정렬하는 방법입니다. 구문 arr.sort([compareFunction]); 원본 배열입니다. const arr = [5, 100, 20]; 비교함수를 전달하지 않을 때에는 숫자의 크기에 관계없이 문자열로 변환된 후 Unicode를 기준으로 정렬합니다. const arr = [5, 100, 20]; console.log(arr); // [5, 100, 20] arr.sort(); console.log(arr); // [100, 20, 5] 숫자가 문자열로 변환되어서 비교되기 때문에 숫자의 크기에 관계없이 1로 시작하는 100이 2로 시작하는 20보다 앞에 나옵니다. 숫자의 크기에 따라 정렬하기 위해서는 비교함수를 전달해야 합니다. 오름차순 정.. 2019. 8. 7.
[JAVASCRIPT] 배열에 요소 추가하는 방법 - push, unshift push / unshift 자바스크립트에서 기존 배열에 새로운 요소를 추가하는 방법입니다. 1. push 배열의 맨 뒤에 요소를 추가합니다. 추가한 요소를 포함한 배열의 길이를 반환합니다. 구문에 보이듯이 여러 개의 요소를 한 번에 추가할 수도 있습니다. arr.push(element1[, ...[, elementN]]) const color = ["red", "white"]; console.log(color); // ["red", "white"] color.push("black"); console.log(color); // ["red", "white", "black"] color.push("sky", "pink"); console.log(color); // ["red", "white", "black",.. 2019. 8. 7.
[JAVASCRIPT] 날짜 확인하기 Date 객체 사용 방법 Date 자바스크립트 Date 내장 객체를 활용해서 날짜, 시간과 관련된 연산들을 쉽게 할 수 있습니다. Date 객체 생성 생성자로 호출하여 Date 객체를 반환받을 수 있습니다. 생성자를 호출하는 시점의 시간으로 Date 객체가 생성됩니다. const date = new Date(); console.log(date); // "Tue Aug 06 2019 21:16:22 GMT+0900 (한국 표준시)" Date 객체에 있는 날짜, 시간 반환 메소드 메소드 반환값 범위 getFullYear() 연도 4자리 getMonth() 월 0-11 getDate() 일 1-31 getDay() 요일 0-6 (0:일요일, 6:토요일) getHours() 시 0-23 getMinutes() 분 0-59 getSeco.. 2019. 8. 6.
예쁜 색상 모음 사이트(파스텔톤) flatuicolors, colorhunt, paletadecolores 3곳 추천합니다. 원하는 색깔을 클릭하면 자동으로 클립보드에 복사됩니다. 유용하게 사용하시길! 1. flatuicolors https://flatuicolors.com/ Flat UI Colors 2 - 14 Color Palettes, 280 colors 🎨 280 handpicked colors ready for COPY & PASTE flatuicolors.com 2. colorhunt https://colorhunt.co/palettes/pastel Pastel Color Palettes - Color Hunt Discover beautiful pastel color palettes on Color Hunt. A curated collection of great color palettes for .. 2019. 8. 6.
[JAVASCRIPT] 문자열 혹은 배열이 특정 요소를 포함하는지 확인 - includes() includes 1) 문자열 안에서 특정 단어를 찾을 때, 2) 배열의 요소들 중에서 특정 요소가 포함되어 있는지 확인할 때 모두 includes 메소드를 사용할 수 있습니다. 단 전자는 String prototype에 있는 includes 메소드이고, 후자는 Array prototype에 있는 includes 메소드입니다 (최하단의 MDN 문서를 확인해 주세요) 1. 문자열에서 찾기 str.includes(searchString); str.includes(searchString, position); searchString 찾을 문자열 position 시작 인덱스, default 0 예시 문자열에 searchString이 포함되어 있으면 true, 없으면 false. const message = "Eve.. 2019. 8. 6.
[JAVASCRIPT] 문자열 합치기 - concat() / 배열의 요소들을 하나의 문자열로 합치기 - join() concat / join 자바스크립트에서 문자열을 합치는 방법입니다. 1. + 사용 const str1 = "Hello"; const str2 = " World"; console.log(str1 + str2); // Hello World 2. 여러 개의 문자열 합치기 concat str.concat(string2, string3[, ..., stringN]); str에 인자로 전달한 문자열들을 모두 합쳐서 새로운 문자열을 반환합니다. 예시 1 두 문자열을 합칩니다. const strA = "A friend to all"; const strB = "is a friend to none"; const message = strA.concat(strB); console.log(message); // "A frie.. 2019. 8. 6.


        
답변을 생성하고 있어요.