에러발생..npm error could not determine executable to run npm error A complete log of this run can be found in: /Users/xxx/.npm/_logs/xxx-xx-17T05_26_44_563Z-debug-0.log tailwindcss 추가하고npm install -D tailwindcss postcss autoprefixer 초기화 진행시..npx tailwindcss init -p 다음과 같은 에러가 발생한다.npm error could not determine executable to runnpm error A complete log of this run can be found in: /Users/xxx/.npm/_l..
프로그래밍/CSS
PostCSS는 CSS를 변환하는 JavaScript 기반의 도구로, 플러그인 시스템을 통해 CSS를 처리하고 변형할 수 있도록 설계된 빌드 도구입니다. 단순한 CSS 전처리기가 아니라, 플러그인 기반의 유연한 CSS 처리 엔진이라는 점이 큰 특징입니다. PostCSS는 기본적으로 CSS를 읽고 변환한 후 다시 출력하는 엔진이며, 다양한 플러그인을 조합하여 기능을 확장할 수 있습니다. PostCSS 주요 기능1. 자동 접두사 추가 (Autoprefixer)/* 입력 */.foo { display: flex;}/* 출력 (Autoprefixer 적용) */.foo { display: -webkit-flex; display: -ms-flexbox; display: flex;}Autoprefixer ..
peer 가 포커스 되었을때..peer-focus:bg-pink-300 js 스크립트로 해야 한는걸 간단하게 처리할 수 있음. 포커스 되는 요소를 peer 로 설정하고반응하는 요소에는 peer-focus:~~ 로 처리하면 됨. Submit
laravel 에서 resources/css/app.css @tailwind base; @tailwind components; @tailwind utilities; 기본지식 : At-rules https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule At-rules - CSS: Cascading Style Sheets | MDN At-rules are CSS statements that instruct CSS how to behave. They begin with an at sign, '@' (U+0040 COMMERCIAL AT), followed by an identifier and includes everything up to the next semico..
장점 : 별도의 css 파일을 만들지 않고 직접 html 파일에 적용한다. 따라서style css 파일을 만들고 아주 귀찮은 이름짓기를 하지 않아도 된다.화면 크기에 따라서 손쉽게 레이아웃을 변경할 수 있다. sm, md, lg, xl, 2xl 를 암기하자. 예제1. - 화면 크기에 따라서 글자 크기를 변경해 보자.모바일 화면에서는 작고 pc 화면에서는 크게 보이도록.. 타이틀 제목입니다. 타이틀 제목입니다. 타이틀 제목입니다. 타이틀 제목입니다. 타이틀 제목입니다. 모바일에서 화면에서 보이는 글자 (모두 같은 크기로 보임) PC 화면에서 보이는 글자 (화면이 커질수록 글자 크기..
display 속성이란?웹페이지를 반응형으로 만들때 꼭 알아야 할 CSS 옵션임. display 는 보여준다의 의미다.하지만 여기서 보여준다는 의미는 본인의 모습과 본인이 품고 있는 자식도 포함되어 있다.전혀 다른 2가지의 속성을 세팅할 수 있다. 1. 자신의 박스형태2. 자식을 배열하는 형태 박스 형태를 어떤식으로 보여줄지 정하는 4가지 속성noneinlineblockinline-block 안보임 위의 속성 4가지는 자신의 박스형태를 보여주는 방법을 정하는거라면 다음의 속성은 박스에 포함된 자식박스를 배열하는 방법을 정하는 속성이다. 자식을 배열하는 방법을 정하는 속성flexgrid flex 는 1차원으로 정렬하고grid 는 2차원으로 정렬하는 방법을 제공합니다. display:flex; 로 세팅한..
background-color background-image background-position background-size background-repeat background-origin background-clip background-attachment background-blend-mode background-blend-mode : 2개 이상의 배경 이미지를 합성시키는 방법 설정 normal, multiply, screen, overlay, darken, lighten, color-dodge, saturation, color, luminosity https://www.w3schools.com/cssref/pr_background-blend-mode.asp CSS background-blend-mod..
모든 선택자 * html 태그 선택자 h1 class 선택자 .이름 id 선택자 #이름 특성선택자 [attr] 여러개를 동시에 선택 (그룹선택) , 하위 선택 공백 바로 하위 선택 > 형제중 선택 ~ 바로다음 인접 형제 선택 + 상태에 따른 선택(의사클래스) : https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes 의사 클래스 - CSS: Cascading Style Sheets | MDN CSS 의사 클래스(가상 클래스)는 선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있습니다. 예를 들어 :hover를 사용하면 포인터를 올렸을 때에만 글씨 색을 바꾸고 싶을 developer.mozilla.org
box-sizing 이란? 박스크기 기준을 어떤걸로 정할지 지정하는 키워드 div { width:500px; border:20px; } 일반적인 css 에서는 div 박스의 크기는 540px이 된다. 하지만, box-sizing:border-box; 로 세팅해주면 div 박스의 크기는 500px 로 정해진다. 선택옵션 :: box-sizing : content-box; (테두리가 있으면 테두리 만큼 박스의 크기가 커짐) box-sizing : border-box; (테두리 때문에 넓어지지 않음) box-sizing : initial; (기본값) box-sizing : inerit; (부모 요소의 속성 상속함) 참조 https://www.codingfactory.net/10630 CSS / box-sizi..
