본문 바로가기

CSS

 (47)
CSS 스마트폰 그라데이션 상단바 예제 Relate + h1, body, html { margin: 0; padding: 0; } span { font-size: 20px; font-weight: bold; } .header { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); background-image: linear-gradient(to right, #a274f7, #83b8f1); color: white; display: flex; align-items: flex-end; justify-content: space-between; padding: 40px 15px 10px 15px; }
CSS 모던한 그리드 레이아웃 예제 허브 다양한 향기가 납니다. 하나씩 맡아보세요. .hub { margin: 30px; height: 40vh; /* vh 비율과 관련된 단위 */ border-radius: 18px; background-image: url(https://cdn.pixabay.com/photo/2015/08/25/03/50/herbs-906140_1280.jpg); background-size: cover; background-position: center center; /* .text를 정렬하는 요소 */ display: flex; align-items: flex-end; justify-content: center; } .text { background-color: white; border-radius: 18px; bo..
CSS 버튼 그림자 애니메이션 예제 3번째 버튼에 마우스를 올렸을 때 부드럽게 그림자가 진해진다. .navigation { display: grid; grid-template-columns: repeat(4, 1fr); } .item { border-radius: 50%; box-shadow: 0 10px 35px rgba(0, 0, 0, 0.05), 0 6px 6px rgba(0, 0, 0, 0.1); display: flex; height: 50px; width: 50px; cursor: pointer; /* 마우스 포인터를 올렸을 때 손가락으로 바뀜 */ transition: box-shadow 0.1s linear; } .item:hover { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 6px..
CSS 그리드 안의 배경 사진 예제 body { /* 모바일 기본 설정 */ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } .grid { overflow: scroll; display: grid; /* 반응형 */ grid-auto-columns: minmax(200px, 1fr); grid-auto-flow: column; gap: 20px; } .food { height: 150px; border-radius: 10px; } .food:first-child { /* 그라데이션으로 명암을 조절 */ background-image: lin..
CSS 박스 그림자 예제 - Material Design Box Shadows https://codepen.io/sdthornton/pen/wBZdXq
CSS 그리드 예제 :root { --colorOne: mistyrose; --colorTwo: cornsilk; --colorThree: honeydew; } .grid { display: grid; grid-template-columns: 1fr 1fr 1fr; /* 열만 설정하고 행은 알아서 늘어나게 */ grid-auto-rows: 200px; } .grid .gridItem:nth-child(1) { background-color: var(--colorOne); } .grid .gridItem:nth-child(2) { background-color: var(--colorTwo); } .grid .gridItem:nth-child(3) { grid-row: span 2; background-image: url(ht..
CSS 개별 그리드 정렬 - justify-self, align-self, place-self 1. justify-self justify-self: start; // 또는 center, end // 좌우로 정렬 2. align-self align-self: start; // 또는 center, end // 상하로 정렬 3. place-self place-self: center center; // 아래와 같다. // align-self: center; // justify-self: center;
CSS 그리드 라인 네이밍 이용하는 방법과 grid-auto-flow: dense .parent { // 부모 ... grid-template-columns: [first] 1fr [second] 1fr [third] 1fr [fourth] 1fr; } .child:first-child { // 자식 ... grid-column-start: second; grid-column-end: fourth; // 2번째 칸부터 4번째 칸 전까지를 합친다. } grid-auto-flow: dense; // 부모에 추가해야 한다. // 어떻게든 빈 공간을 채운다.

티스토리툴바