nav
: 다른 페이지로의 이동, 사이트 링크 등을 보여주는 구획.ul
: 목록을 나타내는 구획.ol
, li
tag 등을 사용할 수 있다.padding/margin
설정으로 여백을 제거할 수 있다.*{
padding: 0;
margin: 0;
}
list
tag에 속한 요소들은 옆에 인덱스(점) 활성화되며, list-style
설정으로 제거할 수 있다. *{
list-style : 'none';
}
부모 tag에서 동일한, 여러 개의 자식 tag가 존재할 경우
:firstchild
등을 통해 개별적인 요소별 접근이 가능하다.
ul li:first-child{
border-left: 1px solid gray;
}
링크를 나타내는 a tag의 경우, 해당 부모 구획을 참조해서 모든 영역을 클릭할 수 있도록 할 수 있다.
ul li a{
display: block;
height: 60px;
}
inline요소의 가운데 정렬은
text-align
line-height
를 통해 할 수 있다.
ul li a{
text-align: center;
line-height: 60px;
}
버튼을 클릭하였을 때의 활성화(a 요소 border)를 기본값으로 두기 위하여, 부모태그의 높이를 자식태그의 높이와 맞춰준다.
a = document.querySelectorAll('.a')
a = document.querySelectorAll('.a')
for(let node of a){
node.addEventListener('click', (e)=>click(e));
}
function click(e){
e.target.classList.toggle('clickTab')
}
.tab .ul .li .clickTab{
border-color: aqua;
}
현재 선택한 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);
}
innerText/innerHTML
https://hianna.tistory.com/480
javascript array 요소 다루기
https://gent.tistory.com/295