프론트엔드/Css
웹 페이지 로딩 시 로딩 이미지 보여주기
1. 로딩 이미지 https://preloaders.net/ 무료 이미지사이트 2. 로딩 이미지 적용하기 공통으로 쓰는 페이지는 이름을 common 으로 사용 하고 있습니다. 파일로 따로두지 않고 에 넣어 사용하셔도 돼요! // 윈도우가 다 load 되고 나서 id="load" 인 항목을 감춰줍니다. // div 는 전체 화면을 반투명하게 보여주는 역할을 합니다. CSS #load { width: 100%; height: 100%; top: 0; left: 0; position: fixed; display: block; opacity: 0.8; background: white; z-index: 99; text-align: center; } #load > img { position: absolute; to..
부트스트랩(Bootstrap) 캐러셀(Carousel) 자동 슬라이드 이미지 사용법
Previous Next 위 예시 코드에서 img태그 링크만 변경해주면 기본 캐러셀 사용법 끝입니다.
Css 레이아웃에서 중요한 display: flex(Flexible Box) 사용법
1. 부모 요소인 container와 자식 요소인 item이 있습니다. 컨테이너가 Flex의 영향을 받는 공간이라고 생각하시면 됩니다. 1 2 3 2. container에는 diplay, flex-flow, flex-direction, flex-wrap, justify-content, align-content, align-items 등의 속성을 사용할 수 있습니다. 속성 의미 display : flex flex container를 정의 flex-direction Flex Items의 주 축(main-axis)을 설정 flex-wrap Flex Items의 여러 줄 묶음(줄 바꿈) 설정 flex-flow flex-direction와 flex-wrap의 단축 속성 justify-content 주 축(main..
<picture> 반응형 홈페이지에 배너를 적용할때 필요한 Css 태그
태그는 웹과 모바일에서 배너를 해상도 별로 다른 배너 이미지를 적용 시킬 때 사용합니다 예시로는 midia에 "max-width: ??px" 이나 "min-width: ??px"로 원하시는 넓이 값마다 변하게 설정을 하고srcset에 변경할 이미지 경로를 설정해주시면 됩니다.기본값은 img태그 그대로 쓰시면 됩니다