본문 바로가기

웹코딩 배우기/· CSS133

CSS를 이용한 이미지 갤러리 만들기 See the Pen 이미지 갤러리 by nilgi (@nilgi) on CodePen. 파일 다운 받지 마세요. 실습용. 2023. 1. 9.
CSS / background-size 배경 크기 설정 background-size 배경 이미지 크기 조절 background-size: auto; 기본값 원본 크기 그대로 콘텐츠 공간에 맞게 이미지가 잘림 background-size: contain; 가로, 세로 비율 유지하며 이미지 다 보임 콘텐츠 공간에 맞게 이미지가 늘어나거나 줄어듬 background-size: contain; 가로, 세로 비율 유지하며 이미지 다 보임 콘텐츠 공간에 맞게 이미지가 늘어나거나 줄어듬 이미지 해상도 손실 background-size: cover; 콘텐츠 크기에 맞게 덮음 background-size: 수치(px, %...); 수치 n; : 가로, 세로 크기 동일 background-size: 수치(px, %...); 수치 n n; : 앞 숫자 가로, 뒷 숫자 세로 ba.. 2022. 12. 28.
CSS - background, padding으로 border(그라디언트) 효과 내기 See the Pen background, padding 테두리 그라디언트 by nilgi (@nilgi) on CodePen. border-image를 사용하여 테두리에 그라디언트를 넣는 방법을 배웠다. 그러나 이는 border-radius를 적용할 수 없다. 적용하는 방법이 있지만 약간 복잡하다. 그래서 대체하여 background, padding으로 그라디언트가 있는 둥근 모서리 테두리 효과를 쉽게 낼 수 있다. .bp_bor_box { display: inline-block; background: linear-gradient(to right, tomato, gray); // 전체 박스에 그라디언트 배경을 지정한다. padding: 6px; border-radius: 13px; } .bp_bor {.. 2022. 12. 20.
CSS - border에 그라디언트(그라데이션) 넣기 See the Pen border-gradient by nilgi (@nilgi) on CodePen. border: 10px solid; border-image: linear-gradient(to right, #FF9702, #ccc) 1; // 뒤에 1은 border-image-slice 값이며 그리디언트 적용을 위해 필수. 그라디언트를 적용하면 border-radius를 쓸 수 없다. border-radius 쓰려면 background와 padding으로 테두리 효과를 내는 게 편하다. CSS - background, padding으로 border(그라디언트) 효과 내기 CSS - background, padding으로 border(그라디언트) 효과 내기 See the Pen background, .. 2022. 12. 20.
CSS / aspect-ratio 가로, 세로 비율 지정 See the Pen aspect-ratio by nilgi (@nilgi) on CodePen. width 값을 주면 가로를 기준으로 height 값을 주면 세로를 기준으로 비율을 지정한다. 여러 장의 이미지 비율을 동시에 수정할 때 쓰거나 반응형 콘텐츠의 비율을 유지하고 싶을 때 쓰면 된다. 2022. 12. 19.
CSS - filter See the Pen filter by nilgi (@nilgi) on CodePen. • grayscale(%) : 흑백화 • blur(px) : 흐림 • brightness(%) : 밝기 • contrast(%) : 대비 • drop-shadow(x, y, 흐림, 색) : 그림자 • hue-rotate(deg) : 색조 i• nvert(%) : 반전 • opacity(%) : 불투명 • saturate(%) : 채도 • sepia(%) : 세피아 ※ 두 가지 이상 효과 조합 가능. 2022. 12. 18.
CSS - filter: brightnes를 이용한 이미지 어둡게 또는 밝게 하는 방법 See the Pen filter: brightness by nilgi (@nilgi) on CodePen. CSS로 이미지 밝기를 조절하는 방법은 다양합니다. 아마 백그라운드 색을 opacity 하는걸 가장 많이 사용할 것 같습니다. 그것보다 조금 더 편한 방법은 filter: brightnes를 사용하면 됩니다. filter: brightnes(50%); // 어둡게 filter: brightnes(100%); // 원본 filter: brightnes(150%); // 밝게 % 단위를 써도 되고 opacity처럼 숫자 1을 기준으로 써도 됩니다. 2022. 12. 15.
CSS - <hr> 꾸미기 border See the Pen hr style by nilgi (@nilgi) on CodePen. • hr은 css에서 border 이용해서 꾸미면 된다. • border-bottom은 자세히 보면 이중선으로 나온다. border만 쓰거나 border-top을 쓰자. • border-radius로 모서리를 둥글게 만들면 된다. 2022. 12. 15.
grid를 이용한 sns 공유버튼 만들기 See the Pen grid를 이용 sns 공유 버튼 by nilgi (@nilgi) on CodePen. display: grid; // grid 정의 grid-template-columns: 25% 25% 25% 25%; // 4개의 요소 크기를 25%로 똑같이 한다. grid-column-gap: 2px; // 요소 간격 트위터 // 글자대신 를 넣어도 된다. - - - [웹코딩 배우기/· CSS] - 반응형 레이아웃을 좀 더 쉽게 - display: grid; 반응형 레이아웃을 좀 더 쉽게 - display: grid; See the Pen display: grid by nilgi (@nilgi) on CodePen. display: grid; // 사용하면 반응형 페이지를 쉽게 만들수 있다. .. 2022. 12. 14.
CSS - word-spacing 단어 간격 See the Pen word-spacing by nilgi (@nilgi) on CodePen. 마이너스 값을 사용할 수 있습니다. 2022. 12. 14.
CSS - letter-spacing / h 글자간격 See the Pen letter-spacing by nilgi (@nilgi) on CodePen. 마이너스 값을 쓸 수 있습니다. 2022. 12. 14.