본문 바로가기

분류 전체보기182

VSCode의 확장 프로그램 Comment tagged templates VSCode Plugin 중에 Comment tagged templates를 설치해 사용하면, JS를 작성할 때 JS를 통해 만드는 HTML 부분이나 CSS 부분을 특정하여 하이라이트 되게 해 가독성을 높여주는 프로그램이다 ! 실제로 작성해서 살펴보니, 내가 설정해놓은 테마때문인지 하이라이트는 아니었고, 원래 HTML 파일 작성시의 스타일(색상)으로 변하는 것을 확인할 수 있었다. HTML 코드를 작성할 때에는 /* html */로, CSS 코드를 작성할 때에는 /* css */로 백틱 전에 명시해주면 하이라이트 된다 ! 2022. 11. 9.
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.
VSCode에서 주석 단축키가 적용되지 않을 때 VSCode에서 CSS를 작업하다 한 줄을 주석 처리하려고 ctrl + / 를 눌렀더니 작동을 안하고 위와 같이 되버리는 것이다. 키 입력 모드가 한국어 한컴 입력기로 되어 있었는데, 그 아래의 한국어 Microsoft 입력기 모드로 전환한 뒤, 다시 주석 처리 단축키를 적용해보니 제대로 적용이 되었다 ! 2022. 10. 15.

티스토리툴바