HTML 문서 작성 PART 2 Chapter 2 Part 2 이 서식 파일은 그룹 환경에서 교육 자료를 프레젠테이션할 때 시작 파일로 사용할 수 있습니다. 구역 구역을 추가하려면 슬라이드를 마우스 오른쪽 단추로 클릭하십시오. 구역을 사용하면 슬라이드를 쉽게 구성할 수 있으며, 여러 작성자가 원활하게 협력하여 슬라이드를 작성할 수 있습니다. 메모 설명을 제공하거나 청중에게 자세한 내용을 알릴 때 메모를 사용합니다. 프레젠테이션하는 동안 프레젠테이션 보기에서 이러한 메모를 볼 수 있습니다. 글꼴 크기에 주의(접근성, 가시성, 비디오 테이프 작성, 온라인 재생 등에 중요함) 배색 그래프, 차트 및 텍스트 상자에 특히 주의를 기울이십시오. 참석자가 흑백이나 회색조로 인쇄할 경우를 고려해야 합니다. 테스트로 인쇄하여 흑백이나 회색조로 인쇄해도 색에 문제가 없는지 확인하십시오. 그래픽, 테이블 및 그래프 간결하게 유지하십시오. 가능한 일관되고 혼란스럽지 않은 스타일과 색을 사용하는 것이 좋습니다. 모든 그래프와 표에 레이블을 추가합니다. Chapter 2 Part 2
텍스트 서식 관련 태그
text.html <!DOCTYPE html> <html> <body> <p><b>이 텍스트는 bold입니다.</b></p> <p><strong>이 텍스트는 strong입니다.</strong></p> <p><i>이 텍스트는 italic입니다.</i></p> <p><em>이 텍스트는 emphasized입니다.</em></p> <p><code>이 텍스트는 code입니다.</code></p> <p><sub> subscript</sub> 이고 <sup>superscript</sup> 입니다.</p> </body> </html>
text2.html <!DOCTYPE html> <html> <body> <p>Do not forget to buy <mark>milk</mark> today.</p> <p>오늘 <mark>우유</mark> 사오는 것 잊지 마세요.</p> <p>My favorite color is <del>blue</del> <ins>red</ins>!</p> <p>내가 좋아하는 색은 <del>파란색</del> <ins>빨간색</ins>입니다!</p> <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p> <p> <abbr title="World Health Organization">WHO</abbr> 는 1948년에 설립되었다.</p> </body> </html>
도전 실습 practice/0314/special.html
특수문자 입력
링크 걸기 - <A> … </A> 태그 하이퍼링크(또는 링크)는 다른 문서로 점프할 수 있는 단어나 이미지 <a href="사이트 주소">링크 이름</a> <a href="www.kku.ac.kr">건국대학교(글로컬캠퍼스)</a>
링크 예제 – practice/0314/a.html 다음과 같이 구글, 다음, 네이버의 링크를 걸어보자. <!doctype html> <html> <body> <p><a href="http://www.google.com">구글</a></p> <p><a href="http://www.daum.net">다음</a></p> <p><a href="http://www.naver.com">네이버</a></p> </body> </html>
결과 기본적으로 링크를 클릭하면 현재 페이지에 새로운 링크 페이지가 열린다.
target 설정 링크된 페이지가 열릴 창을 설정한다. target 설명 _blank 새로운 창에서 문서를 연다 _self 현재 창에 문서를 연다(default: 생략 가능) _parent 부모 프레임에 문서를 연다 _top 해당 프레임을 포함한 최고 상단 창에 문서를 연다. frame이름 지정된 창에 문서를 연다
target 예제 – practice/0314/target.html 다음과 같이 구글, 다음, 네이버의 링크를 걸어보자. <!doctype html> <html> <body> <p><a href="http://www.google.com" target= "_blank">구글</a></p> <p><a href="http://www.daum.net" target="_self">다음</a></p> <p><a href="http://www.naver.com" target="_top">네이버</a></p> </body> </html>
북마크로 설정하기/이동하기 북마크 설정 북마크로 링크 걸기 <a id=“bookmark”></a> <h1 id=“first”>여기는 첫번째 북마크입니다.</h> <p id=“second”>여기는 두번째 북마크입니다.</p> <a href=“URL주소#북마크이름”>첫번째 북마크로</a>
북마크 예제 – practice/0314/bookmark.html 다음과 같이 구글, 다음, 네이버의 링크를 걸어보자. <!doctype html> <html> <body> <p> <a href="http://cslab2.kku.ac.kr/~sunwoo/test/poem.html#매운탕">매운탕</a> <a href="http://cslab2.kku.ac.kr/~sunwoo/test/poem.html#갈대">갈대</a> <a href="http://cslab2.kku.ac.kr/~sunwoo/test/poem.html#서시">서시</a> <a href="http://cslab2.kku.ac.kr/~sunwoo/test/poem.html#샘물이혼자서">샘물이혼자서</a> <a href="http://cslab2.kku.ac.kr/~sunwoo/test/poem.html#고향">고향</a> </p> </body> </html>
실행 결과
링크 경로 – 상대경로/절대경로 절대경로 상대경로 상대경로는 현재 문서의 디렉토리를 기준으로 경로표시가 없으면 같은 디렉토리에서 찾는다. <a href="http://cslab2.kku.ac.kr/~sunwoo/poem.html">시</a> <a href="poem.html">시</a> <a href="test/poem.html">test 디렉토리에 있는 시</a>
리스트- <ul>, <ol>, <li> 태그 리스트: 항목들을 나열 <ul>: unordered list 즉 번호 없는 리스트 <ol>: ordered list 즉 번호 있는 리스트 <li>: 나열하는 리스트의 각 항목
리스트 예제 – practice/0314/list.html <!doctype html> <html> <body> <h2>순서없는 리스트 ul</h2> <ul> <li><a href="http://cslab2.kku.ac.kr/~sunwoo/test/poem.html#매운탕">매운탕</a></li> <li><a href="http://cslab2.kku.ac.kr/~sunwoo/test/poem.html#갈대">갈대</a></li> <li><a href="http://cslab2.kku.ac.kr/~sunwoo/test/poem.html#서시">서시</a></li> </ul>
리스트 예제 – list.html(계속) <h2>순서있는 리스트 ol</h2> <ol> <li><a href="http://cslab2.kku.ac.kr/~sunwoo/test/poem.html#샘물이혼자서">샘물이혼자서</a></li> <li><a href="http://cslab2.kku.ac.kr/~sunwoo/test/poem.html#고향">고향</a></li> </ol> </body> </html>
결과
중첩 리스트 <ul> <li>리스트1 <li> … </li> </ul>
중첩 리스트-practice/0314/nestedlist.html <!doctype html> <html> <body> <ul> <li>순서없는 리스트 ul <li><a href="http://cslab2.kku.ac.kr/~sunwoo/test/poem.html#매운탕">매운탕</a></li> <li><a href="http://cslab2.kku.ac.kr/~sunwoo/test/poem.html#갈대">갈대</a></li> <li><a href="http://cslab2.kku.ac.kr/~sunwoo/test/poem.html#서시">서시</a></li> </ul> </li> <li>순서있는 리스트 ol <ol> <li><a href="http://cslab2.kku.ac.kr/~sunwoo/test/poem.html#샘물이혼자서">샘물이혼자서</a></li> <li><a href="http://cslab2.kku.ac.kr/~sunwoo/test/poem.html#고향">고향</a></li> </ol> </body> </html>
결과
Q&A Have a Nice Day!!!