See the Pen 굵어지는 테두리 by nilgi (@nilgi) on CodePen. html▸border: 1px solid #333; .bbox { animation: bbox 5s infinite; } // bbox에 애니메이션, 5초, 반복 @keyframes bbox { 50% { border: 30px solid tomato; border-radius: 50px; } } // 테두리 굵기를 30으로, 토마토색으로, 테구리 둥굴기는 50으로

See the Pen 배경이미지 확대 by nilgi (@nilgi) on CodePen. background-size: 30px 30px; animation: abi 5s infinite; @keyframes abi { 50% {background-size: 300px 300px;} }

See the Pen 움직이지 배경 이미지 by nilgi (@nilgi) on CodePen. html : background-position: left; animation: abi 7s infinite; @keyframes abi { 50% {background-position: right;} }

See the Pen by nilgi (@nilgi) on CodePen. grid-area: header; grid-area: menu; grid-area: main; grid-area: footer; grid-template-areas: 'header header header header header' 'menu main main main main' 'menu footer footer footer footer'; 참 신기한 CSS 세상이군...

See the Pen grid-area by nilgi (@nilgi) on CodePen. grid-template-areas: 'head head head head'; // head 값 4칸 grid-area: head; grid-template-areas: 'main main . . .'; // main값 2칸 나머지 나열 grid-area: main;

See the Pen grid-area by nilgi (@nilgi) on CodePen. • grid-area: 1 / 2 / 5 / 6; // grid-row-start / grid-column-start / grid-row-end / grid-column-end; 순서 • grid-area: 2 / 1 / span 3 / span 3;

See the Pen grid-column by nilgi (@nilgi) on CodePen. display: grid; grid-template-columns: auto auto auto auto auto; grid-gap: 5px; • grid-column: 1 / 4; // 1에서 시작해 4열의 시작점까지 확장. • grid-column: 1 / span 4; // 1에서 시작해 4칸까지 확장. • grid-column: 2 / span 2; // 2에서 시작해 2칸까지 확장. • grid-row: 1 / 4; // 1에서 시작해 4행의 시작점까지 확장. • grid-row: 1 / span 2; // 1에서 시작해 2칸까지 확장.

See the Pen grid-template by nilgi (@nilgi) on CodePen. • grid-template-columns: auto auto auto auto; // 3개를 쓰면 3열, 4개를 쓰면 4열. 오토는 모든 크기 같게. • grid-template-columns: 30px 100px auto 20px; // 열마다 크기 지정 가능. • grid-template-rows: 30px 140px; // 행 높이 지정.

See the Pen display: grid by nilgi (@nilgi) on CodePen. display: grid; // 사용하면 반응형 페이지를 쉽게 만들수 있다. grid-template-columns: auto auto auto; // 3열, 화면 크기에 맞게 자동으로 모두 똑같이 • grid-column-gap: 30px; • grid-row-gap: 30px; • grid-gap: 20px 40px; • grid-gap: 5px; // 아이템 간격 • grid-column-start: 1; • grid-column-end: 3; • grid-row-start: 1; • grid-row-end: 3; // 아이템의 시작점과 끝점을 지정 - 표의 셀 병합과 비스무리.

viewport는 무엇입니까요? 우리가 보는 영역이다. 화면 크기에 따라 보이는 영역 또한 다르다. PC화면, 폰화면에 따라 크기가 달라야 한다. 옛날에는 PC화면으로만 보면 됐는데 지금은 다양한 디바이스가 있기 때문에 크기를 해결하기 위해 viewport가 개발되었다. 티스토리의 반응형 스킨 같은 거다. ↪ width=device-width // 화면 너비에 따라 콘텐츠 너비를 설정한다. ↪ initial-scale=1.0 // 처음 로딩시 확대, 축소 수준을 설정한다. 다음을 지켜야 한다. • 너비가 큰 요소를 사용하지 마라. 영역보다 큰 요소를 사용하면 가로 스크롤이 생길 수 있다. 가로 스크롤은 화면이 작은 디바이스에서 보기 아주 불편하다. • 특정 디바이스의 화면 크기로 만들지 말라. • CSS..