인터넷활용 10 - 2 CSS 속성 - 표 및 레이아웃

용어체크

1. border 속성

• border-collapse: 표 테두리와 셀 테두리를 합칠 것인지 설정
• border-spacing: 테두리의 간격 등을 설정

2. Column 속성

• Column-width: 단의 너비를 고정해 놓고 화면 분할/화면이 커지면 단의 개수가 많아짐
• Columun-count: 단의 개수를 먼저 정해 놓고 화면에 해당 개수 만큼 분할
• Column-span: 여러 단을 하나로 합칠 수 있음

3. 페이지 레이아웃

• 웹페이지에서 HTML 요소의 위치, 크기 등을 결정하는 것

 

학습내용 1. 표 꾸미기 2. 페이지 레이아웃 작성 다양한 표 모양으로 꾸미기 시맨틱 태그로 페이지 구조 만들기 학습목표 1. 표의 테두리, 셀 여백, 정렬 등의 설정방법에 대해서 설명할 수 있다. 2. 시맨틱 태그를 이용하여 페이지 레이아웃을 작성할 수 있다.

 

 

 

 

 

---

페이지 레이아웃은 왜 필요할까요?

태그로 작성된 웹 문서 요소들을 다양하게 배치하는 position속성을 통해 같은 문서 내용이라 하더라도 레이아웃 구성에 따라 다양한 모양으로 변경이 가능합니다.

---

Quiz 01테이블의 표 테두리와 셀 테두리를 합쳐서 한 줄로 표시하는 속성은 border-collapse이다.

• 1 O
• 2 X

정답 :1

해설 :border-collapse 속성을 이용해 한 줄로 표시할 수 있다.

 

 

 

Quiz 02다단으로 나눌 때 나누는 개수를 설정하는 속성은?

• 1 column-count
• 2 count
• 3 column-size
• 4 size

정답 :1

해설 :column-count 속성을 이용해 다단을 나눌 수 있다.

 

 

 

Quiz 03테이블에서 셀 안의 내용 양에 따라 셀 너비를 변하게 할지, 고정시킬지를 결정하는 속성은?

• 1 layout
• 2 layout-fixed
• 3 fixed-layout
• 4 table-layout

정답 :4

해설 :table-layout 속성에 대한 설명이다.

---

학습정리

1. 표 속성

• caption-side: 캡션의 위치를 변경
• border-collapse: 표 테두리와 셀 테두리를 합칠 것인지 설정
• border-collapse: separate를 사용해 셀들을 분리했을 경우, 인접한 셀 테두리 사이의 거리를 지정

2. Column 속성

• column- width: 다단의 크기
• column-count: 다단 개수
• column-span: 여러 단을 하나로 합침