코딩하는 복서 🥊

1. filter() 메서드란? 주어진 배열에서 조건에 맞는 모든 요소를 모아 새로운 배열로 반환합니다. 2. 사용법 const result = arr.filter(A => B); === arr(배열)에서 B 조건에 부합하는 요소 (A) 를 result 변수에 배열로 담는다.

좌,우로 넘어가는 배너가 아닌 CSS의 z-index를 활용하여 앞,뒤로 넘어가는 배너를 만들어보자 1. z-index란?CSS z-index 속성은 위치 지정 요소와, 그 자손 또는 하위 플렉스 아이템의 Z축 순서를 지정합니다. 더 큰 z-index 값을 가진 요소가 작은 값의 요소 위를 덮습니다.=== Z축 순서를 정하는 속성이라고 한다. 1) 그럼 Z축은 무엇인가?보통 X축이 가로, Y 축이 세로일때 앞뒤축이 Z축이다. 2) demo를 통해 z-index의 역할을 알아보자.- auto는 부모요소의 순서를 그대로 따른다. - 숫자가 들어갈 경우, 숫자가 높은게 더 앞에서 보이는 것을 알 수 있다.=== z-index의 숫자를 높이면 앞으로 튀어나온다. 그럼 이걸로 뭘 할 수 있다? 옆으로 넘어가는게 ..

1. 수동 슬라이드 배너 만드는 방법은 지난 포스팅 참고 https://stukkifather.tistory.com/51 [html, css, js] 초간단 슬라이드 배너 (캐러셀) 만들기 1. 슬라이드 원리 1) 일정한 크기의 이미지들을 float:left로 '가로'로 정렬 2) overflow: hidden 으로 딱 한장씩만 보이게 함 3) 버튼을 누르면 transform: translateX(±한장크기)로 한장씩 다음/이전 슬라이드 stukkifather.tistory.com 2. 자동 슬라이드를 만들어보자 1) 기존에 만들어둔 함수를 활용 2) setInterval 함수를 활용, 2초마다 넘어가고 마지막 장이면 처음으로 돌아가도록 세팅 setInterval(()=>{ if(currentSlide ..

1. 슬라이드 원리1) 일정한 크기의 이미지들을 float:left로 '가로'로 정렬 2) overflow: hidden 으로 딱 한장씩만 보이게 함 3) 버튼을 누르면 transform: translateX(±한장크기)로 한장씩 다음/이전 슬라이드 이동 2. HTML 작성1) 슬라이드는 4개 준비 2) 이전 버튼, 다음 버튼도 빠지면 섭함 3) 아이콘은 폰트어썸(fontawesome)에서 연결 DOCTYPE html> new_slide 3. CSS 작성1) float: left 로 이미지를 가로열로 정렬 .slide_item { float: left; } 2) 슬라이드에 한장 크기로 width를 정하고 넘치는건 숨기는 overflow: hidden 시전 (이쁘게 센터도 잡음) - 여기서 배너 수가 많아..

1. HTML (Hyper Text Markup Language) 1) 웹 브라우저 상에서 보여지도록 만든 '문서' e.g) 음악파일을 실행하면 음악 재생 프로그램을 통해 소리가 나오는 것과 같음. 2) 웹 개발의 가장 기초적인 구성 요소로 웹 콘텐츠의 '구조'와 '의미'를 정의 3) 표준화된 Markup 언어를 사용 *Markup 언어란? 1) 일반적인 텍스트와 문법적으로 구분하기 위해서 문서상 annotating, 즉, 주석을 달아 구조적으로 만든 텍스트이다. e.g) 를 이용해서 구조적으로 쓰여짐 2. HTML 문서 구조 1) : 문서 형식을 나타냅니다. HTML 초창기에 (1991~2년) doctype은 HTML 페이지가 자동 오류 검사나 다른 유용한 것이 가능한 좋은 HTML을 의미하는 연결고리..