syleemomo의 IT 블로그 syleemomo의 IT 블로그

스크롤을 조금 내리면 헤더가 나타나고 scroll to top 버튼도 함께 나타난다. open 버튼을 클릭하면 모달창이 나타나고 뒷배경은 음영처리된다. 또한, 모달창을 확인하는동안 뒷배경이 스크롤되지 않도록 스크롤바는 숨긴다. close 버튼을 클릭하면 모달창이 사라지고 다시 스크롤바가 나타난다. story about contact OPEN header Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis officia, tempora ipsam libero expedita, doloribus velit eveniet delectus omnis nostrum consectetur magnam tempore quas explicabo mol..

부트스트랩 5 를 사용하였고, 화면 상단에는 슬라이드 애니메이션이 동작합니다. images 폴더에 pet1.jpg, pet2.jpg, pet3.jpg, pet4.jpg 파일이 있어야 합니다. https://unsplash.com/ko 아름다운 무료 이미지 및 사진 | Unsplash 어떤 프로젝트를 위해서든 다운로드 및 사용할 수 있는 아름다운 무료 이미지 및 사진입니다. 어떤 로열티 프리 또는 스톡 사진보다 좋습니다. unsplash.com 해당 사이트에서 무료 이미지를 다운로드 받으실수 있습니다. Carousel Home Link Disabled Search First slide label Some representative placeholder content for the first slide. S..

images 폴더에 pet1.jpg 라는 파일이 있어야 제대로 화면이 구성됩니다. About Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information. Contact Follow on Twitter Like on Facebook Email me Album Album example Something short and leading about..

SASS grid 부분 해결 @mixin setGridPosition($col-1, $col-2, $row-1, $row-2){ grid-column: #{$col-1} / #{$col-2} ; grid-row: #{$row-1} / #{$row-2} ; } 애니메이션 구현 부분 테스트 *{ box-sizing: border-box; } html, body{ margin: 0; padding: 0; } section{ width: 100%; height: 100vh; grid-gap: 5px; overflow: hidden; display: none; } section span{ width: 200px; height: 300px; background: #333; color: #fff; font-size:..

* section 의 width: 120vw 로 잡은 이유 120vw 로 잡으면 이미지가 120% 정도 더 커진 상태에서 브라우저 너비를 줄이면 100%까지 이미지가 줄어든다. 이제 브라우저 창을 줄여도 100% 에서는 더이상 사진이 줄어들지 않는다. * body 의 overflow: hidden 으로 잡은 이유 앞서 section 의 width: 120vw 로 잡으면 가로 스크롤바가 생기기 때문이다. 처음 화면 로딩시 양쪽에서 텍스트가 중앙으로 모이는 텍스트 애니메이션 효과가 있습니다. Made fresh to order Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo conse..

사용된 개념 1. border-box 2. 블록요소 인라인요소 3. 상태 연산자 4. 부정 연산자 5. 너비제한 max-width 6. 가로중앙 정렬 margin: auto 7. 텍스트 세로중앙 정렬 vertical-align: middle 8. 블러처리 backdrop-filter: blur() 9. 글래스모피즘 : background-color: rgba(255, 255, 255, .3) 10. 세로중앙 정렬 position: absolute left: 50% top: 50% transform: translate(-50%, -50%) 6. 클래스 간결하게 작성하고 레고 블록처럼 추가하기 Register FIRST NAME LAST NAME EMAIL PASSWORD check_box_outline_b..

This is some title Curabitur convallis ac quam vitae laoreet. Nulla mauris ante, euismod sed lacus sit amet, congue bibendum eros. Etiam mattis lobortis porta. Vestibulum ultrices iaculis enim imperdiet egestas. Read more→ This is some title Curabitur convallis ac quam vitae laoreet. Nulla mauris ante, euismod sed lacus sit amet, congue bibendum eros. Etiam mattis lobortis porta. Vestibulum ultr..

세로중앙 배치문제 status 의 동그라미(.dot)와 글자를 묶고 있는 부모요소에 position: relative 를 적용하고, 그 안의 동그라미와 글자에는 position: absolute, top: 50%, transform: translateY(-50%) 적용해서 세로 중앙에 배치하면 된다. display: inline-block 동작 안하는 문제 부모요소의 너비가 좁으면 자식요소에 아무리 display: inline-block 을 적용해도 수평정렬되지 않는다. 부모요소의 width 를 넓히면 된다. Users Table UI User Status Location Phone Contact Actions Kiran Acharya @kiranacharyaa Active Bangalore +91 98..