Muscardinus

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)..

/*CSS Animation*/ animation: keyframe duration delay(지연 유무 없으면 값 생략) linear(부드럽게) infinite(무한 반복); Animation 개발 순서 1.CSS로 모양을 다 만들고 2.keyframe 제작 3.animation에 적용 keyframe에서 animation할때 하나의 %에서 다른 %로 연결시 적용 속성이 같아야함 animation-delay: s calc(100% - 10px) animation-direction: reverse -> 거꾸로 animation 행동 (반시계 등) border radius 찌그러짐 주기 border-radius: 40% 60% 65% 35% / 40% 45% 55% 60%; hover 응용 잘 생각 .sq..

/*CSS 박스 모델(width,height,padding,margin)*/ box-sizing: border-box -> 초기 너비 값에 추가 된 패딩 , 경계 값 모두 포함 값 (width 와 height가 최종 길이 값이 됨) 중요함!!(초기에 설정된 width와 height값을 기준으로 border padding을 넣는다) /*그림자 속성*/ box-shadow: (inset) offset-x offset-y blur color (필수 x) 필수 x축 이동거리 y축 이동거리 퍼짐정도 색상 inset: 안쪽 그림자 offset-x: +면 왼쪽에서 오른쪽 offset-y: +면 위쪽에서 아래쪽 blur: 그림자 부드럽게 color: 그림자 색깔 text-shadow : offset-x offset-y..