본문 바로가기

html5 강좌38

8.3 col, colgroup 요소를 이용하여 다수의 칼럼(열)에 스타일 적용 8.3 col, colgroup 요소를 이용하여 다수의 칼럼(열)에 스타일 적용 col 요소는 하나의 칼럼(column)을 나타내는데 사용하는 요소로 테이블(table)의 전체 칼럼(열)이나 일부 칼럼(열)에 스타일을 적용할 때 유용하게 사용할 수 있는 요소로 주요 속성은 길이, 폭을 나타내는 span 속성이 있으며 이를 이용하여 다수의 칼럼(열)을 선택할 수 있습니다. 다음으로 colgroup 요소는 테이블(table) 내에서 다수의 칼럼(열)을 그룹화하여 해당 그룹에 속한 칼럼(열)들에만 특정한 속성을 설정할 수 있도록 합니다. 이러한 colgroup 요소는 테이블(table) 요소 내에서 사용되어야 하고 thead, tbody, tfoot 등과 같은 요소들보다 먼저 사용되어야 합니다. 이제 col,.. 2013. 7. 31.
8.2 tbody, thead, tfoot 요소를 이용한 머리말, 본문, 맺음말 형태 만들기 8.2 tbody, thead, tfoot 요소를 이용한 머리말, 본문, 맺음말 형태 만들기 다음과 같이 하나의 테이블(table) 요소 안에 머리말(header), 본문(body), 꼬리말(footer)와 같은 구조로된 하나의 테이블 형태로 구성하여 나타낼 경우 다음과 같이 thead는 머리말, tbody는 본문, tfoot는 꼬리말에 적용하여 나타낼 수 있습니다. 실제 코드를 작성할 때는 table을 나타내는 table 요소 태그를 먼저 작성한 후 뒤이어 선택적으로 caption 요소 태그가 온 후 thead, tfoot 요소 태그를 작성하며 마지막으로 tbody 요소 태그를 작성해주면 됩니다. thead, tfoot, tbody 요소 안에는 행을 나타내는 tr 요소, 셀을 나타내는 td 요소 태그가.. 2013. 7. 31.
8. Tabular Data Elements 8. Tabular Data Elements 여러분들은 문서 작업을 하면서 워드나 한글을 통해서 표 형태를 사용하거나 엑셀 같은 스프레드 시트를 이용하여 표형태로 작성하는 다음과 같은 형태를 많이 보고 직접 작성했을 것입니다. 표(Table) 형태를 HTML5를 이용하여 웹 페이지에 나타내기 위해서는 위 그림을 토대로 표를 구성하는 기본적인 구성 요소들을 파악하는 것이 중요합니다. 위와 같은 하나의 테이블(Table)은 행(row)와 열(column)로 구성되며 행과 열이 만나는 부분을 셀(cell)이라고 합니다. 이 셀(Cell) 안에는 텍스트, 이미지 등이 나타날 수 있습니다. 위 표(Table)를 HTML5에서 사용하는 기본적인 요소(Element)들로 나타내보면 다음과 같이 나타낼 수 있습니다. .. 2013. 7. 31.
7.7 svg 요소(Element) 7.7 svg 요소(Element) svg는 Scalable Vector Graphics(SVG)의 약자로 XML 내에서 2차원 그래픽을 구현하는데 사용되는 언어입니다. SVG에서는 직원과 곡선 등을 표현하는데 사용되는 벡터(Vector) 그래픽과 이미지, 마지막으로 텍스트 3가지 타입의 그래픽 객체를 지원하는데 여기서는 간단하게 원, 직사각형, 이미지, 텍스트를 나타내는 예제를 알아봅니다. 첫 번째 예제는 원(circle), 직사각형(rectangle), 텍스트를 나타내는 간단한 예제입니다. 메모장을 열어서 HTML5 문서의 기본 태그들을 작성한 후 body 요소의 시작과 마침 태그 내에 다음과 같이 코드를 작성합니다. text 요소를 이용해서 나타낸 부분 text 요소를 이용해서 나타낸 부분 위에서 .. 2013. 7. 31.

티스토리툴바