프론트엔드 스터디

안보이다가 호버하면 반응하는 SVG 애니메이션 효과 1.stroke-dasharray값 찾기 stroke-dasharray속성에 마우스를 대고 키보드 ↑키를 꾹 눌려준다. 2.stroke-dashoffset을 동일하게 설정 main{ width:250px; height:250px; background-color: yellow; } main svg{ width:100%; height:100%; } svg path{ fill:transparent; stroke:black; stroke-width: 10; stroke-dasharray: 1717; stroke-dashoffset:1717; transition:2s; } 3.hover효과 적용 main svg:hover path{ stroke-dashoffse..

1.stroke-dasharray svg의 점선을 만들어주는 코드 stroke-dasharray가 10이면 시작지점부터 10까지 점선을 만들고, 10만큼 간격을 띄운 후 다시 점선을 만든다. 2.stroke-dashoffset stroke-dasharray의 시작 지점을 정하는 코드 특이한 점은 0으로 향해야 앞으로 가는 애니메이션 효과가 있다. (반대로 처음에 0으로 설정하고, hover효과에 dashoffset 값을 dasharray의 최대치값으로 하면 사라지는 효과가 있다)

웹사이트 포폴 디자인 >pc화면, 태블릿,모바일 화면 자동전환 프리뷰 기능

width 속성은 속성값을 100%로 설정할 경우 요소의 크기를 100%로 유지하지만, max-width 속성은 100%로 설정할 경우 요소의 기본 크기 이상으로는 크기가 조절되지 않는다. width: 100%로 지정한 경우에는 : 창의 크기를 줄이거나 늘리면 창의 너비에 맞춰 크기가 충실히 증감한다. 가로 너비 값을 아무 것도 지정하지 않은 경우 : 창의 크기를 줄여도 이미지 크기에 아무런 변화도 없다. max-width: 100% 로 지정한 경우 : 창의 크기를 줄이면 줄인만큼 충실히 줄어들지만, 크기를 키울 때는 원래 이미지 사이즈보다 커지지는 않는다. 출처: https://ccuram.tistory.com/29

1.git 다운로드 https://git-scm.com/downloads 2.F1 눌러서 'git clone' 검색 git에 있는 주소 가져와서 입력 3.터미널 작업 user name, email 4.커밋할 때 메시지 입력, 중제목 내용

1.position:absolute 해제 position:statice;으로 수정 2.hover효과 제거 1)point-events:none; (비활성화) 2)point-events:auto; (활성화) 3)point-events:inherit; (부모값 상속)

1.기본세팅 메타태그 설정 반응형 전용 css파일 생성 (responsive.css) 미디어쿼리 설정 1.모바일 버전 (320px*768px) @media screen and (max-width:768px){ } >width(가로)가 최대 사이즈 768px 에 대한 설정 작업은 320px기준(최소 사이즈)으로 작업 2.태블릿 버전(769px*1200px) @media screen and (max-width:1200px){ } *주의사항 -respoinsive.css(반응형 세팅 css)파일은 html파일 에서 제일 하단에 위치시켜주어야 한다. -반응형 css는 태블릿 버전(max-width:1200px)이 모바일 버전(max-width:768px)보다 위에 위치하여야 한다.

Scroll snap 모듈을 사용하면 휠 스크롤 조작을 마쳤을 때의 오프셋을 설정할 수 있습니다. 1.scroll-snap-type (scroll snap axis / scroll snap strictness) container(부모) 요소에 지정 snap position을 지정할 수 있는 축을 결정하는 Scroll Snap Axis, 스냅의 엄격도를 지정하는 Scroll Snap Strictness를 함께 선언 *overflow:scroll이나 auto를 같이 설정해주어야 한다. 1)scroll snap axis -x : 수평(가로)축으로 snap position 지정 -y : 수직(세로)축으로 snap position 지정 -block : snap area의 block 축으로 지정 -inline : ..

aspect-ratio (반응형 이미지 세로 비율 유지하기) 1.width / height 비율 지정하는 경우 width:300px; aspect-ratio: 3/1; >가로3, 세로1의 비율로 높이를 설정, height=100px이 된다. 2. 한개의 값만 지정하는 경우 height의 비율값을 1로 본다. width=500px; aspect-ratio:5; >가로5, 세로1의 비율로 높이를 설정, height=100px이 된다. 3. auto와 width/height비율 지정하는 경우 (적용이 잘 안됨, 비추) width=100px; aspect-ratio:auto 1/1; >img의 경우 원본 고유의 비율이 있기 때문에, auto를 적어주면 해당 비율을 따르고, auto가 제거되면 지정한 비율이 ..

1.마스크 처리하고, 애니메이션 나타나게 하는법 overflow:hidden 사용 컨테이너(부모)에 overflow:hidden;을 적용하고 아이템(자식)에 display:block; height:100%; animation설정을 해준다. keyframes를 통해 transform:translatey(100%); > transform:translatey(0); 으로 이동시켜준다