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

선형 그라디언트 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 ..

:before, ::before 기준 요소 안의 컨텐츠 영역 앞쪽에 적용. 의사 요소 :after, ::after 기준 요소 안의 컨텐츠 영역 뒤쪽에 적용 인라인과 비슷한 성격을 가지기 때문에 width값이 적용되지 않는다. content: ""; - "이 영역 내에 작성되는 것은 텍스트 컨텐츠로 < 같은 코드값을 입력해도 적용되지 않음."

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;

요소 특성 변경 display 요소가 가지고 있는 inline, block 등 기본 성격을 변경할 수 있다. inline : 요소의 성격을 inline으로 변경 block : 요소의 성격을 block으로 변경 inline-block : 요소의 성격을 inline-block으로 변경. 인라인과 블록의 성격을 모두 가지며 인라인처럼 띄어쓰기, 줄바꿈 인식. line-height 값, width/height 값을 가질 수 있다. * 가로 중앙 정렬의 경우 인라인, 블록 적용 방식이 다 가능하나 띄어쓰기가 있는 경우 인라인 방식으로 정렬하는 것이 더 편하다. 'text-align:center' 상속되지 않으며 해당 요소에만 적용. 요소 숨김 visibility, opacity visible : 컨텐츠가 보임 *..