드림코딩) 반응형헤더 만들고, 토글효과 주기

minji jeon·2022년 6월 9일

CSS Flex 토글

토이프로젝트

목록 보기

5/6

오늘 퀴즈를 풀었는데 css문제를 틀렸버렸다.
반성의 의미로 css강의를 하나때렸다.

시맨틱한 html

어느정도 순서가 있는 아이들은 보통 : ul로 해주기
a, li, ul태그 적극 활용하기
헤더부분은 nav태그

반응형 css

css는 레이아웃잡고 상세로 시작하기
block레벨은 한줄에 div하나씩 출력됨 --> 그럴경우 flex를 사용한다. 한줄에 나란히로 바뀜.
나란히에서 중간중간 간격을주려면 justifycontent-spacebetween
수직적중간 : align items:center
li를 줄 경우 앞에 특수문자가 붙는다. 특수문자는 list-style:none 으로 하면사라짐
a태그 하이퍼링크 효과 없애기 text-decoration:none
block인 친구들 한줄로 만들어줄때는 flexxx
아이콘 사이에 간격을 줄때 margin 말고 paddding추천 왜냐면 마우스클릭 할 범위를 넓혀주기 위해

        flex-direction: column;
        align-items: flex-start;}```
//중심축이 column이면 세로이고 
세로에서 앞쪽으로 정렬시켜주고 싶으면 aligh-itemss flex-start

justify-content: center;를 했는데 가운데로 안온다 :width 100%주기
그럼에도 정가운데가 아니다 : padding , margin확인하기
미디어 쿼리 사용하기
@media screen and (max-width:768px) {
생각보다 어렵지 않다~!!

갑자기 든 생각

align-items vs text align

이둘의 차이는..?

:justify는 축의 방향, align은 축의 수직방향으로 생각하시는게 좋습니다.
justify는 오뎅꼬치에 끼우는 경우 축이 오뎅꼬치라고 생각하면 된다.
그리고 align은 오뎅꼬치의 수직방향인 것이다.
flex-direction: row 일 때 justify-content는 가로 방향이지만 flex-direction: column이 되면 세로 방향으로 바뀌거든요.

align-items vs align-contents

align-items는 한 줄을 기준으로 정렬하는 반면, align-content는 두 줄부터 사용하는데 의미가 있다

그래서 align-content의 경우, 두 줄의 flex-wrap:wrap;인 상태에서 사용해야 한다.

만약 no-wrap이면 라인이 넘어가지 않아 계속 한 줄인 상태이기 때문에

align-content를 사용해도 적용이 되지 않는다.

클릭이벤트로 active클래스 토글링 하기

 .menu.active{
        display: flex;
    }
     .navbar-icon.active {
        display: flex;
    }
}

우선 해당 클래스에 액티브클래스를 추가하기

const barBtn = document.querySelector(".navbar-toggle")
const menu = document.querySelector(".menu")
const icon = document.querySelector(".navbar-icon")

barBtn.addEventListener("click", () => { 
menu.classList.toggle('active')
icon.classList.toggle('active')
})