3장. 문서 구조 표현하기
3.1 표 그리기
3.1.1 표의 기본 구조
■ 테이블 <table> ⇒ 구성 요소: <table>, <tr>, <th>, <td>
- <tr> : 테이블 행(row)
- <th> : 테이블 머리글
- <td> : 각 셀의 데이터
3.1.2 표의 구조적 표현
- 셀 합치기 - rowspan(위아래 병합), colspan(옆 칸 병합) 속성
<tr>
<td rowspan="3">내용</td>
</tr>
- <caption> : 표의 제목
- <thead>, <tbody>, <tfoot> : 표의 머리줄, 몸체, 꼬리줄 표현 (몸체만 스크롤 가능)
3.2 문서 구조화 하기
3.2.1 문서 구조화 요소
- 머릿말 : <header> 요소
-머릿말 영역으로 웹의 문서의 제목, 소개 등 문서 관련 설명을 표기
- 탐색 메뉴 : <nav> 요소
-다른 웹 문서나 문서 내의 이동을 위한 내비게이션 링크를 표현
- 독립된 본문 : <article> 요소
-웹 문서에서 주요 내용을 가진 독립적인 본문을 나타냄
- 문서내 섹션 그룹 : <section> 요소
-웹 문서 내에서 절 단위로 구분하거나 의미가 비슷한 그룹으로 문서를 구분하여 묶기 위해서 사용
- 부수 정보 : <aside> 요소
-본문의 내용과 구별되는 별개의 정보를 표현하기 위하여 사용
예) 블로그에서 최신 댓글목록이나 토막상식, 배너 및 광고 등
- 꼬리말 : <footer> 요소
-웹 문서의 꼬리말에 해당하는 저자정보, 저작권 정보, 이용조건, 관련 링크들을 나타내기 위해 사용
3.2.2 문서 구조에 스타일시트 적용하기
- <head>내에 <style></style>태그 적용
3.3 스타일 시트 맛보기
3.3.1 CSS 스타일 시트의 용도
- HTML 태그만으로는 원하는 세세한 부분 모두 지정하기 어려움.
- 반면, 스타일 시트를 이용하면 웹 문서의 구성요소의 일괄적 적용 뿐 아니라, 글자 간격, 문단 간격, 위치 등 자세한 부분까지 지정 가능!
- 콘텐츠의 내용과 디자인을 분리 가능하게! → 웹페이지 일관성 및 유지보수의 편리함
3.3.2 CSS 스타일시트 지정하기
■ 선택자(Selector)와 속성 선언(Property Declaration)으로 설정
- 선택자 : 스타일 선정할 대상 - 태그 선택자, 클래스 선택자, 아이디 선택자 등…
- 속성 선언 : 중괄호({ }) 안에 나열, 속성과 속성 값은 :(콜론) 으로, 다중 속성은 ;(세미콜론)으로 구분
■ CSS 선언 방법
- 내부 스타일시트 (<head>내에서 <style></style>로)
<html>
<head>
<title>CSS 선언</title>
<style type="text/css">
<!-- 여기에 CSS 작성...-->
</style>
</head>
</html>- 외부 스타일시트 (<link rel=”stylesheet” type=”text/css” href=”*.css”/>)
<html>
<head>
<title>CSS 선언</title>
<link rel="stylesheet" type="text/css" href="mycss.css"/>
</head>
</html>- 인라인 스타일시트 (<p style=”color:blue”>~)
<html>
<head>
<title>CSS 선언</title>
</head>
<body>
<h1 style="font-style:italic">...</h1>
</body>
</html>+ @import 방식
<html>
<head>
<title>CSS 선언</title>
<style type="text/css">
@import url(mycss.css);
</style>
</head>
</html>'Web > HTML+CSS+JS' 카테고리의 다른 글
| 웹프로그래밍첫걸음 5장. 폼 활용하기 (0) | 2023.05.01 |
|---|---|
| 웹프로그래밍첫걸음 4장. 링크와 멀티미디어 표현하기 (0) | 2023.05.01 |
| 웹프로그래밍첫걸음 2장. HTML5 문서 기본 이해하기 (0) | 2023.05.01 |
| [자바스크립트의 시작] Javascript 제어문 (0) | 2023.03.29 |
| [자바스크립트의 시작] 웹과 Javascript (0) | 2023.03.27 |