devBB
close
프로필 사진

devBB

github: @denev6

  • 분류 전체보기 (53)
    • IOS (7)
    • 웹 (37)
    • 파이썬 (3)
    • 국비풀스택 (3)
    • CSS (1)
  • 홈
  • 태그
  • 글쓰기
  • new코드펜

웹4 수업페이지

💎1일차    스와이퍼 페이지 넘김 버튼 커스텀하기📘코드펜: 커스텀 1단계(버튼 구조 밖으로 빼기)                              2단계(relative설정 후 버튼 위치 조정)                              3단계(버튼 좌우 여백 설정)                              4단계(버튼 디자인 새롭게 하기, 버튼 반절 걸치기) 📗숙제: 팝업 복습    💎2일차    스와이프 페이지네이션 커스텀하기📘코드펜: 커스텀 1단계                             2단계    💎3일차    반응형 사이트📘코드펜:  반응형 이미지                   최소 높이 고정된 반응형 이미지                   미디..

  • format_list_bulleted 웹
  • · 2024. 6. 17.
웹4  3일차

웹4 3일차

{**Tip**}언스플래쉬: 무료 이미지 사이트핀터레스트: 이미지 참고 사이트   [반응형과 고정형] 반응형과 고정형 두가지 개념이 섞이게 되면 이도저도 아닌 사이트가 구현된다.  반응형 사이트는 특정한 상황을 제외하고 대부분 퍼센테이지로 구현된다.   [앱과 반응형 사이트] 앱은 플레이스토어나 앱스토어에서 판매하는 상품 반응형 사이트는 플랫폼에서 판매하는 앱이 아닌 url주소로 접속하는 모바일 기기에 반응할 수 있는 사이트 이 두가지는 개발되는 방식이 완전히 다르다.   [반응형 이미지] 이미지는 기본 고정형으로 작동 이미지 기본 display 속성값이 inline으로 하단 여백 있음 =>  여백 제거: display: block;으로 설정해서 사용.  반응형 이미지는 정말 특정한 경우를 제외하고 wi..

  • format_list_bulleted 웹
  • · 2024. 6. 14.
웹4  2일차

웹4 2일차

[id 선택자 VS class 선택자]HTML의 id 선택자는 특정 요소를 식별하는 데 사용된다. id는 문서 내에서 고유해야 하고, 각 요소에는 하나의 id만 할당할 수 있다. 아래는 사용 예시이다.HTML내 요소CSS id선택자 사용예시#myElement {color: red;}JS id선택자 사용예시var element = document.getElementById("myElement");     [스와이퍼 페이지네이션 커스텀하기]1. 커스텀하는 이유?스와이퍼는 기본 페이지네이션이 있다.  디자인을 예쁘게 하고 싶을 때나,텍스트를 넣어 사용자에게 편리하게 할 때와 같은 상황에서 페이지네이션을 커스텀할 수 있다.  2. 커스텀하는 방법텍스트로 되어있는 페이지네이션을 만들어 보자. 1) 스와이퍼 공식 ..

  • format_list_bulleted 웹
  • · 2024. 6. 12.
웹4  1일차

웹4 1일차

[스와이퍼 버튼 커스텀하기]기본 스와이퍼의 페이지 넘김 버튼은 페이지 위에 겹쳐져 있어, 사용자들이 보기에 불편한 위치에 있다.    페이지 넘김 버튼을 보기 좋게 페이지 밖 양옆에 위치하도록 커스텀 하자.  1. 스와이퍼 전체 감싸주는 swiper-box요소 만들어 주기페이지 넘김 버튼을 swiper 밖으로 빼낼 것이므로 swiper-box요소를 swiper의 부모 요소로 생성해준다.추가로 더 감싸주는 container도 생성해준다. ...   2. 페이지 넘김 버튼 구..

  • format_list_bulleted 웹
  • · 2024. 6. 11.
웹3  9일차

웹3 9일차

{**Tip**}스와이프 html구조를 삽입해줄 때 swiper-box는 스와이퍼 구조 형제로 타이틀이나 다른 큰 구조가 들어올수도 있기 때문에 항상 만들어줘야 한다.     [스와이프 한 번에 여러 개 넘기기]스와이프의 기본 구조는 아래와 같다. 의 자식 엘리먼트로 슬라이드 페이지들이 있다. 화살표 버튼을 눌러 넘어가는 페이지들이 .swiper-slide를 클래스로 가진 엘리먼트들이다. 아래에는 Slide1~3로 총 세 페이지가 있음을 알 수 있다.  쇼핑몰 사이트에서 볼 수 있는 스와이퍼는 한 번에 여러 개의 상품를 넘긴다. 어떻게 여러 개를 넘길 수 있게 할 수 있을까?  한 페이지에 여러 개의 박스(쇼핑몰의 경우, 상품)를 만들면 된다.  화살표 버튼을 눌러 넘기면 한 페이지가 넘겨지지만, 마치 ..

  • format_list_bulleted 웹
  • · 2024. 6. 10.
웹3  8일차

웹3 8일차

[스와이프 라이브러리 사용하기]1. 스와이퍼 사이트에서 'Get Started' 버튼 클릭  2. 'Use Swiper from CDN' 영역에서 라이브러리의 css, script링크코드 복사 후 삽입  3. 'Add Swiper HTML Layout' 영역에서 html 기본구조코드 복사 후 삽입  4. 'Swiper CSS Styles/Size' 영역에서 css 기본 코드 복사 후 삽입  5. 'Initialize Swiper' 영역에서 JS기본코드 복사 후 삽입  6. 스와이퍼 기본 형태 확인정확히 확인할 수 있도록 스와이퍼의 배경색을 '#e1e1e1'로 지정하였다.  css로 중앙정렬을 시키지 않았음에도 불구하고 스와이퍼가 중앙정렬한 모습을 보아, 삽입한 라이브러리의 css링크로부터 기본적으로 세팅..

  • format_list_bulleted 웹
  • · 2024. 6. 5.
  • navigate_before
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • ···
  • 9
  • navigate_next
공지사항
전체 카테고리
  • 분류 전체보기 (53)
    • IOS (7)
    • 웹 (37)
    • 파이썬 (3)
    • 국비풀스택 (3)
    • CSS (1)
인기 글
전체 방문자
오늘
어제
Copyright © 개발병아리짹 모든 권리 보유.
SKIN: Copyright © 쭈미로운 생활 All rights reserved. Designed by JJuum.
and Current skin "dev-roo" is modified by Jin.

티스토리툴바