[WebDevCurriculum] Tab 기본 logic

1. tag 개념

• nav : 다른 페이지로의 이동, 사이트 링크 등을 보여주는 구획.
• ul : 목록을 나타내는 구획.
  → ol, li tag 등을 사용할 수 있다.

2. CSS 개념

• 기본적으로 화면의 여백이 존재하기 때문에, padding/margin 설정으로 여백을 제거할 수 있다.

*{
	padding: 0;
	margin: 0;
}

• list tag에 속한 요소들은 옆에 인덱스(점) 활성화되며, list-style 설정으로 제거할 수 있다.

*{
	list-style : 'none';
}

3. layout 구성 관련 참조개념

부모 tag에서 동일한, 여러 개의 자식 tag가 존재할 경우 :firstchild 등을 통해 개별적인 요소별 접근이 가능하다.

ul li:first-child{
	border-left: 1px solid gray;
}

• li요소 중 첫번째 요소에 접근하여, 해당 요소에 대해서만 border-left 수정을 한 경우.

링크를 나타내는 a tag의 경우, 해당 부모 구획을 참조해서 모든 영역을 클릭할 수 있도록 할 수 있다.

ul li a{
	display: block;
	height: 60px;
}

• 부모 요소인 li tag의 height만큼 a tag도 같이 증가시켜준다.
• a는 원래 inline 요소로, height를 늘리기 위해선 display를 block 요소로 바꿔줘야 한다.

inline요소의 가운데 정렬은 text-align line-height를 통해 할 수 있다.

ul li a{
	text-align: center;
	line-height: 60px;
}

• line-height은 1줄만 가능하다.

버튼을 클릭하였을 때의 활성화(a 요소 border)를 기본값으로 두기 위하여, 부모태그의 높이를 자식태그의 높이와 맞춰준다.

• 부모태그와 자식태그의 높이가 같을 경우, 자식태그가 먼저 나타난다(높이가 다르면 두 요소가 모두 보여짐).

4. addEventListener 유의사항

• ul, li, a 등 inline 요소 tag 및 선택자(querySelector)를 적절히 활용한다.
  ※ a = document.querySelectorAll('.a')
• 특히 모든 요소, tag에 EventListener 추가가 필요하다면 선택자 사용에 유의한다.

a = document.querySelectorAll('.a')

			
			for(let node of a){
				node.addEventListener('click', (e)=>click(e));
			}

			function click(e){
				e.target.classList.toggle('clickTab')
			}
			

• Event가 적용되지 않는다면 적용경로, class이름 등을 다시 한번 확인해본다.

 
.tab .ul .li .clickTab{
	
	border-color: aqua;

}

• 기본적으로 class toggle은 두개 이상의 class가 존재해야 한다.
  (*오류 발생시 단독 toggle이 아닌지 확인)

5. 하나의 Tab만 선택하도록 구성

• 여러개의 Tab 중 하나만 선택할 수 있도록 구성한다
  ※ Tab이 중복되지 않도록, 한 Tab을 선택하면 다른 Tab은 선택해제한다.

현재 선택한 Tab의 내용을 저장할 배열을 선언한다.

Tab의 모든 요소에 대해 click 이벤트를 저장한다.

let checkList = [];

			for(let node of a){
				node.addEventListener('click', (e)=>click(e));
			}

배열, event target, class id 등을 활용하여 tab 선택이 중복되지 않도록 한다.

function click(e){
				
			if(checkList.length == 0){
				checkList.push(e.target.id);
				//console.log(checkList[0]);
				e.target.classList.toggle('clickTab');
              
			}else if(checkList.length > 0 && checkList.includes(e.target.id)){
				checkList.pop(e.target.id);
				//console.log(checkList[0]);					e.target.classList.toggle('clickTab');

			}else if(checkList.length > 0 && !(checkList.includes(e.target.id))){
				//console.log(checkList[0]);
				let previousObject = document.getElementById(checkList[0]);
				previousObject.classList.toggle('clickTab');					
              
              			e.target.classList.toggle('clickTab');
          
				checkList.pop();
				checkList.push(e.target.id);
			}
  //console.log(e.target.innerText);
			//console.log(e.target.id);
}

6. 참조링크

innerText/innerHTML
https://hianna.tistory.com/480

javascript array 요소 다루기
https://gent.tistory.com/295