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

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 함수로 다른 단위값들끼리 연산이 가능하다 (+, -, *, /) 연산자 ..

선형 그라디언트 linear-gradient background-image: linear-gradient(1색상, 2색상) background-image: linear-gradient(lightsalmon, lightblue); background-image: linear-gradient(to 진행방향, 1색상, 2색상) to bottom이 기본값. (to top: 아래에서 위, right : 좌에서 우, left : 우에서 좌 (대각선은 top right, bottom left... 등 두 방향을 띄어쓰기로 구분해서 함께 작성.) background-image: linear-gradient(to top, #E14D2A, #001253); color: #fff; background-image: linea..

배경 이미지 background-image: ulr(이미지 경로); 배경이미지의 특징 기본값은 이미지 크기가 작아도 바둑판처럼 반복해서 채움 배경색과 함께 사용될 경우, 배경이미지가 색상을 덮는다. 이미지>배경색 컨텐츠가 없거나 자식 요소의 높이 값이 없을 경우, 즉 높이값이 없으면 배경 이미지도 보이지 않음. 배경 이미지 반복 background-repeat: 값; 배경이미지의 반복을 제어하는 값. repeat : 기본값. 반복 no-repeat : 반복하지 않음. repeat-x, repeat-y : x축, y축으로만 반복 배경 이미지 위치 background-position: 값; 배경이미지의 위치를 제어하는 값. x축, y축 순서로 작성하며 단위값 대신 right(100%), left(0%), t..

aspect-ratio 비율로 이미지, 비디오 크기 조절 width, height 순으로 작성 한자리 숫자 작성시 width값이 되고 height는 1이 됨. auto 1/1 - 기본 비율을 가지고 있는 경우 기본 비율, 그렇지 않으면 지정 비율 값이 적용되지 않는 경우 : 고정된 width, height 값이 있는 경우 object-fit fill : 기본값. 비율 상관없이 가득 채움 contain : 원본의 비율을 유지하면서 이미지 전체를 표시하지만 여백이 생김. cover : 원본의 비율을 유지하면서 부모 요소 전체를 채우지만 나머지 이미지가 잘려나감. none : 원본 사이즈. 크기 조절 x scale-down : none과 contain 중 이미지의 크기가 더 작아지는 값 선택 위치 정렬 obj..

수열 선택자 :first-child {} - 같은 부모를 둔 자식들 중 첫 번째 위치한 자식 :last-child {} - 같은 부모를 둔 자식들 중 마지막에 위치한 자식 :nth-child(n) {} - 같은 부모를 둔 자식들 중 n 번째 위치한 자식 :first-of-type {} - 같은 부모를 둔 자식들 중 '같은 타입'의 첫 번째 자식 :last-of-type {} - 같은 부모를 둔 자식들 중 '같은 타입'의 마지막 자식 :nth-of-type(n) {} - 같은 부모를 둔 자식들 중 '같은 타입'의 n 번째 자식 (even) - 짝수 (odd) - 홀수 (3n+1) - 3개를 기준으로 첫 번째 (3n) - 3번째 01 02 03 d4 d5 06 07 08 09 d10 11 d12 13 14 ..

blockquote 와 p 모두 블록 요소이기 때문에 position을 제외하고 정렬하기 어려울 뿐더러 position을 사용해도 번거롭다. float값을 left로 입력해주면 기존 블록 요소와 어울려 정렬된다. float: left; float: left; - 왼쪽을 기준으로 요소 정렬. 진행 방향은 왼쪽에서 오른쪽 float: right; - 오른쪽을 기준으로 요소 정렬. 진행 방향은 오른쪽에서 왼쪽 float의 값은 left, right만 있다 position과 똑같이 부유 요소의 성격을 가지고 있어 블록 요소는 층위를 이루지만 텍스트는 구조 정렬에 반응한다. 브라우저 크기에 반응하며 공간이 있으면 값에 따라 이동하지만 공간이 없으면 아래로 떨어짐. float는 부유요소로 기존의 흐름에서 벗어나기 ..

flex, grid 요소에 포지션 값 적용시 포토샵의 레이어처럼 층 위의 개념이 생기는데 이 때 겹쳐지는 순서를 정의한다. 숫자가 클수록 상단에 위치하며 단위값은 없다. 포지션이 적용되어 있어야만 사용 가능하다. 한 쪽에만 position이 적용되어 있으면 상관 없지만 여러 요소에 position이 적용될 경우 층위가 뒤섞일 수 있음. z-index는 단위값이 없으며 숫자의 크기로 순서가 정해진다. h1에 z-index 값을 넣어주면 층위를 조정할 수 있다.

position: 요소의 배치 static; - 기본값. 아무런 특성이 없기 때문에 주로 다른 포지션 값이 적용된 요소를 초기화 하고자 할 때 사용. relative; - 일반적이 흐름에 따라 자기 자신을 기준으로 위치 지정. top, right, bottom, left 위치 특성과 함께 사용되거나 생략 될 수 있음. 다른 요소에 영향을 주지 않음. absolute; - 일반적인 흐름에서 벗어나며 포지션이 적용된 가장 가까운 부모 요소를 기준으로 위치 지정. top, right, bottom, left 위치 특성과 함께 사용 - absolute가 적용된 p태그를 감싸고 있던 border 테두리가 높이값을 인식하지 못한다. - 기준 값을 설정해주지 않으면 body를 기준으로 위치 설정 - 테두리만 남은 w..

*컨텐츠가 없는 셀 처리 방법 empty-cells: show; 기본값. 셀 남김 empty-cells: hide; 기본값. 셀 숨김 *셀과 셀 사이의 간격 조정 border-spacing: 값; 한자리수로 작성 border-spacing: 50px; 두 자리수로 작성 / x, y값 bordr-spacing: 20px 10px; 여백 없이 작성 bordr-spacing: 0; 겹치는 테두리 값은 border-collapse로 조정한다. 셀 테두리 값 그대로 둠. border-collapse: separate; 겹치는 셀 테두리 조정. border-collapse: collapse;