분류 전체보기 (138) 썸네일형 리스트형 white-space white-space: normal은 줄바꿈을 하는 기본 값이다. 연속된 띄어쓰기, 들여쓰기, 줄바꿈 문자는 무시된다. white-space: nowrap은 줄바꿈하지 않고 한줄로 나타낸다. white-space: pre는 입력한 그대로의 값을 넣을 수 있다. 연속된 띄어쓰기나 사용자의 줄바꿈이 적용된다. white-space: pre-wrap은 pre처럼 작동하면서도 긴 텍스트는 자동으로 줄바꿈한다. CSS의 white-space 속성 사용법 Engineering Blog by Dale Seo www.daleseo.com Object-fit object-fit: cover은 빈 곳 없이 꽉 차있게 한다. 이미지가 잘려 보일 수 있다. object-fit: contain은 이미지의 비율을 유지하므로 꽉 차있지 않을 수 있다. object-fit: none은 이미지의 본래 크기만큼 보여준다. object-fit: scale-down은 이미지가 영역보다 작으면 none처럼, 크면 contain처럼 작용한다. CSS의 object-fit 속성으로 이미지를 왜곡없이 보여주기 Engineering Blog by Dale Seo www.daleseo.com Event: 실행 위치 예외처리 현재 이벤트를 준 곳(event.currentTarget)을 target하면 실행하지 않는다. Styled-Components: 조건부 스타일링 Styled-Components의 props로 조건부 스타일링 flex: 1 flex: 1; => flex-grow:1 flex-shrink:1 slex-basis: 0% 화면 비율에 따라 유연하게 늘어나거나 줄어들 수 있다. div에 가로로 글을 쓸 때 css로 넣어주면 세로로 쭉 늘어날 수 있게 한다. GlobalStyle: box-sizing GlobalStyle CSS 설정. padding 등을 모두 합해 width, height로 나타날 수 있게 한다. Route 기타경로, 뒤로가기 설정 Route 환경설정 그 외의 경로(*)로 들어올 때 home("/")으로 이동한다. 뒤로가기가 작동하게(replace) 한다. 없으면 다시 home으로 이동하게 되므로 무한 루프에 빠진다. 절대경로 설정 src 경로를 중점으로 절대경로로 표시 가장 바깥 폴더에 jsconfig.json 파일을 생성한다. 아래의 코드를 적는다. Typescript: interface interface는 변수의 타입을 지정할 수 있다. 자주 사용하는 변수의 경우 사용하면 편리하다. 자주 사용되므로 각각의 컴포넌트마다 필요할 때가 있는데, props로 넘겨줘야 하는지 고민했었다. 결론적으로 interface도 export해서 사용할 수 있었다. Typescript: 변수, 타입 변수의 타입을 명확하게 지정함으로서 가독성을 높이고 협업을 원활하게 한다. 변수의 종류 1. let 등호(=)를 사용하여 값을 변경할 수 있다. 2. const 등호(=)를 사용하여 값을 변경할 수 없다. 3. readonly 객체의 속성을 불변하게 만들기 위해 사용된다. 변수의 타입을 선언할 때 붙여서 사용한다. 클래스 내부에서는 const 선언이 되지 않기 때문에 에러를 발생시킨다. 타입의 종류 1. boolean true/false 값을 나타내기 위해 사용된다. 예) 로그인 되어있는가? 2. number 모든 숫자를 나타낸다. 소수, 정수, 실수 등 모두 해당한다. 3. string 문자열을 나타낸다. 텍스트에 대한 연산을 할 수 있다. 4. 배열 같은 타입의 나열을 사용할 수 있다. 사이에 다른 .. 이전 1 ··· 8 9 10 11 12 13 14 다음
