본문 바로가기

KDT TIL Note35

CSS 관련 라이브러리와 프레임워크 CSS 전처리기(Post-/ Pre-processors) 1. PostCSS : 91% 2. Sass : 84% 3. Stylus : 35% 4. Less : 34 % CSS Frameworks 1. Tailwind CSS : 78% 2. PureCSS : 70% 3. Ant Design : 56% 4. Bulma : 54% CSS-in-JS 1. vanilla-extract : 87% 2. CSS Modules : 86% 3. Windi CSS : 84% 4. Styled Components : 77% 참고 사이트 : https://2021.stateofcss.com/en-US/technologies The State of CSS 2021: Technologies With nearly 50% of re.. 2022. 11. 7.
1006note SCSS @mixin 키워드를 이용해 매개변수로 SCSS에서 사용할 변수(와 기본값)를 넣어주고, 공통적으로 사용할 스타일을 이름을 정해 @include + 이름으로 불러 사용한다. 변수: size와 color이고, 사용시에는 앞에 const나 let 대신 $를 붙여 사용하면 된다. 기본적으로 변수로 인해 적용될 값은 변수 옆에 : 값 형태로 작성하면 되고, 여러 개의 변수를 사용하고 싶을 때는 , 콤마로 여러 개의 매개변수 형태로 사용하면 된다. 지정한 기본값을 사용하고 싶으면, ( )를 사용하지 않고 @include와 이름만 작성하면 된다. 기본값이 아닌 값을 사용하고 싶을 때에는 명시해서 이름(값, 값) 과 같이 넣어주되, 단 매개변수에 지정한 순서(위치)대로 값을 넣어줘야 원하는 변수의 값으로 사용할 수 .. 2022. 11. 4.
클래스 이름 container? wrapper? 웹페이지 클로닝을 하다 클래스 이름으로 자주 등장하는 container와 wrapper에 대해서 궁금해졌다. 둘다 요소를 감싸거나 포함한다는 의미를 담고 있는 줄은 아는데, 어떨 때 container라는 이름을 붙이는지 어떨 때 wrapper라는 이름을 붙이는지 궁금했다. 애매한건 또 못 참지. 검색을 하다 보니, 어느 블로거 분이 두 명칭 차이를 이해하는데 도움이 되었다는 stack overflow의 글. https://stackoverflow.com/questions/4059163/css-language-speak-container-vs-wrapper CSS Language Speak: Container vs Wrapper? What's the difference between container an.. 2022. 11. 4.
[백준] (정렬) 좌표 정렬하기 2, 단어 정렬, 좌표 압축 https://www.acmicpc.net/problem/11651 11651번: 좌표 정렬하기 2 첫째 줄에 점의 개수 N (1 ≤ N ≤ 100,000)이 주어진다. 둘째 줄부터 N개의 줄에는 i번점의 위치 xi와 yi가 주어진다. (-100,000 ≤ xi, yi ≤ 100,000) 좌표는 항상 정수이고, 위치가 같은 두 점은 없다. www.acmicpc.net https://www.acmicpc.net/problem/1181 1181번: 단어 정렬 첫째 줄에 단어의 개수 N이 주어진다. (1 ≤ N ≤ 20,000) 둘째 줄부터 N개의 줄에 걸쳐 알파벳 소문자로 이루어진 단어가 한 줄에 하나씩 주어진다. 주어지는 문자열의 길이는 50을 넘지 않는다. www.acmicpc.net https://ww.. 2022. 10. 31.
JS 표준 내장 객체 - String 메서드 String .charCodeAt() / String.fromCharCode(아스키번호) .includes(str) .indexOf(str) .match(RegExp) .padStart() / .padEnd() .replace() .slice(시작 인덱스, 끝 부분의 다음 인덱스) .split('구분자') / .join('구분자') .startsWith() .substring(begin index) / .substring(begin index, end index) toUpperCase() / toLowerCase() .trim() . 2022. 10. 28.
완주하지 못한 선수 수많은 마라톤 선수들이 마라톤에 참여하였습니다. 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였습니다. 마라톤에 참여한 선수들의 이름이 담긴 배열 participant와 완주한 선수들의 이름이 담긴 배열 completion이 주어질 때, 완주하지 못한 선수의 이름을 return 하도록 solution 함수를 작성해주세요. 제한사항 마라톤 경기에 참여한 선수의 수는 1명 이상 100,000명 이하입니다. completion의 길이는 participant의 길이보다 1 작습니다. 참가자의 이름은 1개 이상 20개 이하의 알파벳 소문자로 이루어져 있습니다. 참가자 중에는 동명이인이 있을 수 있습니다. 입출력 예 participantcompletionreturn ["leo", "kiki", "ede.. 2022. 10. 21.
번들러(Bundler) Parcel 번들러의 종류 : Parcel, Webpack, Rollup ... 순수하게 HTML, CSS, JS를 가지고 웹페이지를 만드는데 있어서는 비효율적인 부분이 있기 때문에 다양한 라이브러리를 사용해 작성하게 되지만, 그 라이브러리들이 직접 그 기능을 수행하는게 아니고 그 라이브러리를 통하여 작성된 코드를 가지고 다시 HTML, CSS, JS로 변환하는 작업을 거쳐 웹페이지가 작성된다. 각 라이브러리를 번들러를 통하여 동작할 수 있도록 변환시켜준다. 하지만 번들러가 모든 것을 변환시켜줄 수 없기 때문에 외부 패키지(ex. sass, postcss, typescript, @babel/core, vue-template-compiler 등을 자동으로 설치해준다. Parcel : 구성 옵션 없는 단순한 자동 번들링.. 2022. 10. 19.
Git 버전 관리 (실습) .gitignore를 만들어 그 파일 안에 원격 저장하지 않아도 되는 파일이나 폴더를 명시하여, 버전 관리시 무시할 파일이나 폴더를 설정할 수 있다. git init 으로 버전관리 초기화 터미널에서 cmd로 보면 경로 마지막에 브랜치 이름이 붙지 않는다 ! gitbash로 변환하니 git init 후 경로 마지막에 브랜치 이름이 보인다. 폴더나 파일이름은 영문으로 작성해야 에러가 생기지 않는다. git add .를 하였더니 필요없는 캡쳐 파일들이 다같이 staging 되서 내리고 gitignore 폴더에 넣고자 했다. 먼저 캡쳐 파일들을 unstaging하기 위해 git reset HEAD (파일이름)을 입력했는데, 다음과 같은 메시지가 떴다. 이유는 git reset HEAD (파일이름) 명령어는 최근.. 2022. 10. 14.
SCSS 시작하기 npm init -y 전체 yes로 npm 시작 => 왼쪽 사이드바에서 package.json 파일 생성되는 것 볼 수 있음 npm i -D parcel-bundler 개발 의존성 모듈로 parcel-bundler를 설치 => 왼쪽 사이드바에서 node_modules 폴더와 package-lock.json 파일이 생성된 것을 볼 수 있음 parcel-bundler를 실행해서 프로젝트를 브라우저에 오픈할 수 있게 "scripts": { } 안에 "dev": "parcel index.html" 라고 작성해서 dev 라는 명령으로 parcel이라는 명령어에 index.html을 연결해서 실행할 것이라고 설정(개발 서버)한다. "build": "parcel build index.html" 라고 작성해서 parc.. 2022. 10. 14.

티스토리툴바