CSS
Align-items: stretch 교차축방향으로 container 크기만큼 쭉 늘림.
align-items: start 교차축 방향으로 자기 자신의 크기만큼 가지는데 그게 앞쪽에 붙음(end면 반대쪽에 가서 붙지)(center면 가운데로 감)
이건 justify-content에도 똑같이 적용. 그저 적용 축이 주축일뿐임
Flex-basis >> 자식 elemnt 의 주축방향 기본크기를 결정(ex: flex-basis:90px ; 이런식으로)
Flex-grow >> 자식들이 여백을 남김없이 사용하게함. 여백만큼 커지게함. 정수값을 할당해서 비율 조절 가능. Ex_ 자식 one 한테 flex-grow:1; 자식 two 한테 flex-grow:2; 자식 3한테 flex-grow:3; 으로 지정하면 이 셋이 주어진 공간을 1:2:3비율로 메꿈
Grow는 여백이 남을 때 그걸 자식들한테 분배하는 정책이고 그거랑 반대로 shrink도 있음
여백이 부족한 상황에서 누가 어떻게 줄어들지를 결정하는 정책
Ex_flex-shirnk:0 으로 지정되어있으면 화면이 줄어드는 상황에서 얘만 크기를 끝까지 유지함
Flex-wrap >> 화면이 부족해지는 상황에서 줄바꿈을 시킴.
flex-wrap:wrap; 이나 flex-wrap:no-wrap 을 사용. No-wrap이면 줄바꿈을 끝까지 안함.
JavaScript
처음으로 JS코드를 짜는데 성공했다! 기쁘다!
const listbtn = document.getElementById("open");
const list = document.getElementById("list");
list.style.display = "none";
function handleListClick() {
const listState = list.style.display;
if (listState === "none") {
list.style.display = "";
} else {
list.style.display = "none";
}
}
listbtn.addEventListener("click", handleListClick);
코드 표현할때 이렇게 하는게 아닌가 보기 안좋네...
함수는 아직도 너무 어렵게 느껴진다..
Trial & Error
함수에서 뱉어낸 값을 사용하고 싶은거면
함수 내에서 return을 해줘야 한다.
그리고 return으로 받은 값을 써먹을라면 변수를 할당해 줘야한다.
