프론트엔드 공부한 거 정리하기

animation 스스로 움직임을 가지는 값 animation-name : 애니메이션 이름 animation-duration : 애니메이션 시간 animation-delay : 대기 시간 animation-timing-function : 움직임 스타일 animation-iteration-count: 반복 횟수 infinite : 무한 숫자값 : 값만큼 반복 animation-fill-mode : 종료 후 행동 지정 backwards : (기본값)끝난 후 출발점으로 돌아감 forwards : 끝난 후 종료점에서 멈춤. animation-direction : 진행 방향 normal : (기본값) reverse : 역방향 ( 방향이 바뀌는 게 아니라 진행 순서가 to -> from 으로 진행) alternat..

블록 요소 안의 블록 요소를 정중앙에 정렬할 때 적용하는 방법. 포지션이 적용되지 않았으며 요소의 값이 정의되어있을 때 margin 값을 사용. (부모와 자식 간의 마진 상쇄 현상으로 박스 전체가 밀릴 경우 부모 요소에 overflow: hidden;) .box1 h3 { margin: 50px auto; } /* 부모 자식 간 마진 상쇄 현상 해결 */ .box1 { overflow:hidden; } 포지션이 적용 되었을 때 top, left의 값을 50%로 주고, 요소의 width, height 값의 반만큼 마진값을 마이너스로 적용. (계산 필요) .box2 h3 { /* h3의 가로 세로값이 정의되었을 때 요소가 가진 값의 반만큼 마이너스 값 마진으로 처리 */ top: 50%; left: 50%;..

transform: scale() 크기 크기를 조정하며 값을 입력하면 배수로 적용되며 단위값이 없음. 다른 요소나 레이아웃에 영향을 끼치지 않음. transform: scale(2); /* 2배로 커짐 */ transform: scaleX() x축만 scale이 적용됨. transform: scaleY() y축만 적용되며 이미지를 줄일 때는 1이하의 소수점의 값을 입력하면 됨. transform: scale(x축 값, y축 값) x축과 y축 값을 순서에 따라 작성 가능. transform: skew() 기울기 기울기를 조정하는 값. transform: skew() 각도의 단위값인 deg로 작성하며 한 자리수로 작성 시 x축에만 적용. transform: skewX(), transform: skewY() ..

transition-property (움직임 속성) transition-duration (움직임 진행 시간) transition-delay (움직임 시작 지연) transition-timing-function (움직임의 스타일 정의 - 서서히 시작, 서서히 종료 등 ) linear : 일정한 속도로 진행 ease : 기본값. 서서히 시작, 서서히 감소 (부드러운 움직임) ease-in : 서서히 시작 빠르게 종료 ease-out : 빠르게 시작 서서히 종료 ease-in-out : 서서히 시작 빠르게 진행 서서히 종료 cubic-bezier() : 사용자 정의 움직임. https://cubic-bezier.com/ 사이트 참고 transition 축약형 값의 순서와 상관없이 작성 가능. 첫번째 숫자는 진..

order : flex-item에 적용되는 특성으로 아이템 배치 순서 설정 order 값을 적용한 item은 적용시킨 순서대로 정렬되지만 order값이 없는 item보다 뒤에서부터 정렬된다. flex-grow : flex-item에 적용되는 특성으로 증가 비율 조정 flex-grow:0; 기본값. 강제로 컨테이너를 채우지 않음. 플렉스 아이템이 가지고 있는 기본 가로값 그대로 유지 flex-grow:1; 1:1:1:1 비율로 동일하게 컨테이너를 채움 flex-grow:1 / flex-grow:2; 1:1:1:2 flex-grow:1 / flex-grow:2 / flex-grow:2 / flex-grow:3; width:300px / flex-grow:1 / flex-grow:2 / flex-grow:1;..

요즘 학원에서 '홈페이지 레이아웃 똑같이 만들기'를 팀작업으로 하는 과제를 하고 있다. 레이아웃과 디자인을 똑같이 만드는 게 과제의 목표였지만 개인적인 욕심이 생겼다. 지금까지 배운 걸로만 기존 홈페이지에 있는 기능들을 구현해보는 것이다. 연습할 겸 인터넷 검색 없이 코드의 동작 원리들을 파악하면서 혼자 해보기로 했다. 어디서 들었는데 이런 과정들을 기록해놓는 게 좋다고 해서 조잡하게나마 기록해보기로 했다. 처음엔 쉬울 것 같았다. a태그에 :hover를 주듯 알맞은 가상 선택자를 주면 된다고 생각했고 처음으로 고른 것은 :active 였다. 일단 시험 삼아 반투명 배경만 깔아보기로 했다. 기존에 만들어 둔 메뉴 html 구조를 가져와서 ..

display: flex; 뷰포트나 요소의 크기가 동적으로 변할 때 사용. 상속되지 않음. 부모박스 (flex-container)와 자식아이템 (flex-item)의 개념으로 구성 됨. flex-container에 들어가는 특성 flex-direction : 아이템의 가로 세로 정렬 기준 설정. 주축의 방향 설정. row : 기본값. 주축은 가로 (왼쪽->오른쪽), 교차축은 세로 (위->아래) column : 주축은 세로 (위->아래), 교차축은 가로, (왼쪽->오른쪽) raw-reverse : 주축은 가로 (오른쪽->왼쪽), 교차축은 세로 (위->아래) column-reverse : 주축은 세로 (아래->위), 교차축은 가로 (왼쪽->오른쪽) flex-wrap : flex는 자동으로 줄바꿈이 되지 않으..

meta의 viewport란? 화면을 제어하는 메타태그로 기기의 보이는 영역을 기기의 실제 화면 크기로 변경하여 미디어쿼리가 기기의 화면 크기를 정확하게 감지할 수 있게 함 미디어 쿼리 작성시 viewport값은 필수 모바일에서 웹페이지가 모바일 사이즈에 맞게 보이려면 viewport값 필수 width=device-width : 해상도의 크기를 기기의 크기와 맞춤 initial-scale=1.0 : 기본 사이즈 minimum-scale=1.0 : 확장 불가 maximum-scale=1.0 : 축소 불가 user-scalable=no : 사용자의 확대 축소 금지

em 단위 알파벳 M을 기준으로 만들어진 단위 부모의 폰트 사이즈를 기준으로 값 설정 브라우저의 기본 폰트 사이즈: 16px rem 단위 root, 즉 최상위 요소(html)의 font-size 기준 em 브라우저의 기본 폰트 사이즈: 16px vw / vh 단위 뷰포트의 가로(vw) 세로(vh) 값을 기준으로 사용하는 상대 단위 값 100분의 1 단위 상대 단위인 %는 부모를 기준으로 값을 정하지만, vw vh는 부모와 상관 없이 뷰포트를 기준으로 값을 정한다. 스크롤을 인식하지 못해서 스크롤 너비만큼 레이아웃 밀림. %는 부모를 기준으로 하기 때문에 부모 요소를 넘지 못하지만 vw, vh는 부모요소를 넘음. calc(); css 함수로 다른 단위값들끼리 연산이 가능하다 (+, -, *, /) 연산자 ..

Sass Syntactically Awesome StyleSheet의 약자. 개발의 효율을 높이기 위한 CSS pre-processor(전처리기) 특징 : 들여쓰기 SCSS Sass 3버전에서부터 나왔으며 sass 기능을 지원, css와 거의 같은 문법으로 사용되기 때문에 호환성 더 높음특징 : 중괄호, ; 사용방법 브라우저는 Sass의 문법을 알지 못하기 때문에 Sass(.scss) 파일을 css파일로 트랜스파일링 해야 함. 웹팩이나 리액트, 뷰를 사용하지 않는 경우, vscode 환경에서 - Live Sass Compiler 설치 - settings.json 열기 - 아래 내용 추가 문법 1. 주석 처리 방식 *압축 css 파일에서는 주석 전부 삭제. 2.내부, 외부 링크 가져오기 @import "경..