page. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14] [15]

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] 을 작성하면 크기가 고정되고 나머지 행열이 나머지 공간을 분배받아 작용한다 .