📍 javascript 파일의 연결
JS 내용이 너무 길어질경우 html 파일에 직접 쓰는것은
가독성이 떨어지고, 코드가 너무 길어짐
→ 따로 JS 파일을 만들어서 연결해준다. ( 끝이 .js 로 끝나는 파일 만들기 )
→ html 파일에 script 태그의 src 에 파일의 경로를 입력한다.
📍 탭기능 만들기 전 - 탭기능 만들기 순서
원하는 div 박스 보여주기 →
동일한 class 이름으로 display: none; 으로 안보이게함 →
display: block; 인 클래스를 CSS 파일에 만듦 →
클래스명을 추가하면 보이게 해주면 됨.
📒 jQuery 셀럭터 추가 설명
$('')는 해당하는 이름의 모든것을 찾아주기때문에,
똑같은 이름에서 특정지어 지정하고 싶다면
eq.(순번) 를 뒤에 적어주면됨.
그리고 반복적으로 같은 셀럭터의 사용은 피해주는게 좋은데,
셀럭터를 계속 찾는것이 웹브라우저를 느리게 만들수도 있기때문
(요즘 컴퓨터는 좋아서 크게 차이 안나김함.)
∴ 반복되는 셀렉터의 경우 변수로 만들어 사용하는것이 좋다.
✏️ 탭 기능 만들기
위의 사진처럼 탭 UI 를 만든 후, 윗부분 버튼을 누름에 따라 설명이 달라지게 만든다.
but 이렇게 코드를 짜면 너무 코드가 길어지고 반복됨.
📍 for 반복문
똑같은 형태의 코드를 반복할때 사용함.
- 횟수를 적는 곳은 정해진 식이 있음
→ 이런 형태로 적으면서 숫자를 바꾸면 다른 횟수로 변형 가능.
∵ 위의 탭 기능을 for 반복문을 이용해서 적으면 밑의 코드와 같다.
이때 반복문의 횟수조건에서는 var 를 이용한 변수가 잘 적용되지 않았다.
그래서 let 으로 변경하여 적으니 적용이 잘되었다.
그 이유는 변수의 범위 때문인데, var 로 만들어진 변수 i는 범위가 for 보다 더 넓지만,
let 같은 경우에는 { } 안의 범위이므로 for 안의 범위가 된다.
컴퓨터는 더 가까운쪽 변수를 가져다 쓰기때문에
var 가 아닌 let 을 사용할때 오류 없이 정확하게 작동한다.
⭐️ 그냥 잘모르겠다면 for 문안에는 let 을 사용하자!!!
→ 하지만 이 경우 버튼과 content 의 갯수가 늘어나면 계속해서
JS 를 고쳐줘야하는 불편함이 있다.
i < 3 여기를 이렇게 고정된 숫자말고, 버튼의 갯수로 바꿔주면 해결될듯은데...
열심히 구글링 했다.
