쥰's 블로그

● flex는 부모에서 잡는 것 ● sementic태그 : 웹문서를 의미있는 블록으로 나누어 구조를 만드는데 사용되는 태그 : 헤더 섹션 : 네비게이션 링크 섹션 : main안의 특정 영역 지점 섹션 : 문서의 본문 섹션 : 문서의 사이드바 영역 : 푸터 영역 : 문서 주요 컨텐츠 영역 header의 menu에 커서를 올리면 submenu가 보인다.

(1) ● display : flex; 는 자식한테만 설정 가능, 자손한테는 영향 안 미침 ● 수평배치 : center, right, left, space-bottom, space-evenly, space-around ● 수직배치 : start, end, center, flex-end, flex-star ● row, column 형태로 item 방향 지정 ● flex-wrap: wrap; : item의 크기가 부모를 초과하면 다음 행에서 보여줄지 여부 자손의 길이가 길어도 부모를 벗어 날 수 없어 원하는 값만큼의 길이를 가지지 못해 밑으로 내려보내는 것 (2) ● align-items를 center로 잡으면 align-content:stretch가 되지 않음 (3) ● flex : 증가비율 감소비율 퍼센트

● z-index : auto 순서에 맞게 z-index를 고려, 남발하면 나중에 복잡해짐 position이 설정이 안되어 있는 요소의 스타일엔 z-index 는 설정 할 수 없다.

첫 화면에서 스크롤을 조금 내리면 relative와 absolute는 위로 그 자리에 있어 위로 올라가버리고 fixed는 스크롤을 따라 계속 보이며 sticky는 부모태그 안에서는 스크롤을 따라 움직이다가 부모태그가 끝나면 벗어나지 않고 올라가버린다.

첫 화면에서 스크롤을 내려도 top-header부분이 위쪽에 고정되어 있는 것을 볼 수 있다.

- 가로버전 li:hover 시 해당 .submenu만 표시> .wrapper>header>nav>.menu>li:hover .submenu{ display: block; } -가로버전 처음 실행 시키면 이 화면이 나오지만 메뉴박스 위에 커서를 가져다 되면 밑에 화면처럼 나온다. 또 다른 버전 위의 코드와 거의 흡사하다. - 세로 버전 .wrapper>header>nav>.menu:hover .submenu{ display: block; } - 세로화면

● 상위태그(.parent)에 반드시 position 설정해야 함 ● 가운데 배치시키는 방법 : top. left, right, bottom을 0px으로 잡고 margin을 auto로 하면 됨

● Position : Box의 위치를 저장할 때 사용하는 속성 ● static : Box요소가 문서 흐름에 따라 배치(순차적) ● relative : Box요소가 문서 흐름에 따라 배치(순차적), 상위 Box요소를 기준으로 위치 지정가능 ● absolute : 상위 Box요소를 기준으로 위치 지정가능, 상위 Box요소가 Position 설정이 되어 있어야 기준으로 지정됨 상위 Box요소가 Position 설정이 되어 있지 않다면 Viewport를 기준으로 위치 조정 가능 ● fixed : Viewport를 기준으로 위치조정 가능, Scroll Event와 무관하게 고정위치 선점 ● sticky : 스크롤 영역을 기준으로 배치, 스크롤 위치를 따라가다가 일정위치를 넘어서면 고정 ● position:sta..

● :first-child : 첫번째 자식요소 ● :last-child : 마지막번째 자식요소 ● :nth-child(n) : n번째 자식요소

● 수평배치 : display : flex; ● 메뉴를 왼쪽으로 미려면 left : 0; 오른쪽으로 미려면 left : 100%;하면 된다. ● 메뉴의 구분선을 없애려면 content : '|' 하면 된다.