Style (7) 썸네일형 리스트형 TailwindCSS - 기본 정리 "[ 기존 css ] : tailwindCss 사용 예시" 형태로 작성했다. 크기 / 간격 및 배경 [ width ] : w-12 , w-1/2(50%) [ max-width ] : max-w-sm [ height ] : h-12 [ padding ] : p-6 [ padding-top ] : pt-0 [ padding-bottom ] : pb-0 [ padding-top + padding-bottom ] : py-10 [ margin ] : m-10 [ margin-left + margin-right ] : mx-auto [ background color ] : bg-white border [ border-width ] : border-3 [ border-color ] : border-black [ b.. React - Styled Components import styled from 'styled-components'; const Button = styled.button` background-color: #ededed; border: none; border-radius: 8px; `; function App() { return ( 안녕 Styled Components! 확인 ); } export default App; css코드로 컴포넌트를 만들고있다. 기존방식의 문제점인 클래스 이름이 겹치는 경우, 의도하지 않은 스타일이 설정될 수 있다. 재사용하는 CSS 코드를 관리하기 어렵다. 을 보완할 수 있는 방식이다. 설치 npm install styled-components 이 글에서는 styled-components 버전5를 기준으로 다룬다. styl.. React - 컴포넌트에 스타일 입히기 인라인 스타일 const style = { backgroundColor: 'pink' } function Button({children, onClick}){ return {children} ; } function Button({children, onClick}){ return {children} ; } 스타일의 속성값은 객체로 입력해야한다. 객체의 key에 '-'가 들어있는 이름은 전부 카멜케이스로 바꿔 적어주어야한다. 스타일 객체를 따로 빼지 않고, 위 예제중 2번째 코드처럼 직접 적어도 되지만 권장되지 않는다. css 파일 import //index.css body{ background-color: #191f2c; color: #fff; } // index.js import ReactDOM from .. CSS - grid 수평선과 수직선으로 이루어진 집합. 사용방법 .container { display: grid; } 기능 격자 나누기 간격 미리 크기 정하기 원하는 위치에 원하는 칸만큼 배치 이름으로 배치 1. 격자 나누기 grid-template-rows grid-template-columns grid-template grid-template-rows 와 grid-template-columns를 동시에 작성하는 것이 grid-template 이고, 문법은 아래와 같다. .container{ grid-template-rows: 100px 100px 100px 100px 100px; grid-template-columns: repeat(8, 100px); } .container{ grid-template: repeat(5,.. CSS - Flexbox 가로 또는 세로로 요소를 배치/정렬하기 쉽게하기 위한 모듈. 1차원 레이아웃 모델이므로 한 번에 하나의 차원(행 또는 열) 만을 다룬다. 사용방법 .page{ display: flex; flex-direction: column; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10em; } 기능 방향 설정 정렬 요소가 넘치는 경우 요소사이의 간격 크기를 늘리거나 줄일 때 유연한 크기를 정할 때 1. 방향 설정 flex-direction 으로 정의하며 아래 4개의 값을 가질 수 있다. row column row-reverse column-reverse * 기본축과 교차축 - flex-dirction이 row인 경우 기본축 : 행 교차.. CSS - position의 속성과 특징 * position 속성값 static relative absolute fixed sticky * 사용 방법 .page{ position: relative; top: 30px; right: 50px; } 1. static 기본값. 요소를 일반적인 문서흐름에 따라 [ 왼쪽 -> 오른쪽 , 위 -> 아래 ] 로 배치한다. top, right, bottom, left, z-index 속성이 아무런 영향을 주지 않는다. 2. relative 기준 : 원래 있던 위치 요소를 일반적인 문서 흐름에 따라 배치한다. 자기 자신을 기준으로 top, right, bottom, left 속성으로 주어진 픽셀만큼 오프셋을 적용한다. 오프셋은 다른 요소에 영향을 주지 않는다. (레이아웃에서 요소가 차지하는 공간이 static .. CSS - Cascading HTML Element는 여러 스타일의 영향을 받을 수 있으며 우선순위에 의해 적용되는 스타일이 정해지는 것을 캐스케이딩이라고 한다. CSS의 정식 명칭이 Cascading Style Sheets인 만큼, 캐스케이딩의 원리가 중요하게 적용된다. - cascading : 계단식의 작은 폭포이다. 캐스케이딩은 다음의 두 원칙을 통해 어떤 요소에 스타일을 적용할지 결정한다. 스타일 우선순위 스타일 상속 1. 스타일 우선순위 스타일요소는 각각 우선순위를 가지고 있으며 우선순위가 가장 높은 스타일이 적용된다. 다음의 세가지 요소를 통해 우선순위가 결정된다. 중요도 명시도 코드 순서 ① 중요도 중요도는 스타일이 선언된 위치에 따라서 우선순위를 매기는 것. [ 작성자 스타일 시트 > 사용자 스타일 시트 > 사용자 도.. 이전 1 다음
