CSS (25) 썸네일형 리스트형 Styled-Components global reset // styled-components 패키지 다운 npm install styled-components// typescript 사용시 다운npm install --save-dev @types/styled-components//styled-reset 패키지 다운npm install styled-resetscr/styles.reset.ts or reset.js // 글로벌 스타일 만들기 위해서 importimport {createGlobalStyle} from "styled-components";// 스타일 초기화를 위해 reset 불러오기import reset from "styled-reset";const GlobalStyles = createGlobalStyle` ${reset} /* reset styl.. box-shadow box-shadow 해당 요소에 그림자를 넣는 속성입니다. none : 그림자가 표시되지 않음 (기본값) px,em,rem 등의 값 색상값 initial : 디폴트 값 속성 설정 inherit : 부모 요소로 값 상속 //첫번째 값 : 수평 방향의 그림자 오프셋 길이. 양수 값을 지정하면 오른쪽, 음수값이면 왼쪽 //두번째 값 : 수직 그림자 오프셋 길이. 양수 값을 지정하면 아래, 음수값이면 위 //세번째 값 : 그림자 흐림 반경을 나타냄. 양수값만 허용, 값이 클수록 흐려짐 //네번째 값 : 그림자의 확산 거리. 양수 값을 지정하면 정방위로 확대, 음수값이면 크기가 줄어듬 //다섯번째 값 : 그림자의 색상 지정 div { box-shadow: 1px 3px 7px 5px rgba(0, 0, 0, 0... 텍스트 처리 text-overflow 텍스트가 컨텐츠 밖으로 넘칠 때 텍스트 어떻게 처리할지 지정하는 속성 inline 속성은 속성을 block 혹은 inline-block 설정 width 혹은 height가 고정적 overflow: hidden 사용 텍스트가 내려가는 것을 막기 위해 white-space: nowrap 등이 필요 clip : 텍스트를 자름 (기본값) elipsis : 잘린 텍스트를 생략 부호(...)로 표시 string : 잘린 텍스트 지정한 문자열로 표시, "지정할 문자열"; p { text-overflow: elipsis; } white-space 요소가 공백 문자를 처리하는 법을 지정하는 속성 normal nowrap pre pre-wrap pre-line break-spaces p { whi.. grid grid 그리드는 주요 페이지 영역을 설계 혹은 배치할때 사용합니다. 고정된 레이아웃을 만들기 위해서는 px 단위 사용을 하고, 가변적인 레이아웃을 제작하기 위해서는 퍼센트 혹은 grid의 fr 단위로 지정해서 유연하게 제작할 수 있습니다. div { display : grid; } div { display : inline-grid; } grid-template-columns 명시적 행의 크기를 정의 fr repeat px auto div { display: grid; grid-template-columns: 1fr 2fr; } grid-template-rows 크기 조정 기능을 정의 fr repeat px auto div { display: grid; grid-template-rows: 1fr 2fr; } flex box flex box 플렉스박스 레이아웃 모듈은 우리가 원하는 순서나 방향에 따라 플렉스 항목들이 나타나게 할 수 있고 실제 마크업된 순서와 상관없이 별개로 동작하기 때문에 접근성에 제약을 받지 않는다는 점입니다. 또한 플렉스 박스 모듈은 정렬을 제어하는 능력을 가지고 있습니다. div { display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webk.. web font web font @font-face 웹 브라우저에게 서체 이름과 다운받을 위치를 알려줍니다. IE6~8 지원해야 할 경우 eot요청해서 woff 보다 먼저 화면에 표시하기 font-family : 원하는 글꼴 이름 선언 local(※) : 값은 외부 자원을 참조하기 이전에 시스템에 설치된 글꼴을 우선 참조할 수 있도록 만들어 준다. font-weight : 굵기 설정 (보통 서체에서 굵기가 들어가있기 때문에 normal 추천) font-style : Serif, Sans-Serif, italic 등 @font-face { font-family: AppleSDGothicNeoB; src: local(※), url("/assets/font/AppleSDGothicNeoB.eot") format("eot"),.. animation animation CSS3 애니메이션은 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜 줍니다. // 단일 속성 .div { animation-name : name; animation-duration : 2s; animation-delay : 5s; animation-direction : alternate; animation-iteration-count: 3; animation-play-state: paused; animation-timing-function: 1s; animation-fill-mode: both; } // 속기형 animation : name | duration | timing-function | delay | iteration-count | direction |.. calc() calc() CSS 함수를 사용하면 CSS 속성의 값으로 계산식을 지정할 수 있습니다. section { min-height: calc(100vh - 230px); } 연산자 + : 더하기 // 좌우 공백 필수 - : 빼기 // 좌우 공백 필수 * : 곱하기 / : 나누기 계산순서 왼쪽에서 오른쪽 계산 곱셈과 나눗셈 먼저 계산, 덧셈과 뺄셈은 나중에 괄호가 있다면 우선 계산 브라우저 호환성 이전 1 2 3 4 다음 목록 더보기
