웹디자인5 [소스공유] Slider 반응형 슬라이드 소스 다운받기 CodePen 홈페이지에서 꼭 들어가는 슬라이드. 오른쪽에서 왼쪽으로 슬라이드가 되며, 반응형 슬라이드 입니다. 1.html 2022. 7. 26. 그누보드 테마로 홈페이지 간단히 만들자 - 누구나 쉽게 만드는 회사 홈페이지 만들기 그누보드에서 제일 좋은 점은 테마를 깔 수 있는 건데요. 테마는 홈 페이전체 디자인되어있는 것 업로드하면 바로 홈페이지 완성이 돼요. 그리고 이미지, 내용, 게시판 등에 내용만 추가해주면 끝!입니다. 홈페이지 만들다 보면 디테일하게 소스를 이용해야 하는 부분도 있지만 좋은 테마를 고르면 그렇게 하지 않아도 쉽게 홈페이지를 만들 수 있습니다. 1. 테마고르기 그누보드 > 테마 그누보드 테마고르기 클릭 그누보드5 테마 > SIR 그누보드, 영카트 개발사로 웹사이트와 쇼핑몰을 무료로 만들수 있는 수많은 솔루션을 무료로 제공하고 있으며 다국어버전도 배포하고 있습니다. sir.kr 구경해 보시면 테마종류가 많아요! 여기서 주의할점은 그누보드 설치를 5.4버전으로 했기 때문에 5.4버전테마를 다운받아야 합니다. 여.. 2021. 10. 1. 텍스트 이미지 중앙정렬 padding: 4em calc(50% - 250px); 유동배경에 고정콘텐츠 즉 홈페이지에서 요즘 트렌드에 제일 많이 쓰이는 css인것같다 움직이는 배경에 텍스트 또는 이미지 중앙정렬이다. html 텍스트 중앙정렬 텍스트 중앙정렬 텍스트 중앙정렬 텍스트 중앙정렬 텍스트 중앙정렬 텍스트 중앙정렬 텍스트 중앙정렬 텍스트 중앙정렬 텍스트 중앙정렬 텍스트 중앙정렬 텍스트 중앙정렬 텍스트 중앙정렬 텍스트 중앙정렬 텍스트 중앙정렬 텍스트 중앙정렬 텍스트 중앙정렬 텍스트 중앙정렬 텍스트 중앙정렬 텍스트 중앙정렬 텍스트 중앙정렬 텍스트 중앙정렬 텍스트 중앙정렬 텍스트 중앙정렬 텍스트 중앙정렬 텍스트 중앙정렬 텍스트 중앙정렬 텍스트 중앙정렬 텍스트 중앙정렬 텍스트 중앙정렬 텍스트 중앙정렬 css .bg { background: #fdf965; padding: 4em calc.. 2021. 5. 16. 웹디자인 다중경계선 여러개 선이 겹친 형태 css box-shadow 이용 box-shadow 로 적용 box-shadow의 장점은 콤마구분으로 경계선을 원하는 만큼 아주 쉽게 여러개 만들 수 있다. .class { width:200px; height:200px; margin :0 auto; margin-top:40px; background:yellowgreen; box-shadow:0 0 0 20px #655, 0 0 0 35px deeppink; } 경계선css 만 따로 뽑아서 보자면 .class { background:yellowgreen; box-shadow:0 0 0 20px #655, 0 0 0 35px deeppink; } 경계선 한개를 추가 한다음 다음 한개를 더 추가할때 사이즈는 첫번째 경계선이 20px이면 그 다음 경계선을 15px 추가 하고 싶으면 첫번째 경.. 2021. 5. 15. 웹디자인 반투명 경계선 border hals 적용 css, 흰색배경에 반투명 경계선 문제 빨간색 배경에 흰색 경계선 스타일이라고 해보자. border:10px solid hsla(0,0%,100%,.5); background:white; hsla 경계선을 만들어준다 했는데 경계선으로 나오지 않는다 적용이 되지 않은건 아니고 배경이 경계선 영역 아래로 확장된 것이다. 흰색배경에 반투명 경계선이면 아예 적용이 안된 것처럼 보일것이다. 그래서 이렇게 적용해준다. border:10px solid hsla(0,0%,100%,.5); background:white; background-clip:padding-box; 패딩 padding 모서리에서 배경을 자라내도록 하는 것으로 배경이 경계선 아래로 확장되는것이 싫을때도 이렇게 적용하면 된다. background-clip:padding-box; borde.. 2021. 5. 12. 이전 1 다음
