Dust

대문자 소문자 신경써야하나,, ?

일단 바꿔서 다시 푸시 했다 하루종일 로딩중임..!

https://min-ji07.tistory.com/entry/React-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%9D%B4%EB%8F%99-props-%EB%A0%8C%EB%8D%94%EB%A7%81?category=926976 

적당히 팝업 모양을 만들어 준 후 위 페이지 참고해서 불러온다 !

팝업 관련 내용 ( 팝업 열고 닫기 등 )을 추가 해주면 됨

import React from 'react';
import 지정텍스트 from '파일위치';
// import Popup from './Popup';

const Main = (props: {}) => {
  const {} = props;
  const [popup, handlePopup] = useState(false);
  // false --> 팝업 비활성화
  return(
      <div>
        ~ 본문 내용 ~
        ~
        ~ ~
        ~
        // 버튼 클릭시 팝업 활성화
        <button type="button"
          onClick={() => {
            handlePopup(true);
            // true --> 팝업 활성화
            }}>
            팝업켜기
        {popup && <Popup onClose={handlePopup} />}
        // 팝업 컴포넌트 내에 팝업 닫는 변수? 가 있어야함
      </div>
  )

팝업 컴포넌트

import React from 'react';

const Popup = (props: { onClose: any; }) => {
  const { onClose } = props;
  // 팝업 닫기
  
  return (
   <div>
     팝업 내용
   </div>
   );
 }
 
 export default Popup;

따란

지원되는 브라우저

chrome, edge, Firefox, opera, safari, samsung internet, IE

이미지 크기를 조정하여 선명하게 보이도록 함

크기 조정되지 않는 이미지는 적용이 불가능

예시

class{
    image-rendering: -moz-crisp-edges;		/* Firefox */
    image-rendering: -o-crisp-edges;		/* Opera */
    image-rendering: -webkit-optimize-contrast;	/* chorme */
    image-rendering: crisp-edges;				
    -ms-interpolation-mode: nearest-neighbor;	/* IE */
}

화면이 커질수록 이미지가 깨져서 속성을 추가하려고 보니 일일이 추가 하기가 막막해서 찾아본 결과

[class^="i-"]{
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
}

속성참고

https://min-ji07.tistory.com/entry/CSS-image-rendering-%EC%9D%B4%EB%AF%B8%EC%A7%80%EB%A5%BC-%EC%84%A0%EB%AA%85%ED%95%98%EA%B2%8C

이렇게 사용이 가능했다 굿,,!

더 알아보고 싶어서 검색하는데 검색에 안걸림 ..

..검색하는 법 아시는 분 알려주시면 감사하겠습니다

참고

https://www.w3schools.com/cssref/css_selectors.asp

오ㅐ 안열리나 했더니 프로젝트 말고 ios 파일에서 열어야 했다

난 바보였다