Outputor

carousel slider 업그레이드 버전 prev 버튼을 누르면 이전 슬라이더를 보여줌 next 버튼을 누르면 다음 슬라이더를 보여줌 슬라이더를 추가하고 싶으면 .slide-container의 width값을 변경해주고 슬라이더를 추가해주면 끝임 (각 슬라이더는 300px이고 원하는 값으로 변경하려면 inner, .slider-container, slide-box의 width값을 변경하면 됨) - [x] 1번 슬라이드가 보일때 PREV버튼을 누르면 이동안함 - [x] 2번 슬라이드가 보일때 PREV버튼을 누르면 0px를 이동함 - [x] 3번 슬라이드가 보일때 PREV버튼을 누르면 -300px를 이동함 - [x] 1번 슬라이드가 보일때 NEXT버튼을 누르면 -300px 이동함 - [x] 2번 슬라이드가..

carousel slider 쉬운 버전 숫자 버튼을 클릭하면 숫자에 맞는 슬라이더를 보여줌 .style.transform = 'translateX(-0px)' ➡ translateX를 문자열로 작성함 - [x] 1번 버튼을 클릭하면 슬라이드 컨테이너를 0vw 보내기 - [x] 2번 버튼을 클릭하면 슬라이드 컨테이너를 -100vw 보내기 - [x] 3번 버튼을 클릭하면 슬라이드 컨테이너를 -200vw 보내기 See the Pen Untitled by output777 (@output777) on CodePen.

span 태그는 text-align 적용이 안되므로 display: inline-block; 지정 후 text-align: right 적용함 차트 라이브러리 https://www.chartjs.org/ Chart.js | Open source HTML5 Charts for your website New in 2.0 New chart axis types Plot complex, sparse datasets on date time, logarithmic or even entirely custom scales with ease. www.chartjs.org 더보기 더보기 HTML home house Services headphones Alerts flag Stats stacked_bar_chart search..

더보기 더보기 더보기 HTML 나이키 아디다스 반스 참 잘했어요. 앞으로도 계속 잘부탁합니다 이정도면 괜찮아요. 조금 더 발전하면 좋겠습니다 너무 부족하네요. 이러면 같이 가기 힘들어요 1 of 2 2 of 2 1 of 3 2 of 3 3 of 3 더보기 더보기 더보기 SCSS // LIST @mixin list () { border: 1px solid #e9ecef; padding: 10px 0px 10px 10px; font-size: 20px; } @mixin active () { background-color: #1c7ed6; color: #fff; } ul { list-style: none; margin: 0; padding: 10px; .list { @include list(); } .list..

1. max-width ➡ width(%)와 max-width를 같이 쓰는게 반응형하기 좋음 2. mix-width ➡ width(%)와 max-width를 같이 쓰는게 반응형하기 좋음 더보기 더보기 코드 Peter Front-end Developer location_on 서울특별시 Contact Location Age Experience School 서울특별시 22년생 신입 MIT Profile WORKS Landing page design Shopping page design To-do app Front-end ABOUT Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum temporibus quae quos earum obcaecati nul..

Shadow DOM 개발자도구를 켠 상태에서 F1 를 누르면 환경설정이 나옴 Show user agent shadow DOM을 체크함 숨겨진 HTML 요소의 스타일을 설정할 수 있음 -webkit- : 크롬, 오페라, 사파리, Edge 브라우저에서 사용함 -moz- : 파이어폭스에서 사용함 -ms- : 익스플로러에서 사용함 progress 설정할 때 appearance: none을 해줘야 함 더보기 더보기 코드 업로드

반응형을 만들 때는 모바일 버전을 먼저 확인하고 만드는 것이 좋음 order로 순서 제어하면 편함 float으로 만들었음 (flex 사용하면 훨씬 편함) 더보기 더보기 코드 Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa veritatis fugit, culpa quae incidunt laudantium quo dolor ratione Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa veritatis fugit, culpa quae incidunt laudantium quo dolor ratione Lorem ipsum dolor sit amet consectetur adipis..

여러개의 box를 가운데 정렬하기 위해서는 태그로 감싸준다음 하는게 좋음 넓이를 계산하기 어려운 경우 calc를 이용하면 편함 더보기 더보기 코드 Document Card Title Lorem, ipsum dolor sit amet consectetur adipisicing elit. Card Title Lorem, ipsum dolor sit amet consectetur adipisicing elit. Card Title Lorem, ipsum dolor sit amet consectetur adipisicing elit. Card Title Lorem, ipsum dolor sit amet consectetur adipisicing elit.