*금일 공부한 내용
1. 테이블 태그
- 레이아웃에 사용하지 않음
- 표형식으로 표현해야 하는 경우에 사용
- 공지사항, 안내사항, 게시판(예약 페이지, 신청서 페이지)
- 폼양식 : 글쓰기, 글읽기, 글보기, 글삭제
- 표형식으로 정리를 편리하게 해야 할 내용
- 로그인 폼, 회원가입 폼
2. 구버전
- HTML 4언어 시맨틱태그 웹 표준 지원이 되지 않음
- 테이블 태그를 사용한 레이아웃
- 콘텐츠 집중이 어려움
3. HTML HEAD 영역
- meta 태그(문자, 검색, 단어검색)
- 검색엔진에게 내 홈페이지를 알리는 역할
- title 태그(검색엔진, 의미 있는 단어)
- 즐겨찾기에 해당 단어도 추가됨
- 홍보용으로 필수
- 자동검색 키워드 : 2개 정도 ex) 웹디자이너, webdesigner, 웹퍼블리셔
- style 시트(디자인) : <style> 태그명{속성:값;}</style>
- JAVA Script : <script> 내용 </script>
- 제이쿼리 라이브러리 파일(1~3버전)
4. HTML 테이블 태그
- HTML : HyperText Markup Language
- CSS : Cascading Style Sheet
- <style> : 스타일시트 시작
- table,th,tr,td{} : 테이블 태그 영역 설정
- border:solid(실선)/dashed(점선); px값, yellow => 테두리 픽셀 색 설정
- border-collapse : 테이블 또는 셀의 테두리선 표시방법을 지정하는 속성/이중테두리선
① collapse : 위 속성의 속성값 / 서로 이웃하는 테이블이나 셀의 테두리선을 겹쳐서 표현
② separate : 위 속성의 속성값 / 기본값으로 서로 이웃하는 테이블이나 센의 테두리선을 분리 표현
- padding : px값 : 내용의 여백 상하좌우 시계방향으로 px값씩 여백
- h3{color:skyblue;} : 16진수 핵사 코드 글자색 생성
- body{background-color:orange;} : 배경화면 색상 설정
- th,td{backgroun-color(배경색상)/color(글씨색상):#4c5b9a;(포토샵에서 색상 따올 때 앞에 #붙이기)}
- <table> : 테이블 시작
- <tr> : 줄의 시작 / </tr> : 줄마침
- <th> : 테이블 내의 제목 글자 -> 글자가 굵게 표시되고 가운데 정렬 / </th> 끝
- <td> : 테이블 내의 내용 / </td> 끝
- text-align:center; 글자 가운데 정렬
- 테이블 가운데 정렬 width : 800px; margin:0 auto;
* 금일 실습 내용
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>시간표</title>
<style>
table,th,tr,td{border:dashed 1px blue; border-collapse:collapse; padding:8px;}
</style>
</head>
<body>
<h3>시간표</h3>
<table>
<tr>
<th>시간</th>
<th>월</th>
<th>화</th>
<th>수</th>
<th>목</th>
<th>금</th>
</tr>
<tr>
<td>1</td>
<td>환경분석</td>
<td>html5</td>
<td>html5</td>
<td>포토샵</td>
<td>포토샵</td>
</tr>
<tr>
<td>2</td>
<td>환경분석</td>
<td>html5</td>
<td>html5</td>
<td>포토샵</td>
<td>포토샵</td>
</tr>
<tr>
<td>3</td>
<td>환경분석</td>
<td>html5</td>
<td>html5</td>
<td>포토샵</td>
<td>포토샵</td>
</tr>
<tr>
<td>4</td>
<td>html5</td>
<td>포토샵</td>
<td>포토샵</td>
<td>환경분석</td>
<td>환경분석</td>
</tr>
<tr>
<td>5</td>
<td>html5</td>
<td>포토샵</td>
<td>포토샵</td>
<td>환경분석</td>
<td>환경분석</td>
</tr>
<tr>
<td>6</td>
<td>html5</td>
<td>포토샵</td>
<td>포토샵</td>
<td>환경분석</td>
<td>환경분석</td>
</tr>
<tr>
<td>7</td>
<td>스터디</td>
<td>스터디</td>
<td>스터디</td>
<td>스터디</td>
<td>스터디</td>
</tr>
<tr>
<td>8</td>
<td>스터디</td>
<td>스터디</td>
<td>스터디</td>
<td>스터디</td>
<td>스터디</td>
</tr>
</table>
</body>
gustn3181@dothome.co.kr/c/schedule2.html
5. 그 외의 내용
- 페이지 F12버튼 눌러서 소스 확인
- 오래된 홈페이지 분석해서 문제점 찾고 개선방향 찾기
- 홈페이지 제작 기획서 작성 연습 필수(ppt 활용할 것)
6. 홈페이지 분석
첫댓글 열심히 공부하는 모습이 좋아요^^