프론트엔드 스터디

1.vscode 설정방법 수정위치 확장프로그램 > 해당확장프로그램 > 설정(톱니바퀴) > extension settings Open settings(JSON)클릭 (오른쪽 상단부에 위치) 2. SaSS 설정 기존 태그 아래에 해당 태그 삽입 "liveSassCompile.settings.formats":[ { "format": "expanded", "extensionName": ".css", "savePath": "~/../css" // .css파일 생성 }, { "format": "compressed", "extensionName": ".min.css", "savePath": "~/../css" //.min.css파일 생성 } ], "liveSassCompile.settings.generateMap":..

1.transition (그룹속성 property / duration / timing-function / delay) duration과 delay는 같은 단위를 사용하기 때문에 duration delay 순서로 적용된다. 하나의 값만 들어있다면 duration값만 적용이 된다. 2.transition-property (대상이 되는 속성 설정) -all : 기본값이며, 모든속성에 적용 -none : 모든 속성에 적용x -property : 여러 개의 속성을 지정할 경우 사용 ex)transition-property:width height; -initial : 기본값으로 설정 -inherit : 부모 요소의 속성값을 상속 3.transition-duration (지속 시간 설정) 트랜지션이 일어나는 일정 시..

1.확장프로그램 설치 SASS, Live Sass Compiler 2.Extension settings -확장프로그램에서 Sass 오른쪽마우스 클릭 > Extension settings 클릭 -오른쪽 상단에 Open Settings (JSON) 클릭 .css파일 생성 명령어 + .min.css파일(css 용량 최소화) 생성 명령어 + .map파일 생성하지 않기 명령어 // Sass 설정 "liveSassCompile.settings.formats":[ { "format": "expanded", "extensionName": ".css", "savePath": "~/../css" // .css파일 생성 }, { "format": "compressed", "extensionName": ".min.css", ..

transform-origin (요소 변환 기준점 설정) transform-origin: X축 Y축; 최초 기준점에서 설정한 만큼 이동하여 변환 기준점 변경 transform:rotate() 요소를 회전 시키는 함수 deg, rad, grad, turn 등의 단위를 하용 turn은 1회전을 뜻하며, 360deg와 같은 효과를 낸다. transform:translate() 요소를 이동시키는 함수 px, &등 CSS 크기단위를 사용한다. transform:scale() 요소를 확대 또는 축소할 수 있다. ex)scale(2.0, 1.5) : 가로로 2배, 세로로 1.5배 확대 transform:skew() 요소를 기울이는 함수(비틀기효과)

inline, inline-block 요소들을 수직으로 조절할 때 사용, 부모요소 baseline(마지막 요소 기준)을 기준으로 적용된다. vertical-align:baseline; (기본값) 아래 그림처럼 꼬리부분을 뺀 기준 선 vertical-align:top; 전체 박스들 중에서 가장 높은 요소의 윗선에 맞춰진다. vertical-align:middle; 제일 큰 요소에 적용하면 모든 요소가 부모요소의 정중앙선에 맞춰진다. 작은 요소에 적용하면 해당 요소만 부모요소의 정중앙선에 맞춰진다.

애니메이션 설정에 사용하는 속성들 animation (그룹속성 name / duration / timing-function / delay / iteration-count / direction / fill-mode) animation-duration과 animation-delay 속성 값은 반드시 순서에 맞춰 선언해야 한다. (둘 중 하나 생략된 경우 > delay=0) animation-name (이름) keyframes 연결에 필요한 이름을 설정하는 속성 애니메이션 막는 의미로 none 사용가능 animation-duration (시간) ms 또는 s 단위(=1000ms)를 사용, 애니메이션 진행을 막는 의미로 0 사용가능 animation-timing-function(시간함수) -animation-t..

d

1.이미지가 커지는 효과 http://www.noblesse.com/home/main.php# 2.동영상으로 전환 https://hauterre.co.kr/

자식 : > 형제 : + () : 영역 구분 *n :n개만큼 동일한 요소 생성

liveServer vscode 내용을 수정하고 저장하면 바로 미리볼 수 있는 확장프로그램