모르는건 한번으로 족해 모르는건 한번으로 족해

FrontEnd

• SVG로 Progress-bar 만들기 with JS로 width 변경

  FrontEnd/JavsScript 2021. 3. 23. 01:28

  남은 시간을 진행바로 표시해줘야 하는 상황이 생겼다. CSS에 -webkit-progress-bar 라는 프로퍼티가 있다고 듣기는 했는데 아직 생소해서 이번에는 최대한 아는 걸로 만들어보기로 했다. 시간이 주어지면 (ex 10초) 남은 시간만큼 타임바가 짧아지다가 사라지는 형태다. 큰 아이디어는 이쪽에서 얻었다: ProgressBar 구현하는 3가지 방법 먼저 직선 모양이 있어야하니 svg 태그를 추가한다. 이미지를 잡기 위해서 우선 기본값을 넣어주었다. (Move to 좌표(0, 0) -> Horizontal 가로 좌표(변수) -> Vertical 세로 좌표 10으로 이동 -> 거기서 0으로 되돌아와서 마저 채우기) 그리고 js를 구성한다. 먼저 상수처리. 셀렉터를 가져오고, 시간 제한을 정해준다. c..

  Read More
• ESLint 사용하기 - eslint-config-airbnb

  FrontEnd/좋은코드작성하기 2021. 3. 8. 19:22

  ESLint 린트는 소스 코드를 분석하여 프로그램 오류, 버그, 스타일 오류 등을 표시해주는 도구를 가리킨다. ESLint는 요즘 많이 쓰이고 있는 린트의 하나. 최근 코드 작성시에 Airbnb JS Style Guide를 많이 참고하고 있는데, 마침 에어비앤비에서 린트 규칙을 제공하고 있어서 이걸 사용하기로 했다. 일단 린트를 설치하고 npm install eslint --save-dev 에어비앤비 린트를 설치하고 npx install-peerdeps --dev eslint-config-airbnb 사용하려는 프로젝트에서 npm init을 한 다음, 린트도 init을 해준다. npx eslint --init 그러고 나면 프로젝트 폴더에 .eslintrc.js 라는 파일이 생긴다. 내 파일에는 아래와 같..

  Read More
• Permutation Power Set (순서를 구분하는 멱집합)

  FrontEnd/알고리즘 2021. 3. 6. 05:09

  input: 배열 [1, 2, 3] output: (원 배열의 멱집합에 순서 배리에이션까지 더해진 배열 [1, 2] ≠ [2, 1]) [], [1], [2], [3], [1, 2], [2, 1], [1, 3], [3, 1], [2, 3], [3, 2], [1, 2, 3], [1, 3, 2], [2, 1, 3], [2, 3, 1], [3, 1, 2], [3, 2, 1] 순열 멱집합이라는 명칭이 실제로 있는 것인지는 잘 모르겠다. 일반적인 PowerSet은 순서를 구분하지 않는 부분 집합을 가리키는데, 프로그래머스에서 완전탐색 > 소수 찾기 풀이를 하다가 순서를 구분하는 부분 집합이 필요해졌다. 인풋으로 1~7개의 숫자가 주어지고, 주어진 숫자로 만들 수 있는 수 중 소수인 것이 몇 개인가를 묻는 문제다. ..

  Read More
• [HTML & CSS] Google Clone (2) 내비게이션, 검색

  FrontEnd/CSS 2021. 2. 22. 18:22

  Google 페이지를 클론코딩하는 작업을 했다. 기능적인 부분은 무시하고 외양에만 집중했다. 분량 이슈로 나머지는 아래쪽에서 마무리했다. 2021/02/21 - [FrontEnd/Prep] - [HTML & CSS] Google Clone (1) Flex Container, 로고, footer [내비게이션] svg, justify-content: flex-end; vertical-align: middle; inline whitespace 내비게이션에는 Gmail, 이미지, 다른 기능 추가 로드, 로그인 버튼의 총 4가지가 필요하다. 그리고 화면 오른쪽에 정렬돼야 한다. 전체 블록을 차지하는 div 안에 작은 div로 오른쪽 영역이 다시 한번 묶여있고, Gmail, 이미지가 한 묶음, 추가 로드버튼과 로그..

  Read More
