WECODE 사전스터디 1주차, 자기소개페이지 만들기!
구글링하며 알게된 것, 해결 못한 것들을 정리해 보자
어거지로 만들어 본 첫 페이지..!
새로 알게된 것
1. flex box
flex box로 상단 네비게이션 바를 만들고 스크롤을 내려도 바가 유지될 수 있도록 fix 프로퍼티를 줬다.
우선!
div 박스의 default는 block이고 수평배열이 안 된다. 수평으로 배열하고 싶으면 display: inline으로 설정해야 함. 그러나 inline으로 설정하면 높이와 넓이를 못 가진다.
그러나, display: flex;로 이러한 문제 해결 가넝
-
flex박스는 자식요소에는 선언할 필요 x, 부모요소한테 말하면 된다.
-
flex-direction
row, row-reverse, column, column-reverse
-
justify-content:
justify-content 속성은 플렉스 요소의 수평 방향 정렬 방식을 설정한다.flex-start, flex-end, center, space-between, space-around
-
align-items:
플렉스 요소의 수직 방향 정렬 방식을 설정한다.strech, center, start, end
-
flex-wrap
flex-wrap: nowrap 하면 크기 줄여도 한 줄에 최대한 집어넣는다.
2. position property
위치 조금만 옮기고 싶을 때 !
position: static --> 처음 위치하는 곳에 둔다, default position: relative --> element가 처음 위치한 곳을 기준으로 수정한다. top, bottom, left, right 속성 사용가능 position: absolute --> 가장 가까운 relative 부모를 기준으로 이동시켜줌
3. pseudo selectors
세부적으로 엘리먼트 선택 가능하게 한 것
div: first-child
div: first-child
span: nth-child(2)div > span { } --> > 요거는 바로 밑 자식에게만 style 줄 수 있는 기호 p span --> p안의 span
궁금한 것
어바웃메뉴 저기 가운데 네모박스 어떻게해야 고정될까....
