오늘은 마이페이지 디자인이 전체적으로 나와서 css를 만졌다.
image import
피그마의 사진을 처음 export 해봤다!
이미지를 저장한 뒤, 프로젝트 파일에 옮겼다.
위치는 src > public > img 가 보편적이라고 한다.
그리고 이미지를 쓰려면 import 해와야 하는 줄 이제 알았다.. ㅎㅎ..
import 해 온 것을 쓰기 위해선 src=""가 아닌, src={}로 함수를 부르듯이 넣어야한다!
component Props
컴포넌트에서 컴포넌트로 props를 전달해주는 방법이다.
예제 1)
Abc의 test = "test"의 좌변 test가 props의 이름이다!
좌변 test 라는 props로 "test"라는 값을 전달해주는 것이다.
그래서 props를 받아올때는 매개변수에 props를 작성하거나,
{test} 라고 중괄호를 입혀 매개변수에 넣으면 된다.
예제 2)
props 의 이름 : isActive
props 가 전달하는 값 : {true}
--> styled-component 에서 사용할 수도 있다!
${(props) => props.isActive ? "" : ""}혹은
${({isActive}) => props.isActive ? "" : ""}이런 식으로 props 를 넣어서 코드를 짤 수 있다.
Styled-Components Props
예제 1)
버튼이 클릭될때마다 true, false가 적용되는 useState를 만들었다.
stryled-components 에서
background-color 에만 이를 적용시키기 위해 삼항연산자를 사용했다.
예제 2)
styled-components 의 css를 import 해온다.
그리고 백틱과 삼항연산자를 활용해 적용될 css를 구분한다.
&& 를 활용하는 단축평가도 있지만, 이것은 나중에 깊게 다뤄봐야겠다.
나는 이런식으로 버튼의 배경색과 글자색이 바뀔 수 있게 활용해봤다 !
pointer-events
: HTML 요소들의 마우스/터치 이벤트들(CSS hover/active, JS click/tap, 커서 드래그등)의 응답을 조정할 수 있는 속성
여기서 textarea 값을 클릭해도 활성화시키지 않기 위해 여러 방면에서 구글링해봤다.
readonly, disabled 등의 속성도 있었지만 나는 pointer-events 를 사용해봤다.
< pointer-events 속성 종류 >
- none : HTML 요소에 정의된 클릭, 상태(hover,active등), 커서 옵션들이 비활성화한다.
- auto : 비활성화된 이벤트를 다시 기본 기능을 하도록 되돌린다.
- inherit : 부모 요소로부터 pointer-events 값을 상속받는다.
나는 여기서 textarea 값 비활성화 : none, 활성화 : auto 를 사용해서 코드를 짜봤다.
textarea 의 resize : none
input tag는 한줄까지 입력할 수 있고, textarea tag는 여러줄까지 입력할 수 있다.
늘 input 만 이용해왔었는데, 오늘 처음으로 textarea를 사용해봤다.
여기서 사이즈가 수정되지 않게 하려면 resize: none 라는 속성을 사용해야 한다.
< resize 속성 >
resize: none; /* 사용자 임의 변경 불가 */
resize: both; /* 사용자 변경이 모두 가능 */
resize: horizontal; /* 좌우만 가능 */
resize: vertical; /* 상하만 가능 */