단아산보

scss sass 등 css 스타일을 간단하게 사용 할수 있는 코드를 사용 하려면 react 나 vue 에서는 설치만 하면 바로 사용이 가능하지만 php 에서는 css 파일로 컴파일을 해줘야 한다.

vscode 에서 작업 중 이라면 Live sass Compiler 플러그인을 설치하면 저장할때 자동 컴파일 설정을 해두면 자동으로 컴파일이 되고 css 파일도 생성이 된다. 

이때 별도로 설정을 하지 않는다면 scss 파일이 있는 폴더 내에 동일한 이름으로 생성이 되는데 css 폴더만 별도로 분리해서 관리 하고 싶다면 설정을 아래와 같이 주면 된다. 

savePath 에 경로를 설정해주고 한참 찾았는데 "liveSassCompile.settings.autoprefix"  이 부분도 빈 배열로 넣어 주어야 아이폰등에서 적용 되는 코드가 같이 생성이 된다. 이 값이 없을 경우는 아이폰 파이어폭스 등에서만 적용이 되는 코드는 생성이 되지 않는다. 요즘 버전 업이 많이 되어서 그거 불필요한 코드 이긴 하지만 다양하 브라우저에서 대응하게 하고 싶다면 위 설정도 넣어 주는것이 좋다. 

    "git.enableSmartCommit": true,
    "editor.formatOnSave": true,
    "liveSassCompile.settings.formats": [
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "~/../css",
            //"savePath": null, 
            "savePathReplacementPairs": null
        }
    ],
    "liveSassCompile.settings.generateMap": false,
    "liveSassCompile.settings.useNewCompiler": false,
    "liveSassCompile.settings.autoprefix": [
    
    ],

php 에서도 컴포즈 같은걸로 다운 받으면 바로 자동 컴파일이 되면 좋겠지만 아쉽지만 요렇게 저장만 누르면 자동으로 컴파일을 해주니 상당히 편리한거 같다. php 는 곧 없어질거 같았지만 아직 의외로 많은 곳에서 쓰고 있고 버전업도 계속 되고 있어서 리액트나 뷰 처럼 변수가 동적으로 움직이는 시스템이 된다면 상당히 경쟁력이 있을거 같은데 그 점을 제외하면 서버비용도 저렴하고 코드도 쉽고 페이지도 빠르게 떠서 좋은거 같다. 

동영상 태그 시 다운로드 버튼을 막고자 한다면 

controlsList="nodownload"

속성을 video 태그에 추가해 주면 된다. 

<video controls autoplay controlsList="nodownload" oncontextmenu="return false;">
    <source src="PAA.mp4" type="video/mp4" />
</video>

동영상 태그 html 코드 예시는 위와 같다. 

https://yoksel.github.io/url-encoder/

vscode 에서 svg 파일을 열면 

태그로 확인이 가능하다 해당 태그를 복사해서 붙여 넣으면 위 사이트에서 코드를 변환해 준다. 

.img-goods-small{width:40px;height:40px;object-fit: cover}

가로 세로 사이즈를 주고 해당 영역에 이미지가 cover 되게 

비율 틀어짐 없이 꽉 차게 나옴

비율이 다를 경우 상하 좌우 가 조금씩 잘릴 수는 있음

 img { transform: scaleX(-1); }

애니메이션 부드럽게 효과

 img { transform: scaleX(-1); transition: .3s; }