본문 바로가기
  • 커뮤니티
  • 블로그
  • 북마크

Front-end53

[SASS]vscode Live Sass Compiler 컴파일 안될때 설정 vscode에서 sass를 쉽고 간편하게 컴파일 해주는 Live Sass Compiler 확장프로그램이 있습니다. node.js와 sass를 이상없이 설치했는데, vscode에서 Live Sass Compiler로 컴파일이 안됐을때는 settings.json 파일을 확인해보셔야합니다. 참고로 node-sass 버전은 아래와 같습니다. node-sass 8.0.0 (Wrapper) [JavaScript] libsass 3.5.5 (Sass Compiler) [C/C++] 먼저 Live Sass Compiler 실행을 했는지 살펴보세요. 실행 방법은 vscode 하단에 Watch Sass로 되어있는걸, 클릭하면 Watching...로 변경됩니다. 출력창을 보시면 Watching... 으로 메시지가 보입니다... 2023. 1. 21.
[SASS]npm install node-sass 설치 에러, node.js 버전 확인 SASS 설치시 (npm install node-sass) 오류가 발생하면, 설치된 node.js 버전이 node-sass 버전을 지원하지 않을 가능성이 크다. node.js 버전이 호환되는 node-sass 버전표를 참고해보자. NodeJS Supported node-sass version Node Module Node 19 8.0+ 111 Node 18 8.0+ 108 Node 17 7.0+, 2023. 1. 18.
[VS Code]즐겨쓰는 웹프로그래밍 텍스트 편집 에디터 Visual Studio Code 웹퍼블리셔 일을 하면서, 다양한 프로그램을 사용했고, 현재도 여러 편집툴을 사용하고 있는데요. (깊숙히는 모릅니다. ㅎ) 예전에는 웹디자이너가 코딩까지 같이 했던 시절이 있었습니다. 웹표준이란 개념이 없어서 모두 레이아웃이 table로 제작할정도 였습니다. 그때는 화면을 보는게 편해서 드림위버를 사용했었습니다. 웹퍼블리셔로 일하면서 에디터플러스를 사용하다가, 맥은 에디터플러스가 없어서 서브라임텍스트를 현재도 사용하고는 있습니다만, 터미널을 연결해서 써야할 경우가 많고, 다양한 확장 프로그램이 있어서 업무용으로는 VS Code를 사용하고 있습니다. 드림위버, 에디터플러스, 서브라임텍스트, 브라켓, VS Code 을 사용하면서 어떤게 좋다 안좋다 보다 프로젝트 개발 환경에 맞는 에디터나, 본인이 사용하기에 .. 2023. 1. 17.
[javascript]유튜브 탭메뉴 별로 다르게 호출 (반응형포함) 하나의 영역에서 탭을 누르면 유튜브 영상이 탭별로 다르게 노출되게 하는 방법입니다. 먼저 script 를 사이에 삽입합니다. // youtube function getVidID(param) { var r = /(?:watch\?v=(.*)|youtu\.be\/(.*))/g; var match = r.exec(param); return match[1] ? match[1] : match[2]; } var frameBase = ''; var vidObj = [ "https://youtu.be/ktmvMZyVzWk", // data-idx 0 주소 "https://youtu.be/Decc1Apa-bU", // data-idx 1 주소 "https://youtu.be/DRJBGE-Zqj8", // data-idx.. 2022. 12. 2.
[HTML]ios(아이폰)에서 video 태그로 mp4 영상 삽입시 재생안될때 해결방법 아이폰에서 mp4 영상을 바로 호출하면 재생이 되나, video 태그로 삽입시 재생이 안되는 문제입니다. 먼저 video 태그의 속성을 살펴봅시다. 아이폰에서 autoplay 실행시 playsinline 를 추가하면 전체화면 전환없이 바로 재생이 됩니다. 즉 autoplay 를 넣을경우 playsinline 를 같이 넣어줘야한다는 의미입니다. 그래야 아이폰에서 영상이 제대로 보여집니다. autoplay : 자동재생 playsinline : IOS 자동재생 그리고 자동재생을 하기 위해서는 muted(음소거) 도 같이 넣어줘야합니다. 예제) 영상이 안보일시 포스터도 넣어보세요. 썸네일 사이즈가 맞지 않는다면 CSS에 poster 사이즈를 100%로 줍니다. video[poster]{width:100%} 2022. 11. 29.
[Vue.js]vue 시작하기 - 설치 및 실행 맥(Mac) 기준으로 설명하겠습니다. vue를 시작하려면 vue js를 설치해줘야합니다. 그전에 node.js 를 먼저 설치해주세요. 설치방법은 vs code 에 터미널이나 맥 기본 프로그램 터미널을 이용하시면 됩니다. 저는 편집툴을 vs code를 이용하기 때문에 vs code 터미널을 사용하겠습니다. https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free an.. 2022. 11. 25.
[Vue.js]vue 설치시 sudo: npm: command not found 에러 문구 해결방법 맥북에서 vue 설치시 터미널에서 sudo npm install -g @vue/cli 명령어를 입력하면, sudo: npm: command not found 문구가 나올때 해결 방법입니다. 여러가지 방법이 있겠지만, 해결이 안될경우 node js 공홈(https://nodejs.org/ko/)에서 .pkg 파일을 다운받아서 설치를 해주세요. Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 그리고 sudo npm install -g @vue/cli 명령어로 실행하면 제대로 설치가 됩니다. 2022. 11. 25.
[CSS]세로 두줄이상일때 말줄임 처리하기 예전에는 제목이나 글자수를 ... 줄일때는 개발에서 처리를 했었습니다. CSS에서 기능이 지원되면서 한줄 말줄임은 대부분 CSS에서 처리를 하게 되었습니다. 가끔 두줄일때도 말줄임을 할때가 있는데요. 그럴땐 아래처럼 하시면 됩니다. text{ height:50px; text-overflow:ellipsis; word-wrap:break-word; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden } -webkit-line-clamp:2; 두줄일땐 2, 세줄일땐 3으로 하시면 됩니다. (세로 높이값은 꼭 넣어야합니다.) 위처럼 두줄일때 말줄임... 처리가 됩니다. 만약 한줄일경우는 아래처럼 하시면 .. 2021. 3. 29.

티스토리툴바