1. 설치하기 npm install -D tailwindcss npx tailwindcss init 2. tailwind.config.js /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./src/**/*.{js,jsx,ts,tsx}", ], theme: { extend: {}, }, plugins: [], } 3. index.css @tailwind base; @tailwind components; @tailwind utilities; /*최상단에 추가*/ 4. npm run start 5.예시 export default function App() { return ( Hello world! ) } 👀테일윈드 더 알아..
#after vs box-shadow box-shadow로 그림자만 만들 줄 알았지 border를 만들다니? 라고 생각 하실 수 있지만 이게 엄청 유용했다. Why? 이 코드를 보면 바로 납득이 된다. See the Pen after vs box-shadow by dev_Sunny (@sunny_dev) on CodePen. 이렇게 글자 밑에 형관펜 같은 효과를 넣는 디자인을 본적이 있지 않은가? 예전에 ie가 있을때 after로 효과를 많이 넣어서 습관처럼 넣고 있다가 box-shadow 로 아주 쉽게 할 수 있는 것을 알아서 써먹기 시작했다. 파폭, 오페라, 크롬, 브레이브, 엣지 등등에서 아주 잘먹는다. 한줄이면 끝나는 코드를 그동안 여러줄을 써댔는대 정말 편하다. 그렇다면 inset이 뭘까? #i..
#word-break 텍스트가 글자상자를 넘어갈때 글자를 줄바꿈하는 방법 word-break: normal; word-break: break-all; //특수문자를 제외하고 강제로 줄바꿈 word-break: keep-all; //한글일 경우 띄어쓰기 기준으로 짤림 word-break: break-word; /* deprecated */ 특수문자를 포함하고 강제 줄바꿈 word-break:nowrap; //줄바꿈 하지 않음 #white-Space 공백을white-space 처리하는 방법 white-space: normal; white-space: nowrap; //스페이스로 들어간 연속공백은 통합 = pre의 효과, 줄바꿈X white-space: pre; //원문 그대로 출력 white-space: p..
#(--variable) /* 전역 변수 설정 --변수명:값 */ /* 변수의 element 적용 var(변수명) */ // 인라인 스타일 변수 확인 document.documentElement.style.getPropertyValue("변수명"); // 글로벌로 변수 확인 getComputedStyle(document.documentElement).getPropertyValue("변수명"); // 인라인 스타일에 변수 설정 document.documentElement.style.setProperty("변수명", "변수속성"); 🙄위를 응용하여 만든 셀렉트 값에 따른 박스 높이 조정 See the Pen css 변수를 자바스크립트로 제어 by dev_Sunny (@sunny_dev) on CodePen...
블록요소를 가로로 정렬하거나 어떠한 공간에서 세로로 가운대 정렬해야 할 때가 온다. ie가 있을때는 flex와 grid가 호환이 잘 되지 않아서 display:inline-block, float, display:table-cell 등을 사용했는대 요즘은 flex나 grid로 해결한다. #차이점 Flex는 한 방향 레이아웃 = 1차원 Grid는 두 방향(가로-세로) 레이아웃 = 2차원 👀언제 사용하는게 좋을까? (개인적인 주관) 갯수가 정해져있을경우는 flex로 하면 편하고 그렇지 않을경우는 grid가 편하다. 또하나는 레이아웃안에 자식이 모두 같은 크기일 경우는 flex가 편하고 자식들이 각각 다른 사이즈로 해야할 경우는 grid가 편하다. #기본세팅 자식1 자식2 자식3 1.flex 1)부모요소 .wr..
1.npm init 설치 2.node-sass 설치 3.scripts부분에 추가해 주기 sass : script 이름으로 자신이 원하는 이름을 생성하는 자리 실행시킬 내용 : 작성한 파일을 실행시키는 자리 예)"sass":":node-sass css/style.scss style.css" 4. npm run sass 시 반영되는것 확인 5.scss를 칠때마다 계속 4번을 해야하는 번거로움을 없애기 위해 package.json 에 scripts 에 추가한다. "sass":"node-sass -w -r css/style.scss style.css" 로 변경하면 한번 실행 후 scss에 저장하면 바로 컴파일 된다!! 추가할경우 _파일명.scss(예: _common.scss)로 저장 한 수 메인 scss 파일에..
#100vh 오류 해결 :root { --vh: 100%; } html,body,.main_box{ height: 100vh; height: var(--vh); } let vh = 0; useEffect(() => { vh = window.innerHeight * 0.01; document.documentElement.style.setProperty('--vh', `${vh}px`); }, []); const setVh = () => { document.documentElement.style.setProperty('--vh', `${window.innerHeight}px`) }; window.addEventListener('resize', setVh); setVh(); 리사이징시와 ios에서 주소창에 가..
.view_app_desc:after { content: ""; display: block; height: 50px; position: absolute; bottom: 100px; width: 100%; background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); filter: progid:..
*자간 포토샵 400 (tracking) = 400/1000 =0.4em css에서는 letter-spacing으로 표현 *행간 1) fontsize + (leading(행간) / 2) = lineheight 로 계산 = 결과는 px 2) CSS Line Height (abs)로 쓸경우에는 1) / fontsize 로 계산하면됨 예) font-size: 20 leading: 30 lineheight = 20 + (30/2) = 35px *1)값 lineheight = 35(1)에서 나온값) / 20 = 1.75 *2)값 https://codepen.io/zuhloobie/full/QWLZmpz Photoshop to CSS: Line-Height and Letter-Spacing Converter .....
.line-clamp { display : block; display : -webkit-box; -webkit-box-orient : vertical; position : relative; line-height : 1.2; overflow : hidden; text-overflow : ellipsis; padding : 0 !important; } /* .line-clamp:after { content : '...'; text-align : right; bottom : 0; right : 0; width : 25%; display : block; position : absolute; height : calc(1em * 1.2); background : linear-gradient(to right, rgb..
