Avartar 컴포넌트를 imgSrc의 숫자만큼 만들어 렌더링 한다 이때 map으로 생성된 컴포넌트 배열을 담아서 리턴하면 된다. 실제로 화면에는 함수를 실행시켜 렌더링 해준다

약간 헤매서 정리 1) 공통으로 적용될 컴포넌트가 없을때 - if문 사용 2) 공통으로 적용될 컴포넌트가 있을때 - 삼항 조건 연산자 사용

이렇게 생긴 컴포넌트 기준 root에서 & 선택자로 셀렉트 하면 된다

배경화면 넣는 속성 1) background-image - 입력 이미지 설정 - url(이미지) 형태로 입력 2) background-size - 가로와 세로 길이를 입력 - background-size: 10px 10px 형태로 입력 - cover속성: 배경을 사용하는 요소를 다 채울 수 있게 이미지를 확대 또는 축소합니다. 가로 세로 비율을 유지합니다. 얘는 이미지가 최대한 크게 보여진다는 뜻.(웹페이지 전체 배경에 사용하기 좋음) - contain속성: 배경을 사용하는 요소를 벗어나지 않는 최대 크기로 이미지를 확대 또는 축소합니다. 가로 세로 비율을 유지합니다(어플 배경에 사용하기 좋음) 3) background-repeat - 배경화면의 반복에 대한 설정 - no-repeat으로 해두면 하나만 ..

Z-index는 여러가지 컴포넌트가 겹쳐있을때 순서를 정하는 property이다 Z-index가 큰 순서대로 화면 최상단에 나타난다 예컨데, 배경화면 컴포넌트와 버튼을 겹치게하고 배경화면 컴포넌트의 z-index를 더 크게 주면, 버튼이 눌리지 않는다 배경화면이 앞서 렌더링되기 떄문이다 하지만 z-index의 Stacking Context(쌓임맥락)이 상당히 복잡해서 내 맘대로 정하기가 힘들었다 대략적으로 Stacking Context에 영향을 주는 요소를 보면 1) position 2) opacity나 transform 3) 부모요소 이렇게 세 가지 정도가 영향을 크게 끼치는 듯 한다 1)에 대해서는 z-index를 정하기 전에 항상 position을 정해주면 된다. 2)에 대해서는 해당 컴포넌트의 p..

참고자료:blog.hivelab.co.kr/%EA%B3%B5%EC%9C%A0before%EC%99%80after-%EA%B7%B8%EB%93%A4%EC%9D%98-%EC%A0%95%EC%B2%B4%EB%8A%94/ [공유]::before와::after, 그들의 정체는? [공유]::before와::after, 그들의 정체는? 안녕하세요! UI개발2팀 조가영입니다. 무려 10주에 걸쳐 진행한 OJT. 면수습 후 OJT의 꽃인 블로깅을 작성하려니 감회가 더욱 새롭네요! 과제를 하던 중 발견한 blog.hivelab.co.kr www.youtube.com/watch?v=wTUMrLAbREo 리턴하는 화면에서는 tiledBackground만 렌더링하였지만 ::before 선택자가 처리되어, 실제 tiledBack..