- 레이아웃 연습
- float와 grid를 써서 2개 이상 쓰이는 구간 분리하기
- float의 경우 : 튀어나가지 않기 위해 부모에
overflow:auto;넣기(이러면 최대 높이를 기준으로 공간이 생김). 한쪽에 위치를 잡았다면 나머지들은 그 공간에 따라 margin으로 띄워줘야함. 3개 이상 쓸 경우 영향을 주는 것들을 먼저 속성값들을 잡고 나머지는 영향을 주는 크기만큼 margin으로 좁혀주거나 float를 한쪽으로 계속 넣어주면 자동으로 띄워주기도 한다. - grid의 경우 : 부모에
display:grid;넣고 grid 관련 값들 넣기(grid-template-columns 등). grid가 좀 더 위치 분배하기에는 편하다.
- float의 경우 : 튀어나가지 않기 위해 부모에
- 사이드바 : aside 태그
- 고정네비게이션 바를 쓸 경우(
position:fixed;) 해당 속성 이하들의 태그 위치들이 위로 올라오기 때문에 padding이나 margin으로 top 값을 줘서 문자가 일부 안보이거나 이미지가 잘려 보이는걸 방지해야한다. - 하위네비게이션 바를 쓸 경우 : 해당 리스트 안에 하위 리스트를 작성하면 된다. CSS에서 하위 리스트에 대해서 먼저 position:absolute 로 위치를 잡아주고 visibility:hidden 과 opacity:0를 넣으면 안보이게 해준다. 그다음 어떨 때 보일지 조건부를 만들어서 visibility:visible 과 opacity:1을 넣어주면 조건을 만족 할 때 보이게 된다. 대신 포지션을 absolute로 잡았기 때문에 하위네비게이션의 하위메뉴와 그다음 태그 위치가 겹쳐지므로 absolute때 크기를 보고 네이게이션 바 넓이를 넓혀서 미리 다음 태그와의 간격을 넓혀주면 좋다.
- float와 grid를 써서 2개 이상 쓰이는 구간 분리하기