복습용연습장

https://hyunu0504.github.io/blog2/ https://hyunu0504.github.io/blog2/ hyunu0504.github.io 미디커워리로 반응형 웹을 만드려면 를 head 태그에 작성해야 한다 모바일이나 pc 에서 배율을 맞춰주는 매타 태그이다. 위 사진을 기준으로 작성했다. 초기화면 태블릿 사이즈 1023px 이하 모바일 사이즈 767px 이하

CSS 2022. 5. 21. 00:39

https://hyunu0504.github.io/blog1/ https://hyunu0504.github.io/blog1/ 마우스 올릴시 흔들흔들 + hyunu0504.github.io 1. hover일때 흔들흔들 버튼 2. hover 일때 + 버튼 rotate , scale 3. hover일때 메뉴창 슬라이드

CSS 2022. 5. 20. 02:51

animation, @keyframe animation animation-name : 키프레임에서 지정한 name ; = 실행 할 keyframes animation-duration : ? ; = ? 초에 걸려서 실행 animation-delay : ? ; = ?초 후에 실행 anmation-timing-function : ? = 이러한 속도로 실행 anmation-fill-mode = ? = 실행이 끝난 후에 상태를 말함 ------------------------------------------ @keyframes anmation 실행에서 0 ~ 100 %까지 자세하게 설정 가능

CSS 2022. 5. 19. 03:11

문법 정리부터 하겠다 transform 트렌스폼은 요소에 변화를 줄때 사용한다. rotate rotate는 회전할때 사용한다 단위는 deg transform : rotate( 10deg ); = 시계 방향으로 10deg만큼 회전 transform : rotate( 10deg ); = 반시계 방향으로 10deg만큼 회전 translate translate는 위아래로 이동할때 사용한다 단위는 px transform : transLateX( 50px ); = 오른쪽으로 50px만큼 이동 transform : transLateX( -50px ); = 왼쪽으로 50px만큼 이동 transform : transLateY( -50px ) = 위로 50px만큼 이동 transform : transLateY( 50px ..

CSS 2022. 5. 18. 01:59

position 특징 1. 좌표이동 가능 2. 붕 뜨게됨 relative , absolute position : relative 기준을 선언하는 코드 position: absoulute 부모가 relative가 있을경우에는 기준을 부모로 잡는다 위 사진은 부모를 relative로 기준점을 잡고 bottom : 0 ; 을 실행하면 그 기준의 맨 아래로 위치하는것을 볼 수 있다. 부모의 relative 기준점을 제거 하고 그대로 실행해보면 웹브라우저 ( viewport ) 가 기준인 것을 볼 수 있다. ------------------------------------------ static, fixed position: static 기준점이 없다 top, bottom, right, left 좌표 이동 불가능..

CSS 2022. 5. 15. 23:30

:nth-child( n / odd / even / 숫자n ); 똑같은 class나 id나 태그에서 몇번째 요소를 선택할때 사용된다 1. 숫자를 넣어서 몇번째인지 선택 ( nth-child ( n ) ) 2. odd 홀수만 선택 ( nth-child ( odd ) ) 3. even 짝수만 선택 ( nth-child ( even ) ) 4. 숫자n으로 n번 배수 선택 ( nth-child ( 숫자n ) ) ------------------------------------------ 첫번째 또는 마지막을 선택할때 사용하는 : first/last-child :first-child 첫번째 요소를 선택 :last-child 마지막 요소를 선택 ---------------------------------------..

CSS 2022. 5. 15. 04:18

웹사이트에서 흔히보이는 그 이상 넘어갈시 나오는 ... 처리 한줄 ... 처리 overflow: hidden 으로 그 이상 보여지는 부분은 hidden 처리시킴 white-space: nowrap 으로 줄바꿈x 처리 ( 기본값 wrap ) text-overflow: ellipsis 으로 끝부분 ...처리 ( 기본값 clip ) ------------------------------------------ 두줄 이상 ... 처리 한줄 처리 white-space: nowrap 지우고 overflow: hidden 으로 그 이상 보여지는 부분은 hidden 처리시킴 text-overflow: ellipsis 으로 끝부분 ...처리 ( 기본값 clip ) display: -webkit-box ; = 두줄 이상을 ..

CSS 2022. 5. 15. 02:10

flexbox와 마찬가지로 ie10이상에서 지원 flex와 grid 의 차이점은 flex는 가로 또는 세로 하나만 설정했다면 grid에서는 가로와 세로를 동시에 설정할 수 있다. display:grid 그리드로 설정하는 선언 grid-template-columns: ; 가로의 크기를 설정 grid-template-rows: ; 세로의 크기를 설정 grid-gap: ?px ; 가로 세로의 간격 크기를 설정 row-gap: ?px; 세로 간격 설정 column-gap: ?px; 세로 간격 설정 ------------------------------------------ repeat( 3, 100px ) == 100px 100px 100px과 동일하다 repeat ( 반복횟수, 반복값 ) minmax( 최소값..

CSS 2022. 5. 13. 20:14