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

display: grid; 2차원(행row와 열column)의 레이아웃 시스템으로 부모 요소(grid container)와 자식 요소(grid item)으로 구성되어 있다. display: flex; 와 마찬가지로 위 아래 마진 상쇄 현상이 적용되지 않아 마진값만큼 여백이 더 벌어짐. grid-container 속성 grid-template-rows : 행을 제어하는 속성 grid-template-rows는 행을 제어하는 값으로 위에서 아래로 값을 순차적으로 입력하면 해당 행의 높이를 조정할 수 있다. grid-template-rows: 100px 200px 300px 50px; /* 1행 2행 3행 4행의 값 */ grid-container의 높이값이 지정되어 있지 않았을 때 % 단위값을 쓰면 아이템들..

background-clip: ; 요소의 배경이 어디까지 확장될 건지 조정하는 속성. background-clip: border-box : 보더가 위치한 테두리까지 배경 적용. (보더로 가려져있으나 dotted로 체크하면 보임) background-clip: padding-box : 패딩 영역 포함 테두리까지 적용. (보더 테두리 바로 전 패딩 포함한 영역) background-clip: content-box : 패딩 영역 제외한 콘텐츠 영역에만 적용. background-clip: text : 요소 내 텍스트가 있으면 텍스트 내부 영역에만 적용. 텍스트가 있는 영역에 배경을 출력하기 때문에 텍스트 컬러에 투명도를 적용해야 함. -webkit-background-clip: text; 와 함께 사용 ( b..

미디어 쿼리 Media Queries란? 화면 해상도, 기기 방향 등의 조건으로 HTML에 적용하는 스타일을 전환할 수 있는 CSS3의 속성 중 하나 @media [only 또는 not] [미디어유형] [and 혹은 ,] (조건문) {실행문} **** min, max을 사용할 땐 반드시 크기가 작은 순서(min)와 큰(max) 순서대로 작성해야 한다. 미디어쿼리 작성시 뷰포트 값은 필수로 작성해야 한다. 선택자의 우선 순위에 따라 값이 적용되기 때문에 잘 체크해야 함. 기존 css 방식처럼 내부 선언(), 외부 선언(외부.css문서)이 가능하며 기기의 뷰포트 별로 작성시, min(작은 순), max(큰 순)의 크기 순서대로 연결해야 함. 미디어 쿼리 작성 방식 @media screen /* 스크린을 만났..

css변수 사용자 지정 속성 사용자가 정의하는 속성과 값으로 재사용할 수 있는 임의값 공통으로 사용되는 값에 css변수를 설정하여 코드의 반복 사용 줄임 전역 선언 방법 :root { --variable--name: value; } :root { --variable: value; } 지역 선언 방법 dt { --variable-name: value; } 지정된 요소와 하위 요소에서만 적용, 전역 선언된 변수와 이름이 같아도 상관 없으며 해당 지역에서는 지역 선언 변수가 우선 적용 됨. 적용 property: var(--variable--name); property: var(--variable--name, fallback);

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

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