IT공부

[React] Styled Component 이해하기

Styled Component 이해하기 Styled Component란? 예시 심화 Styled Component란? 기존에 사용하던 HTML의 태그를 style을 설정하여 component로 만든 것을 Styled Component라고 합니다. 이러한 Styled Component를 만드는 방법은 아래의 코드와 같습니다. Styled Component를 사용하기 위해서는 styled-components라는 패키지를 다운로드하여야 합니다. 다운 방법은 npm i styled-components라는 명령어를 통하여 다운 가능합니다. const 컴포넌트 이름 = styled.적용할 태그 이름` 적용할 스타일 ` ``(탬플릿 리터널) 사이에 적용할 스타일을 입력하시면 됩니다. 적용할 태그는 HTML의 태그를 ..

[JS] 배열의 메서드 map 이해하기

map 이해하기 map이란? 순서도(플로우 차트) 예시 map이란? map은 '지도'라는 영어 표현으로 익숙하지만 '발견하다.'라는 표현도 있습니다. 여기에서는 '지도'보다는 '발견하다.'라는 뜻에 가깝습니다. 특정한 값을 입력하여 배열에 지정한 값과 같은 값을 가지고 있으면 true로 아니라면 false로 변환된 모습의 배열을 결과로 반환해줍니다. 입력한 값을 배열에서 발견하는 작업이라고 볼 수 있습니다. 배열 명.map((매개변수)=>{ 실행하 내용; retrurn 출력할 내용; }); 1. 배열의 첫 번째 요소를 매개변수로 입력해줍니다. 2. 실행할 내용을 실행합니다. 3. 출력할 내용을 저장합니다. 4. 배열의 다음 요소를 매개변수로 입력합니다. 5. 배열의 다음 요소가 없을 때까지 2~4를 반복..

[CSS] transfrom 이용하기

transfrom 이용하기 transfrom이란? transfrom의 translate (상하좌우 이동) transfrom의 scale (크기 조절) transfrom의 rotate (회전) transfrom의 skew (왜곡) transfrom이란? transfrom은 특정 요소를 움직이고 싶거나 회전을 시키고 싶거나 크기를 조절 혹은 왜곡하게 해 줍니다. 사용방법은 아래에 translate, scale, rotate, skew순으로 설명과 예시를 보이겠습니다. transfrom의 translate (상하좌우 이동) 위의 예시처럼 요소를 위, 아래, 왼쪽, 오른쪽으로 이동시키고 싶은 경우에 transfrom의 함수인 translate(), translateX(), translateY()를 이용하여 이동..

[CSS] background 이미지 넣기

background 이미지 넣기 background-image란? background-image의 이미지 크기 정하기 background-image의 이미지 반복 처리 background-image란? background에 색상 대신 이미지를 넣고 싶은 경우 background-image를 이용하여 이미지를 넣을 수 있습니다. 이미지를 넣는 방법은 style의 값으로 background-image : url(이미지의 주소)를 주면 됩니다. See the Pen Untitled by rainbowbear (@rainbow96bear) on CodePen. background-image의 이미지 크기 정하기 background-image의 크기를 조절하기 위해서 div의 사이즈를 조절하면 이미지를 띄울 공간..