본문 바로가기

웹코딩 배우기/· CSS140

큰 이미지의 보여지는 위치가 바뀌는 애니메이션 See the Pen 이미지 위치 변경 by nilgi (@nilgi) on CodePen. object-fit: cover; // 비율을 유지하고 컨테이너보다 콘텐츠가 크면 잘린다. object-position: 0% 0%; // 콘텐츠가 보여지는 위치의 시작점 x% y% animation: op 6s infinite; // 애니메이션 이름은 op며 6초간 진행되고 반복 @keyframes op { // 애니메이션 op의 키프레임 지정 0% { object-position: 0% 0%; // 6초중 0% 지점에서 콘텐츠의 위는 0% 0% } 25% { object-position: 25% 0%; } 50% { object-position: 50% 0%; // 6초중 50% 지점에서 콘텐츠의 위는 50%.. 2021. 11. 4.
커지는 글자 만들기 See the Pen 커지는 글자 by nilgi (@nilgi) on CodePen. 공부하면서 느낀점. 이걸 어따 써먹어? 아~ 블로그 글 수가 늘어나는구나. 워~ 참신한데? 2021. 11. 3.
색이 변하는 글자 만들기 See the Pen 색이 변하는 글자 by nilgi (@nilgi) on CodePen. hover 값을 추가해 글자에 마우스를 올렸을 때 색이 변하게 만들어도 좋겠다. CSS 이제 살짝 슬슬...ㅎ 2021. 11. 3.
굵어지고 색이 변하는 border 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으로 2021. 11. 2.
확대되는 배경 이미지 See the Pen 배경이미지 확대 by nilgi (@nilgi) on CodePen. background-size: 30px 30px; animation: abi 5s infinite; @keyframes abi { 50% {background-size: 300px 300px;} } 2021. 11. 1.
움직이는 배경 이미지 만들기 See the Pen 움직이지 배경 이미지 by nilgi (@nilgi) on CodePen. html : background-position: left; animation: abi 7s infinite; @keyframes abi { 50% {background-position: right;} } 2021. 10. 31.
grid-area로 레이아웃 만들기 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 세상이군... 2021. 10. 29.
grid-area: name; 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; 2021. 10. 27.
grid-area 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; 2021. 10. 22.
grid-column, row - 아이템 확장 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칸까지 확장. 2021. 10. 22.
grid-template-columns, rows 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; // 행 높이 지정. 2021. 10. 20.