본문 바로가기

민트코딩90

react 설치 및 개발환경 설정 (node 14.17.0으로 설치 진행하였습니다) 1. node 및 vscode 설치 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Wind.. 2021. 8. 11.
[tailwind CSS] 4. 반응/상태 선택자 추가 방법(hover, focus, checked, disabled, etc.) tailwind에서 제공하는 반응/상태 선택자는 다음과 같다. Hover Focus Active Group-hover : 부모요소에 group 클래스 추가 후, 자식 요소에 선언 Group-focus : 부모요소에 group 클래스 추가 후, 자식 요소에 선언 Focus-within Focus-visible Motion-safe Motion-reduce Disabled Visited Checked First-child Last-child Odd-child Even-child 원하는 선택자가 없을 경우: [tailwind CSS] 3. 커스텀 선택자(클래스) 추가 방법, Adding variants tailwind.config.js 1. plugin을 불러와 선택자와 클래스명을 지정하고, tailwind .. 2021. 4. 18.
[tailwind CSS] 3. 커스텀 선택자(클래스) 추가 방법, Adding variants tailwind.config.js 1. plugin을 불러와 선택자와 클래스명을 지정하고, tailwind CSS를 재생성한다. 1.1. 삽입 위치 const plugin = require('tailwindcss/plugin') // ★★ module.exports = { purge: [], darkMode: false, theme: { extend: {}, }, variants: { // ★★ }, plugins: [ // ★★ ], } 1.2. 기본형 const plugin = require('tailwindcss/plugin') // ★★ module.exports = { purge: [], darkMode: false, theme: { extend: {}, }, variants: { extend:.. 2021. 4. 18.
[tailwind CSS] 2. vscode 플러그인 추천 1. Tailwind CSS IntelliSense html 작성 시, 입력한 문자로 시작하는 클래스명들을 보여준다. 2. Tailwind CSS Explorer vscode에서 tailwind 클래스명들을 속성별로 검색 확인할 수 있다. 이와 비슷한 플러그인으로는 Tailwind Docs가 있는데, 이는 vscode에서의 바로 확인은 아니고, 검색한 클래스의 설명이 기입된 공식 사이트 페이지를 오픈한다. 3. Headwind 지정한 클래스를, 속성별로 재배열 시켜준다. 예로 다음과 같은 코드가 있다면 Mint-Coding 아래와 같이 재배열 시켜, 클래스 파악에 도움 준다. 팀워크가 아니어도, 추후 관리를 위해 강력 추천하는 플러그인이다. Mint-Coding 2021. 4. 10.
[tailwind CSS] 1. install / 빠른 개발을 위한 유틸리티 클래스(못생긴 코드엔 흐린눈 필요) Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Documentation for the Tailwind CSS framework. tailwindcss.com 0. node 설치 및 project 생성하기 tailwind CSS는 최소 node v11 이상을 요구한다. 따라서 먼저 설치된 node 버전을 확인하고, 11 이하일 경우, 11 이상의 버전으로 설치 및 설정 변경한다. node -v // 버전 확인 nvm install 14.16.1 // node 설치 nvm use 14.16.1 // 해당 버전으로 설정 그 후 project를 생성하면 tailwind 설치를 위한 준비가 끝난다. npm init -y 1.. 2021. 4. 10.
css에 의문이 들 땐, CSS-Tricks! css계의 Stack Overflow, CSS-Tricks. 기초부터 고급 스킬까지 확인 가능하다. 영알못이여도 코드를 보면 이해 가능한 것이 css 아니던가. 하나하나 읽어보자. CSS-Tricks CSS-Tricks is a website about websites. css-tricks.com 사용방법은 헤더의 검색 버튼을 클릭 후, 코드나, 의문점을 영문으로 작성하면 된다. css 관련 사이트라, 검색 결과도 아주 직관적이다( :)). 2021. 4. 2.
[css] variable 변수 총 정리 1. css 변수 선언 --color: rebeccapurple; /* 변수명: 값; */ --mint:;/* X */ --mint: ;/* O */ --mint != --MINT 변수 값에는 공백이라도 들어가야 변수가 선언되며, 대소문자를 구분한다. 그리고 변수값은 하위 요소에 상속된다. 2. css에서 변수 사용 방법 color: var(--color); /* 속성: var(--변수명); */ 변수값이 지정되지 않았을 경우를 대비하여, 아래와 같이 default 값을 지정할 수 있다. color: var(--color, yellow); /* 속성: var(--변수명, default 값); */ 물론 default값도 변수로 삽입 가능하다. color: var(--color1, var(--color2,.. 2021. 3. 21.
[css] box-sizing 요소의 크기를 제어하는 속성 css 값 의미 box-sizing: content-box 제어할 요소의 너비와 높이를, 순수한 콘텐츠의 크기로 지정 border-box 제어할 요소의 너비와 높이를, 콘텐츠와 padding, border 값을 더한 크기로 지정 div { width: 240px; height: 80px; } 지정 너비/높이: 240/80 실제 너비/높이: 240/80 div { width: 240px; height: 80px; padding: 10px; } 지정 너비/높이: 240/80 실제 너비/높이: 260/100 div { width: 240px; height: 80px; padding: 10px; border: 10px solid #F5dF4D; } 지정 너비/높이: 240/80 실제 너비/높이: 280/120 .. 2021. 3. 21.
[css] 텍스트4: word-break, word-wrap 줄바꿈 속성(단어 기준) word-break: 줄바꿈을 위한 속성으로, 어떤 식으로 줄바꿈을 이행할지에 대한 속성 word-wrap: 단어의 길이가 요소의 너비보다 넓을 때 줄바꿈을 이행할지에 대한 속성 normal 일반적인 규칙에 따라 줄바꿈 (공백 기준) normal 요소 너비보다 넘쳐도 줄바꿈 하지 아니함 keep-all 단어 기준으로 줄바꿈 (비아시아) break-word 요소 너비에 맞춰 줄바꿈 break-all 요소 너비에 맞춰 줄바꿈 (아시아) word-break: normal abcdefghijklmnopqrtuvwxyz. keep-all abcdefghijklmnopqrtuvwxyz break-all abcdefghijklmnopqrtuvwxyz normal a herb whose leaves have a str.. 2021. 3. 20.
[css] 텍스트3: white-space 줄바꿈 속성 Mint coding css 값 HTML 상의 space, tab 병합 HTML 상의 줄바꿈 병합 너비에 따른 자동 줄바꿈 white-space normal O O O nowrap O O X pre-line O X O pre-wrap X X O pre X X X Mint coding normal Mint coding Mint coding nowrap Mint coding Mint coding pre-line Mint coding Mint coding pre-wrap Mint coding Mint coding pre Mint coding Mint coding 2021. 3. 20.
[css] 텍스트2: letter-spacing, word-spacing 간격 조절 속성 css 값 의미 letter-spacing: 0.2em 글자와 글자 사이의 간격을 0.2em 만큼 늘림 word-spacing: -1px 단어와 단어 사이의 간격을 1px 만큼 줄임 normal 민트 코딩에 방문해 주셔서 감사드립니다 :) letter-spacing: 4px 민트 코딩에 방문해 주셔서 감사드립니다 :) word-spacing: 6px 민트 코딩에 방문해 주셔서 감사드립니다 :) 2021. 3. 20.
[css] 텍스트1: text-transform 대소문자 변환 속성 text-transform : none 변환 X capitalize 첫 글자만 대문자로 변환 uppercase 모두 대문자로 변환 lowercase 모두 소문자로 변환 .capitalize { text-transform: capitalize; } mint-coding → mint-coding 2021. 3. 20.
[css] 선택자4 - Combinators 결합 선택자 1. Sibling Selector. 형제 선택자 선택자 의미 A + C A 요소 바로 뒤에 있는 형제 C 요소를 선택함(중간에 타 요소있으면 선택 안됨) A ~ C A 요소 뒤 어딘가에 있는 형제 C 요소를 선택함 2. Grouping Selector. 선택자 그룹화 A, B 콤마로 구분된 모든 선택자(A,B)에 동일한 css 선언 3. Descendant Selector. 하위 선택자 A B A안 B 요소를 선택 A > B A의 자식인 B 요소를 선택(자식의 자식 선택 안됨) 2021. 3. 20.
[css] 선택자3 - Pseudo-element Selector 가상 요소 선택자 선택자 의미 :before 요소 안, 맨 앞에 생성된 가상 요소를 선택함 :after 요소 안, 맨 밖에 생성된 가상 요소를 선택함 :first-line 요소의 문자열 중 첫 번째 줄을 선택함 :last-line 요소의 문자열 중 마지막 줄을 선택함 :selection 마우스 드래그를 통해 선택한 범위를 선택함 주의: :before와 :after으로 만든 요소는 스크립트에서 선택 제어 불가능하다. ::selection { background-color: yellow; } ::-moz-selection { background-color: yellow; } ::-webkit-selection { background-color: yellow; } 2021. 3. 20.
[css] 선택자2 - Pseudo-classes Selector 가상 클래스 선택자 1. Structural Pseudo-classes Selecor. 구조 가상 클래스 선택자 의미 :root 문서 최상위의 요소 :nth-child(n) 상위 요소의 n번째 자식 요소 :nth-last-child(n) 상위 요소의 역순으로 n번째 자식 요소 :nth-of-type(n) 동일한 타입의 형제 요소 중 n번째 요소 :nth-last-of-type(n) 동일한 타입의 형제 요소 중 역순으로 n번째 요소 :first-child 첫 번째 자식 요소 :last-child 마지막 자식 요소 :first-of-type(n) 상위 요소의 첫 번째 자식의 타입이 매치될 때 선택됨 :last-of-type(n) 상위 요소의 마지막 자식의 타입이 매치될 떄 선택됨 :only-child 상위 요소에 대해 유일한 .. 2021. 3. 20.

티스토리툴바