Web

[Carrot-Market] #4 TAILWIND - 1

TailwindCss TailwindCss는 아주 크고, 대빵 큰 CSS파일이라고 보면 됩니다. 많은 클래스 네임을 가지고 있는 겁니다. 이를 가지고 우리는 아름다운 많은 것을 만드는 겁니다. 먼저 vscode에서 tailwind intelisence를 설치 해야지 개발에 수월하다. TailwindCss Utils 일단 기초적인 TailwindCss의 문법에 대해서 알아보겠다. 그리고 내가 알아낸 것인데, Tailwindcss도 styled-component처럼 작성할 수 있다. 바로 tailwind-styled-components를 깔면 된다. npm i -D tailwind-styled-components 그리고 아래와 같이 import해서 사용 가능하다. import tw from "tailwind..

[Carrot-Market] #3 SETUP

NextJS SetUp NextJS를 우선 typescript로 개발하기 위해 아래 명령어로 프로젝트를 생성하도록 하겠습니다. npx create-next-app@latest --ts 이 상태로 package.json을 가서 react18이 깔려 있는지 확인 후에, 17버전이 깔려있다면 rc로 다시 깔아주도록 합니다. TailwindCSS Setup npm install -D tailwindcss postcss autoprefixer 그 다음에 프로젝트 폴더에 postcss.config.js, tailwind.config.jsl가 생성되었는지 봅니다. tailwind.config.js module.exports = { content: [ "./pages/**/*.{js, jsx, ts, tsx}", "...

Advanced Web Programming - CSS (2)

박스 모델 기본적인 CSS3의 box-model은 위와 같습니다. 테두리 속성 box-model에서 가장 흔히 사용되는 테두리 스타일의 속성은 다음과 같습니다. 박스 속성 박스의 둥근 모서리 속성값은 위와 같이 설정합니다. 박스의 그림자를 설정하는 기본적인 css구문은 아래와 같습니다. index.html main.css *, *:before, *:after { box-sizing: border-box; margin: 0; padding: 0; } #box-shadow { margin: 10px 20px; } #box-shadow img[src*="jpg"] { width: 300px; height: 200px; object-fit: cover; padding: 20px; ma..

Advanced Web Programming - CSS (1)

CSS의 위치 css는 인라인 스타일 시트, 내부 스타일 시트, 외부 스타일 시트로 작성할 수 있습니다. CSS우선순위 CSS의 우선순위는 인라인 스타일 > 내부 스타일 시트 > 외부 스타일 시트 > 브라우저 기본 스타일 순으로 적용됩니다. 또한 인라인 스타일 시트가 아래와 같이 중복될 경우 p { color: blue; } p { color: yellow; } p { color: red; } 우선순위와 상관없이 강제 적용 p { color: blue!important; } p { color: yellow; } p { color: red; } 다음과 같이 우선순위와 상관없이 강제 적용이 가능하다. CSS 선택자 css의 선택자에는 전체 선택자, 타입 선택자, 클래스 선택자, 아이디 선택자, 속성 선택자가..