css (7) 썸네일형 리스트형 이미지 사이트 디자인 HTML, CSS ==========Image Site Design 1. 이미지 메인 페이지 미리보기 코드보기 ImageHub ← Back to gallery nature mountain landscape outdoor Image Information Resolution: 3840 × 2160 pixels File Size: 2.4 MB Fo.. 잘뽑힌 사이트 템플릿 ==========1. 링크인덱스 미리보기 디자인 확인하기 🌓 🌓 비디오스트림 홈 탐색 인기 구독 라이브 검색 추천 동영상 더보기 > .. CSS Grid와 슬라이더로 만드는 동적 웹 레이아웃 예제 모음 ========== 박스 너비 조절: 800px 예제 1: 3열 그리드 1 2 3 4 5 6 .container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; margin-bottom: 20px;}.item { background-color: #f0f0f0; padding: 20px; text-align: center; border: 1px solid #ccc;}<div class="container"> <div class="Item">.. 심플한 반응형 블로그 기본 템플릿 HTML, CSS, JavaScript로 제작된 심플한 반응형 블로그 템플릿입니다. 라이트모드/다크모드 전환이 가능하고 PC/Mobile 전환이 가능합니다. 총 4가지 언어로 변경도 가능합니다. 다양한 버튼 디자인 버튼 디자인 평범한 버튼 3D 버튼 팝업 메뉴 열기 메뉴 항목 1 메뉴 항목 2 메뉴 항목 3 좋아요 사진 업로드 시작 둥근 버튼 그래디언트 버튼 스타일 버튼 경계선 버튼 둥근 그래디언트 버튼 아웃라인 버튼 다운로드 투명한 배경 버튼 반전 스타일 버튼 스플래시 버튼 그림자와 경계선 버튼 .. [css] box-shadow 로 div에 그림자 넣는 방법 (외부 그림자, 내부 그림자) box-shadow: 10px 20px 30px 40px blue;10px : 그림자의 좌우 이동 범위를 설정합니다.20px : 그림자의 상하 이동 범위를 설정합니다.30px : 그림자의 블러 효과 세기를 설정합니다.40px : 그림자의 사이즈 설정합니다.blue : 그림자의 컬러를 설정합니다. 10px 앞에 아무것도 없다면 외부 그림자 inset가 있다면 내부 그림자가 됩니다.ex ) box-shadow: inset 0px 0px 50px 30px rgb(22, 22, 22);이렇게 설정된다면 내부 그림자입니다. 아래 수치를 조절해가면서 어떻게 작동하는지 확인해 볼 수 있습니다. box-shadow: 0px 0.. css 깔끔한 버튼 디자인 웹사이트나 웹앱을 제작할 때 버튼 하나만으로도 전체 분위기가 달라집니다.여덟 가지 스타일로 분류한 “현대적인 버튼 디자인 컬렉션”을 공유합니다.어떤 프로젝트에도 잘 어울리는 깔끔하고 직관적인 버튼을 골라 적용해 보세요. 현대적인 버튼 디자인 컬렉션 플랫 버튼 기본 버튼 <button class="btn flat-btn-primary">기본 버튼</button> .. 이전 1 다음