Css

Tailwind Css 프레임워크로 빠르고 효율적으로 css를 설정할 수 있는 툴이다. Tailwind Docs Installation tailwind 모듈 설치 npm install -D tailwindcss@latest 명령을 사용하여 설치가 가능하다. npx tailwindcss init 명령을 사용하면 현재 경로에 tailwind.config.js 파일이 생성되며, 현재 프로젝트에서 tailwind를 적용할 수 있게 된다. tailwind.config.js 파일은 다음과 같이 구성된다. module.exports = { // 포함할 항목 content: ['./src/**/*.{html,js,jsx,ts,tsx, mustache}'], // 제외할 항목 (최신 버전에서 사용되지 않는 문법) // purge: ["./src/**/*.html", "./src/**/*.js"], // jit mode는 purge와 함께 세트로 사용되었고, 세트로 사라졌다.(?) // mode: process.env.NODE_ENV ? 'jit' : undefined, darkMode: 'class', // [false, 'mdeia', 'class'] theme: { fontFamily: { display: ['Open Sans', 'sans-serif'], body: ['Open Sans', 'sans-serif'], }, extend: { fontSize: { 14: '14px', }, backgroundColor: { 'main-bg': '#FAFBFB', 'main-dark-bg': '#20232A', 'secondary-dark-bg': '#33373E', 'light-gray': '#F7F7F7', 'half-transparent': 'rgba(0, 0, 0, 0.5)', }, borderWidth: { 1: '1px', }, borderColor: { color: 'rgba(0, 0, 0, 0.1)', }, width: { 400: '400px', 760: '760px', 780: '780px', 800: '800px', 1000: '1000px', 1200: '1200px', 1400: '1400px', }, height: { 80: '80px', }, minHeight: { 590: '590px', }, backgroundImage: { 'hero-pattern': "url('https://demos.wrappixel.com/premium-admin-templates/react/flexy-react/main/static/media/welcome-bg-2x-svg.25338f53.svg')", }, }, }, plugins: [], }; tailwind는 react와 같은 framework에서는 자동으로 적용이 가능하지만, 그 외의 경우에는 postcss 등과 같은 모듈의 도움이 필요하다. tailwind 모듈 설치와 tailwind.config.js 구성이 끝났다면, tailwind로 작성된 css를 코드에 추가해줘야 한다. index.css에 아래 구문을 추가한다. @tailwind base; @tailwind components; @tailwind utilities; postcss ...

CSS 특정 개체에 효과를 부과한다. 이를 declaration 이라 칭한다. 중복의 제거 가능, 유지보수 수월, 가독성 증가 위에서 부터 아래로 읽어가며 효과 적용, 중복 불가능한 효과에 대해서는 이전 효과가 사라짐 tag 선택자 < calss 선택자 < id 선택자 로 우선 순위가 높다. html 문서 안에 <style> 태그 안에 작성 가능 ex ) <style> a { color:black; } </style> 태그의 종류별로 속성 설정 가능 여기서 태그 a 는 선택자(selector)라고 한다. 선택자는 ,로 구별하여 함께 사용 가능 ...

This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme. ...