전체 글104 Jquery 예제 prev / next 버튼을 이용한 슬라이드 메인 배너 이미지 3장을 버튼을 이용하여 슬라이드 시키고 해당 이미지의 인디케이터가 활성화 되도록 만들기 기본 구조 => 메인 배너 영역 => prev next 버튼 이미지 => 인디케이터 영역 => 활성화 이미지 => 비활성화 이미지 let bunNum = 0 $('.next').click(function(){ if(bunNum >= 3) { return false } bunNum ++ // next 버튼을 클릭했을때 만약 bunNum의 값이 3보다 크거나 같다면 아무것도 실행 하지 않음. // 아니라면 bunNum의 값을 하나씩 더해줄것이다. main_w = $('#main').width() $('#main ul').animate({ left: -main_w * bunNum // lefe값을 -가로값.. 2023. 4. 16. Jquery 예제 setinterval 자동 슬라이드 메인 배너 이미지 3장을 자동 슬라이드 -ul 내부에 이미지 요소 3장을 나란히 배치해 둔 상태 setinterval(function(){함수실행문},시간) => 자동으로 함수를 반복 실행 setinterval(function(){ const left1 = $('ul').css('left') // 슬라이드 하려는 요소의 left 값을 저장 if( parseInt(left1) == -1672 ) { // 슬라이드 요소의 left값을 정수로 변환 후 슬라이드 3개 요소를 합친 크기와 비교 $('ul').animate({left:0},'slow') // 슬라이드가 3장이 지나가면 left값을 0으로 주어 처음 상태로 되돌림 } else { $('ul').animate({ left: '-=836px' },'sl.. 2023. 4. 16. Jquery 기본 속성 문서의 시작 - jquery가 본문 내용을 먼저 읽고 실행 할 수 있도록 작성해주어야 하는 함수 $(document).ready(function(){ => 이 안에 모두 작성 }) => 아래처럼 간략하게 사용 가능 $(function(){ }) 기본 작성 방법 - css 사용법과 비슷하게 id, class, 태크 요소를 선택하여 사용할 수 있다. //요소를 지정하여 css 속성 변경하기 $('h1').css('color', 'orange') $('p').css({ 'border': '1px solid red', 'width': '100px' }) // nth-child 요소 지정 $('ul li:first-child') 첫번째 자식 요소 선택 $('ul li:last-child') 마지막 자식 요소 선택.. 2023. 4. 16. 프론트엔드 예제 (1) Overwatch 캐릭터 선택 html과 css만 이용하여 간단한 overwatch 캐릭터 선택 예제를 만들었다. https://warm-kataifi-1e2fe8.netlify.app/ display: flex; flex-wrap: wrap; justify-content: center; => hero 각 아이템들의 자연스러운 줄 바꿈 처리와 수평 정렬. 캐릭터 박스 크기보다 이미지의 크기가 커서 넘치는 부분은 overflow: hidden; 적용 캐릭터에 마우스를 올렸을 때 배경 색상과 크기가 커지는데 다른 형제 요소보다 위에 위치할 수 있도록 :hover를 적용한 코드에 z-index: 1; 적용 가로 값이 존재하는 요소의 margin: auto; 로 작성하면 수평 가운데 정렬됨. transition: transform .1s ,.. 2022. 11. 24. CSS 기본속성(7) 전환 효과와 변환 효과 전환 효과 - 요소의 전환을 자연스럽게 만들어주는 속성 transition : 요소의 전환 효과를 지정하는 단축 속성 - transition: 속성명 지속시간(필수 포함 속성) 타이밍 함수 대기시간; - transition-property 전환 효과를 사용할 속성 이름 지정 - 기본값 all - 속성 이름 명시 (width, background-color ...) - transition-duration 전환 효과의 지속시간 지정 - 기본값 0 - 시간 (1s , 2s ...) - transition-timing-function 전환 효과의 타이밍 함수 지정 - 기본값 ease (느리게-빠르게-느리게) - linear 일정하게 - ease-in (느리게-빠르게) - ease-out (빠르게-느리게) - e.. 2022. 11. 24. CSS 기본 속성(6) 플렉스 정렬 플렉스 정렬 - 부모 요소에 display 값을 flex로 지정하여 정렬하는 방법 - flex : 블록요소 - inline-flex : 인라인 요소 - 블록 요소는 기본적으로 수직으로 쌓이지만 flex를 통해 수평 정렬이 가능하다. 1 2 3 .parent { width: 400px; height: 300px; background-color: royalblue; display: flex; } .child { width: 100px; height: 100px; border: 1px solid red; background-color: orange; } => flex 적용으로 블록 요소를 쉽게 수평 정렬하였다. => 이렇게 flex를 사용하면 부모 요소는 flex container라고 부르며 자식 요소는 fl.. 2022. 11. 24. 이전 1 ··· 12 13 14 15 16 17 18 다음
