10일차 - 코딩 연습, 하위 메뉴 만들기
11일차
1. 3단 메뉴 만들기
2. table, thead, tbody
- table 을 만들기 위해서 table>thead+tbody 를 사용한다.
- thead > th 를 사용하고 tbody > th+td 를 사용한다.
- th 는 표의 헤드가 되는 기준이 되는(제목행열) 에 사용하기 때문에 thead 에는 th 를 많이 사용한다.
- table에 테두리를 만들고 싶은 경우 table에 border를 걸면 가장 바깥 테두리만 생기기 때문에, th, td 에 건다.
- 그러면 생기는 테두리의 사이에 공백이 있을 건데 이 공백을 지우는 방법은 table에 border-collapse:collapse 를 사용하여 공백을 지운다
- collapse 는 무너지다 라는 뜻으로 그 사이 간격을 무너뜨린다고 한다.
- 네이버 사이트를 보면 절대 넘어가지 않는 영역들이 있다
- 이 영역을 정하기 위해 div 로 table 을 감싸고 class를 con 이라고 짓는다.
- 보통 이런 영역을 컨테이너라고 해서 con 으로 많이 사용한다.
- 그 다음 max-width 값을 주어 너비를 한정적으로 만든 후 table의 넓이 값을 100%로 하면 해당 너비를 넘지 않으면서 화면 너비에 따라 반응하는 반응형 table을 만들 수 있다.
- min-width : 최소 이 정도 너비는 갖고 있겠다
- max-width : 최대로 늘어도 이 너비 만큼만 늘어나겠다.
- border-collapse : 경계를 무너뜨리기
- 만약에 head 혹은 어떤 행열에 크기를 고정시키고 싶다면 table 바로 밑에 colgroup>col[width=150px] 을 작성하면 크기가 고정되고 나머지 행열이 나머지 공간을 분배받아 작용한다 .


