Muscardinus

Position에는 static, fixed, relative, absolute가 들어갈 수 있다 Position: fixed 현 위치에 무조건 고정이 된다 Position : absolute display가 inline-block으로 바뀜 inline-block에서는 width와 height가 없으므로 설정 해 줘야한다 absolute를 주면 부모의 height가 사라짐(부모에게 height 값이 설정 되어 있지 않으면 자식의 크기에 따라 유동적으로 변함) -> 부모에게 height를 선언해주거나 overflow: hidden을 줘서 height를 다시 살려 줌 Position: relative absolute를 위해서 존재한다. absolute의 부모로 보면 된다 absolute 선언 된 elemen..

Copyright from https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

before after 하면 inline요소 inline요소는 값을 안 주면 크기가 없다 가운데를 기점으로 퍼지기 .gnb a:before { content: ''; position: absolute; background-color: crimson; height: 1px; width: 1px; bottom: 0; left: 50%; transform: translateX(-50%); transition: .3s; } .gnb a:hover:before { /* left: 0; */ width: 100%; } 글자 사이 간격 주기 hover 할때 letter-spacing: 3px; Checkbox 만들기(글씨 클릭해도 체크 되기) 약관을 충분히 이해했으며 동의 합니다. 더 선호 약관을 충분히 이해했으며 ..

크롬 확장 프로그램 page ruler redux -> layout의 크기값 확인 필요 시 gallerify powerful image -> 지금 다운 안됨 cssViewer -> 대상 css 확인 colorzilla -> 색 추출 mobile rwd tester -> 모바일 nimbus 화면 캡쳐 영상 text-transform: uppercase; scroll animation 주기 a tag의 href에 대상의 id 값 넣기 ex) #part1 #xxxx -> 현재문서의 id가 무엇인 값 # -> 가장 상단으로 가기 Scroll 부드럽게 하기 JQuery 방법 $('선택자').click(function(){ $.scrollTo(this.hash || 0, 900); e.preventDefault()..

video 영상 넣기 왠만하면 div 안에 video 넣기 속성 :autoplay, muted, loop poster -> 이미지 넣어주는 속성 (비디오 안 나올때 대체 사진) min-width/ min-height 최소 너비 높이 html상 동영상은 맨 위에 있음 z-index: -1로 바꿔줌 위치를 letter-spacing -> 글자마다 간격 주기 animation: showing 2s 1s linear; time delay animation-fill-mode: both; position: absolute 를 주면 inline-block으로 바뀜 inline-block에는 width와 height가 없으므로 내가 줘야한다 animation을 줄때는 같은 속성을 줘야하기 때문에 top이면 top으로 ..

filter: grayscale(1); img에 흑백 넣기 filter: none; / filter: grayscale(0); 돌아오기 자기만의 속성주기 data-xxx 이것과 다른 element의 id와 연결 $('#'+$(this).attr('data-alt')).addClass('active'); 자신것 active class 넣고 나머지 빼기(siblings) $(this).addClass('active'); $(this).siblings().removeClass('active'); input 겉에 테두리 focus 없애기 outline: none; 해당 element 값 받기 var num = $('#id').val(); jQuery prev()/prevAll()/next()/nextAll() ..

margin 0으로 하는 방법 font-size: 0 가능 position을 absolute, fixed 같은 것으로 바뀌면 붕떠서 부모의 height 사라짐 이를 보완해야함 label에 css 줄려면 부모가 선택되어 있어야함 linear-gradient(방향,처음,나중) position relative 2개가 있으면 나중께 위로 올라옴 background-attachment: fixed 배경이 고정된 느낌 주기

before after는 inline 요소 border에 animation을 줘서 크기 늘렸다가 줄였다가 못함 -> before,after 사용 center 정렬 방법 display: inline-block float: left; text-align: center 부모 display: flex 자식 flex: 1; text-align: center; ------------------------------------ display: flex 하면 div도 block에서 inline-block으로 바뀜 부모 입장에서 overflow 되어있으면 overflow: hidden relative가 absolute보다 우선 순위권 높다 부모 요소 position: relative 자식 요소(before, after)..