# frontend

166개의 포스트

#15. 최소(min), 최대값(max)을 받아 그 사이의 랜덤수를 return하는 함수 구현

프론트엔드 개발자가 쇼핑몰이나 브랜드 사이트를 구현하는 경우에는 행동(마우스, 클릭)을 처리하는 event 함수를 많이 사용하고 핀테크 회사나 데이터를 많이 다루는 사이트의 경우에는 수학 관련 함수를 많이 사용한다. 네이버의 블로그 팀의 경우는 사람들의 글쓰기에 관련된

1일 전
·
0개의 댓글

#12. CSS layout (position, display, float)

What is the layout? > 레이아웃이란 웹사이트를 구성하는 요소들을 배치할 공간을 분할하고 정렬하는 것이다. 공간을 분할할 때는 먼저 행을 구분한 후에 행 내부 요소를 분리하는 것이 일반적이다. 레이아웃의 핵심은 블록 레벨 요소들을 원하는 위치에 배열하는

5일 전
·
0개의 댓글
post-thumbnail

[D3.js, React] 반응형 그래프 차트

Preview > Github Repository 사용 스펙 D3.js React.js typescript CRA(create react app) styled-components 서울특별시 공공데이터 간단 소개 서울특별시 열린데이터 광장에서 제공하는 따릉이 대여소

6일 전
·
0개의 댓글

[HTML]

웹 페이지의 토대가 되는 HTML과 CSS의 역할에 대해 설명할 수 있다.HTML과 CSS의 기초 개념 및 용어를 설명할 수 있다.HTML에서 자주 사용되는 태그의 종류를 알고 적절하게 활용할 수 있다.CSS 기본 개념을 활용하여 페이지의 레이아웃을 구성하며 요소에 스

6일 전
·
0개의 댓글
post-thumbnail

Nuxt에서 유지보수 쉬운 동적 팝업 구현하기

잘 만든 컴포넌트 하나, 100번의 디자인변경 안무섭다.

2020년 10월 18일
·
0개의 댓글
post-thumbnail

CORS 원인 및 해결방법

CORS (Cross-Origin Resource Sharing)🚨 Access to fetch at ‘https://api.lubycon.com/me’ from origin ‘http://localhost:3000’ has been blocked

2020년 10월 18일
·
0개의 댓글
post-thumbnail

[TIL] 카드 높이 맞춰서 정렬하기

1. 높이를 맞추자 span 태그에 아이콘과 텍스트를 넣었을 때, 위와 같이 불편하게 높이가 안 맞는 경우를 만날 수 있다. 이런 경우에는 태그를 감싸고 있는 상위태그에 <p style="text-align: cen

2020년 10월 18일
·
0개의 댓글
post-thumbnail

svelte의 reactivity(반응성) 소개

svelte의 3가지 특징 중에서 Write less codeno Virtual domTruly reactive가장 체감이 되는 부분은 아마도 reactive 즉 반응성이 아닐까 생각한다. 이 반응성이란 호출해서 어떤 액션을 발생하는 것이 아니고, 미리 어떤 값을 선언

2020년 10월 6일
·
0개의 댓글
post-thumbnail

한달에 하나씩 - CRUD게시판-4

vuetify 적용하고 디테일페이지 만들기

2020년 10월 5일
·
0개의 댓글
post-thumbnail

한달에 하나씩 - CRUD게시판-3

화면에 게시판을 표시하기

2020년 9월 29일
·
0개의 댓글
post-thumbnail

Listen With Me 회고

Listen With Me 회고 입니다. 4주간 진행되었으며 프론트를 맡았습니다.

2020년 9월 23일
·
0개의 댓글

Laftel Clone #2

PC 사이즈에서 footer에 info가 밑으로 내려오게footer 전체를 display: flex;로 지정하지 않고 fooer\_\_top을 따로 만들어서 display-flex를 지정해서 해결px 단위를 em/rem으로 변경엘리먼트 하나하나에 적용되어있던 paddi

2020년 9월 18일
·
0개의 댓글

Laftel Clone #1

깃허브 주소조금씩 커밋하는 중인데 언제쯤 다 할 지는 모르겠담...현재 여기까지 틀만 한 상태추가) PC 사이즈에서 footer에 info가 밑으로 내려오게추가) PC 사이즈에서 메뉴 보이게 하고 mobile 사이즈에서는 메뉴를 따로 만들어서 옆에서 슬라이드로 나오게

2020년 9월 16일
·
0개의 댓글
post-thumbnail

[React] Website Clone

많은 고민속에 선택했던 front-end에서 진행한 Instagram clone.부랴부랴 따라가면서 만든 clone page이지만, 새롭게 배운것도 많고 느낀것도 많은 작업이었다.처음에는 HTML과 CSS, JS를 사용해서 첫 페이지를 만들었다.하지만 세션이 조금씩 진

2020년 9월 13일
·
0개의 댓글
post-thumbnail

Numeral Js locales 추가하는 법 - 한국 원화 포맷 만들기

locales/ko.js/src/numeral/locales/ko.js 파일을 만들어줍니다.ko.js:그리고 numeral 커스텀 포맷을 사용할 파일에 js 파일을 임포트하고 아래 코드를 추가해 줍니다.

2020년 9월 10일
·
0개의 댓글
post-thumbnail

React스터디_라우터로 SPA 개발하기

SPA는 Single Page Application(싱글 페이지 애플리케이션)의 약어입니다.말 그대로 한 개의 페이지로 이루어진 애플리케이션이라는 의미입니다.

2020년 9월 9일
·
0개의 댓글
post-thumbnail

grid (1)

grid는 중요하다. 간편하게 레이아웃을 짤 수 있다. 이제 grid가 얼마나 훌륭한 개념인지 알아보자. 별 볼일 없는 4개의 블럭이 있다. 이 녀석들을 사이에 일정한 공간을 만들고 싶다. cssparent에 flex를 주고 wrap으로 묶고 space-between

2020년 9월 8일
·
0개의 댓글
post-thumbnail

[Nomadcoders] css layout challenge

2주간 펼쳐지는 노마드코더의 css challenge오늘 과제는 이 아름답고 훌륭한 페이지를 따라하는 것이다. 예전에 챌린지 했을 때 평균 6시간 걸려서 도중 포기했었는데 이번에는 어떨지 무척 궁금하다. html일단 body 위에 container를 만들고 그 안에 h

2020년 9월 8일
·
0개의 댓글