CSS

1. display grid 기본 사용법 See the Pen grid 기본 사용법 by 김근열 (@raxuybol-the-decoder) on CodePen.">See the Pen grid 기본 사용법 by 김근열 (@raxuybol-the-decoder) on CodePen.  2. 주요 속성grid-gap: row-gap과 column-gap 을 동시에 설정row-gap: 행(Row) 간의 간격을 설정column-gap: 열(Column) 간의 간격을 설정grid-area: 값 순서대로 [시작 행] [시작 열] [끝 행] [끝 열] 값을 나태냄, 즉 코드의 item1 요소는 첫 번째 행의 첫 번째 열부터 시작하여 두 번째 행까지 확장되고, 세 번째 열의 직전까지 차지함 See the P..

1. position sticky 란?sticky는 요소가 기본적으로 relative처럼 동작하다가, 특정 조건을 만족하면 fixed처럼 동작하는 속성입니다. 즉, 지정된 임계점(threshold)에 도달할 때까지는 문서의 흐름을 따르지만, 그 이후에는 고정된 위치를 유지합니다. 예를 들어 아래 코드에서 .element는 상단에서 10px 이상 스크롤되면 고정됩니다..element { position: sticky; top: 10px; /* 뷰포트 상단에서 10px 떨어진 곳에서 고정 */}  2. sticky vs 다른 position 속성 정리static: 기본값으로 문서의 흐름을 따름relative: 기본 배치는 static 과 동일하지만 top, left 등을 이용해 위치 조정 가능ab..

1. 텍스트 색상 및 배경 색상 천천히 변경 transition 활용 See the Pen 텍스트 색상 천천히 변경 by 김근열 (@raxuybol-the-decoder) on CodePen.">See the Pen 텍스트 색상 천천히 변경 by 김근열 (@raxuybol-the-decoder) on CodePen.  2. 텍스트 색상 및 배경 천천히 변경 @keyframes 활용 See the Pen animation 색상 천천히 변경 by 김근열 (@raxuybol-the-decoder) on CodePen.">See the Pen animation 색상 천천히 변경 by 김근열 (@raxuybol-the-decoder) on CodePen.

1. 마우스 커서를 올렸을 때 색상 변경a, label, span 등 다양한 태그에 :hover 가상클래스를 붙이게 되면 마우스를 올렸을 때 CSS가 적용됩니다. See the Pen a, label, span hover 마우스를 올렸을 때 by 김근열 (@raxuybol-the-decoder) on CodePen.">See the Pen a, label, span hover 마우스를 올렸을 때 by 김근열 (@raxuybol-the-decoder) on CodePen.  2. 마우스 커서를 올렸을 때 배경 변경 See the Pen a, label, span hover 마우스를 올렸을 때 - 배경 by 김근열 (@raxuybol-the-decoder) on CodePen.">See th..

1. div display flex를 사용한 중앙 정렬 See the Pen div flex 중앙 정렬 by 김근열 (@raxuybol-the-decoder) on CodePen.">See the Pen div flex 중앙 정렬 by 김근열 (@raxuybol-the-decoder) on CodePen.  2. div display grid를 사용한 중앙 정렬 See the Pen div grid 중앙 정렬 by 김근열 (@raxuybol-the-decoder) on CodePen.">See the Pen div grid 중앙 정렬 by 김근열 (@raxuybol-the-decoder) on CodePen.  3. position을 사용한 중앙 정렬 See the Pen div ..

1. 기본 테두리 제거 See the Pen input 기본 테두리 제거 by 김근열 (@raxuybol-the-decoder) on CodePen.">See the Pen input 기본 테두리 제거 by 김근열 (@raxuybol-the-decoder) on CodePen.  2. 클릭(포커스) 시 테두리 제거 See the Pen input 클릭(포커스) 시 테두리 제거 by 김근열 (@raxuybol-the-decoder) on CodePen.">See the Pen input 클릭(포커스) 시 테두리 제거 by 김근열 (@raxuybol-the-decoder) on CodePen.  3. 클릭 유지 시 테두리 제거2번 예제를 두고 테스트했을 때 클릭을 유지할 때 테두리 색상이 ..