개발 여행 개발 여행

Front-end/CSS

• CSS scroll-snap 속성을 이용하여 스와이퍼 구현하기

  Front-end/CSS 2020. 11. 13. 01:18

  scroll-snap scroll-snap은 사용자가 터치 혹은 스크롤 조작을 하였을 때 offset을 설정할 수 있는 속성입니다. 예를들면 에어비앤비 모바일 환경의 숙소 사진을 볼 때 스와이퍼 형태가 바로 이런 방식인데요, 볼 때는 많은 기능들이 들어간 것 같지만 scroll-snap을 사용하면 쉽게 구현할 수 있습니다. 위의 기능을 똑같이 구현해보면서 사용법을 익혀보겠습니다. 예제는 iPhoneX를 기준으로 구현하였습니다. ❗️ 이 글은 개인적으로 학습한 정보와 지식을 토대로 작성된 글입니다. 혹시 잘못된 부분이 있거나 수정사항이 있다면 말씀해주시면 반영하겠습니다. 🙏 코드 전체 보기 index.html 슬라이더를 전체를 감싸는 컨테이너 하나, 그리고 이미지들을 감싸는 슬라이더, 그리고 이미지를 감싸..

• [CSS Pattern] 탭(Tab) 패턴

  Front-end/CSS 2020. 7. 23. 17:00

  네비게이션에서 자주 사용되는 탭 패턴에 대해서 알아보겠습니다. HTML HTML CSS Javascript React 전체를 감싸는 div 내에 순서 없는 리스트들을 선언해주었습니다. CSS * { margin: 0; padding: 0; list-style-type: none; box-sizing: border-box; } .wrap-box { display: flex; justify-content: center; width: 100%; background-color: #fff; } .tabs { display: flex; justify-content: center; align-items: center; margin-top: 40px; } .tab { position: relative; padding:..

• [CSS Pattern] 도트(Dot) 패턴

  Front-end/CSS 2020. 7. 23. 14:12

  네비게이션에서 자주 사용되는 도트 패턴에 대해서 알아보겠습니다. HTML 구조는 전체를 감싸는 wrap-box와 도트들을 만들어내기 위해 ul, li를 활용하였습니다. CSS * { list-style-type: none; box-sizing: border-box; margin: 0; padding: 0; } .wrap-box { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 400px; margin: 0 auto; background-color: #34495e; } .dots { display: flex; justify-content: center; align-..

• CSS3 간단한 총정리

  Front-end/CSS 2020. 6. 30. 20:11

  선택자 꾸미고자 하는 요소를 지칭할 때 사용합니다. Type Selector HTML 태그 자체를 지칭하는 선택자입니다. 빨간색 문단이 됩니다. p { color: red; } div { background-color: yellow; } Class Selector 요소의 class 값을 지칭하는 선택자입니다. (.)점으로 표현합니다. Hello junjang 코로나 바이러스로 인해 집에서 공부 중입니다. 하루빨리 정상화 되어 카페도 가고 스터디도 나가고 싶습니다. 이상입니다. .red { color: red; } red class를 지칭하는 요소는 전부 빨간색으로 바뀔 것입니다. 만약 한 요소에서 여러 class를 가지고 있다면, 두개의 클래스가 적용된다. div.red.font { color: red;..