10일차 공부한 내용/테이블 태그와 구버전, 스타일 시트, HTML 해드 영역, HTML 테이블태그 실습/홈페이지 분석

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