전체 글 (119) 썸네일형 리스트형 [SASS] @mixin @content @include 🔺문제 @include 선언 후 추가 스타일 지정이 안됨. parent의 child 스타일 지정 안됨. .parent { @include mix() { // 스타일지정 } ( // Error ) // Error .child { } } html 구조 BOX1 BOX2 BOX3 @mixin @mixin 믹스인이름($매개변수: 기본값) { 스타일; } @include 믹스인이름(인수); @content @mixin 믹스인이름() { 스타일; @content; } @include 믹스인이름() { // 스타일블록 스타일; } @mixin position( $p: absolute; $t: null, $b: null, $l: null, $r: null ) { position: $p; top: $t; bottom: .. [SASS] Node로 sass 시작하기 1. CLI로 sass 설치 Node.js 설치가 되어 있어야 됨. npm install sass -g 로 CLI 에 설치. 2. sass 버전 확인 $ npm show sass version $ sass --version 3. 해당 디렉토리에 scss -> css 변환 $ sass style.scss style.css $ sass 입력. 폴더 안에 있을 경우, $ sass scss/style.scss style.css 4. sass 보기 , 끝내기 --watch라는 플래그를 넣어 해당 파일 자동으로 변환. $ sass --watch style.scss:style.css 아래처럼 폴더 내 모든 파일들을 컴파일할 수 있다. sass --watch : $ sass --watch scss:css sass 실시.. [GSAP] gsap 정리 정리중 간단하게 볼 수 있어서 좋다. http://302chanwoo.com/lab/tween/ https://lily-im.tistory.com/70?category=950585 gsap 한글 번역?? https://agal.tistory.com/m/210 GSAP 3 Cheat Sheet https://greensock.com/cheatsheet/ GSAP 메소드 메서드속성 Tween바로 실행되어야하는 간단한 모션만들 때 유용Timeline다양한 메서드를 사용해 모션을 컨트롤 pause(), play(), progress(), reverse(), timeScale() 등등 GSAP demo https://greensock.com/st-demos/page/3/?d=19 GSAP | properties .. 마크다운 접기/펼치기 버튼 접기/펼치기 버튼 내용입니다. 접기/펼치기 버튼 내용입니다. [Git] 3 way merge 이해하기 https://wonyong-jang.github.io/git/2021/02/05/Github-Merge.html [Git] Merge(3-way merge) 이해하기 - SW Developer 다른 형상 관리툴들과는 달리 git은 branch를 생성할 때 파일을 복사하는 것이 아니라 파일의 스냅샷만 가지고 생성하기 때문에 자원의 부담없이 branch를 만들어 사용할 수 있다. 이러한 장점 때문 wonyong-jang.github.io 개념 쉽게 정리되어 있다. [CSS] counter : css로 순번나타내기 counter 사용법 counter은 CSS에서 자동으로 번호를 매기는 역할을 한다. counter-reset 카운터이름과 시작값을 설정{ counter-reset: initial | 카운터이름/숫자 | none } initial :: 초기화 카운터로 사용할 이름 숫자를 지정하지 않으면 기본값이 0 숫자는 음수값도 가능하며 여러개의 카운터를 설정하고자 할 때 공란으로 분리. none :: 설정값이 없음(이미 설정된 것을 취소하고자 할 때 사용) counter-increment counter-reset으로 설정한 값을 증가시키는 역할{ counter-increment: initial | 카운터이름/숫자 | none } initial :: 초기화 숫자를 지정하지 않으면 기본값으로 1씩 증가 숫자는 음수값 가.. 쿠키팝업 보호되어 있는 글입니다. Meta Tag, OG(오픈그래프) 사용하기 오픈그래프(Open Graph) 콘텐츠의 요약내용이 SNS에 게시되는데 최적화된 데이터를 가지고 갈 수 있도록 설정하는 것 원리 링크라는 것이 인식되면 크롤러가 해당 웹사이트의 HTML head의 메타 데이터를 크롤링하여 미리보기 화면을 생성 프로토콜 비교적 통일된 방법으로 페이스북의 open graph 프로토콜을 사용한다. 페이스북, 네이버블로그, 카카오톡 등에서 사용하고 있는 프로토콜 open graph 문서 태그 사용법 800 X 800 또는 600 x 315 또는 1200 x 630 대다수 카톡으로 많이 url을 보내므로 800x800으로 맞추었다. 기본적으로 웹에 설정해줘야 하는 og 메타태그 네이버블로그, 카카오톡 미리보기 설정 트위터 미리보기 설정 Reference Meta Tag, OG(오.. 이전 1 2 3 4 5 ··· 15 다음