• [HTML & CSS] Google Clone (1) Flex Container, 로고, footer

  FrontEnd/CSS 2021. 2. 21. 15:45

  Google 페이지를 클론코딩하는 작업을 했다. 기능적인 부분은 무시하고 외양에만 집중했다. 분량 이슈로 나머지는 아래쪽에서 마무리했다. 2021/02/22 - [FrontEnd/Prep] - [HTML & CSS] Google Clone (2) 내비게이션, 검색 먼저 페이지를 Box 단위로 나누어 보았다. 큰 박스 6개가 제일 먼저 눈에 띈다. 위의 로그인 메뉴는 내비게이션인 것 같고, 로고는 아무 기능이 없는 그냥 로고 이미지, 중간의 검색창이 메인으로 보인다. 검색창 아래에는 현재 설정된 언어를 보여주는 부분이 나오고, 그 아래로 접속한 국가, 마지막으로 정보 및 약관 라인이 있다. 순서대로 nav, div, main, section, footer(div(접속국가), div(정보 및 약관) 태그로 ..

  Read More
• [CSS] Font, Background

  FrontEnd/CSS 2021. 2. 21. 00:16

  Background -해당 요소의 배경을 지정한다. 이미지나 색상이 올 수 있다. 설정 가능한 속성은 이쪽: developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders -이미지를 사용하고 싶은 경우 background-image: url("파일경로");를 쓴다. 여러 이미지를 겹쳐서 사용할 수도 있다. 먼저 설정한 이미지가 앞으로 온다. 아래의 repeat, size 등은 이미지 별로 지정 가능한데, 쉼표로 구분해야 한다. -이미지가 화면 크기보다 작은 경우 background-repeat를 이용해서 채우기를 할 수 있다. 기본값은 repeat이고 화면에 반복 출력된다. 반복하지 않으려면 no-repeat을 쓴다. 가로나 세로로만 채우고 싶..

  Read More
• [CSS] Box Model , Display, Position, float

  FrontEnd/CSS 2021. 2. 19. 02:45

  BoxModel Box에는 content, padding, border, margin이 있다. -박스 크기는 이렇게 구해진다. 너비: width + left/padding + left/border + left/margin 높이: height + top/bottom padding + top/border + top/bottom margin -값을 따로 정하지 않으면 기본값 auto가 적용된다. (margin에 auto를 주면 브라우저 중앙에 위치하게 된다.) -값을 지정할 경우 px, % 등의 단위를 쓴다. 박스모델 관련 속성은 상속되지 않는다. -top, right, bottom, left가 모두 같다면 margin: 25px; 처럼 한번에 지정해도 된다. -box-sizing 프로퍼티는 content-b..

  Read More
• CSS - 선택자, 속성값, Reset CSS

  FrontEnd/CSS 2021. 2. 17. 17:11

  CSS(Cascading Style Sheets)는 HTML 같은 문서를 화면에 어떻게 표현할 것인지를 정의하는 언어다. Rule Set(구문) 위와 같은 구문을 Rule Set 혹은 Rule이라고 부른다. 이런 Rule Set을 모아둔 시트를 Style Sheet라고 부른다. Selector(선택자) CSS 구문에서 스타일을 적용할 HTML element를 선택하는 부분을 Selector라 부른다. -HTML 문서 내의 모든 요소를 선택하고 싶다면 * 키워드를 사용할 수 있다. (head 태그와 html 태그도 포함된다.) -* 키워드를 이용해 상속되지 않는 box-sizing 프로퍼티를 상속시킬 수도 있다. *, *:before, *after { box-sizing: inherit; } -HTML e..

  Read More