과제: 문서 마크업하기
page(Doc) not found /ko/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML
우리는 모두 글자를 쓰는 법을 금방 배우게 됩니다. 이 페이지에서 텍스트를 꾸미고 조작하는 것을 테스트 해볼 수 있는 유용한 예제들이 있습니다. 이 장에서는 하이퍼링크와 HTML <head>
요소뿐만이 아니라, 주어진 글을 HTML 기본/혹은 고급 텍스트 포맷팅 방식에 맞춰 다듬는 연습을 할 예정입니다.
필요한 사전 지식 |
이 장에 들어서기에 앞서 필요한 사전 지식에는 HTML 시작하기, head 안에는 무엇이 있나? HTML 메타 데이터, HTML 텍스트 기본, 하이퍼링크 만들기, 텍스트 조작 고급기법 등이 있습니다. |
---|---|
목표 |
HTML 기본/고급 텍스트 포맷팅 방법, 하이퍼링크, HTML |
시작하기에 앞서
프로젝트를 시작하기 위해서는 두 가지가 필요합니다. 마크업을 할 기본 텍스트와 HTML에 스타일을 입힐 CSS 코드입니다. 텍스트 편집기를 이용해 .html 파일을 만들거나 CodePen, jsFiddle 또는 Glitch와 같은 온라인 코딩 도구를 사용하여 작업을 진행합니다.
참고 : 문제가 해결되지 않으면 이 페이지 하단의 평가 또는 추가 도움말 구획을 참조해 도움을 요청하세요.
프로젝트 요약
이 프로젝트에서 여러분은 대학 인트라넷에 호스팅 되어야하는 편지를 마크업하는 것입니다. 이 문서는 예비 박사 과정 학생들이 보낸 질문에 대한 연구원의 답변입니다.
블록/구조적인 의미
인라인 구조
- 발신자 및 수신자의 이름, "Tel:", "Email:"은 강조하여 표시해야 합니다.
- 문서의 네 날짜에는 기계가 읽을 수 있는 날짜가 포함된 적절한 요소가 있어야 합니다.
- 문서의 첫 번째 주소와 첫 번째 날짜에는 발신자 열의 클래스 속성 값이 있어야 합니다. 나중에 추가할 CSS는 원본 문서 레이아웃처럼 올바르게 정렬되도록 합니다.
- 문서의 본문에 "PhD", "HTML", "CSS", "BC", "Esq." 등 5가지 약어를 표기하여 각 약어의 확장어를 제공해야 합니다.
- 화학식 및 숫자 103과 104(10의 3과 4 거듭제곱)에 6개의 하위/상위 첨자를 적절하게 표시해야 합니다.
- 본문에서 중요도가 높은 적절한 단어를 두 개 이상 표시해야 합니다.
- 본문에 하이퍼링크가 있어야 하는 위치는 두 곳입니다. 제목과 함께 적절한 링크를 추가합니다. 링크가 가리키는 위치의 URL은
http://example.com
처럼 기재하면 됩니다. - 대학 모토 인용문과 인용문에 적절한 요소를 표시합니다.
문서의 머리글
- 문서의 문자 집합은 적절한 메타 태그를 사용하여 utf-8로 설정해야 합니다.
- 문서의 작성자는 적절한 메타 태그에 명시해야 합니다.
- 제공된 CSS는 적절한 태그 안에 포함되어야 합니다.
힌트와 팁
- W3C HTML 유효성 검사기를 사용하여 HTML의 유효성을 검사합니다. 유효성 검사를 통과하면 보너스 점수를 받을 수 있습니다.
- 이 프로젝트를 수행하기 위해 CSS를 몰라도 상관없습니다. 제공된 CSS를 HTML 요소 안에 넣기만 하면 됩니다.
예제
다음 스크린샷은 마크업 후 문자가 어떻게 보일 수 있는지 보여주는 예시입니다.
평가 또는 추가 도움말
평가를 받고 싶거나 막혀서 도움을 요청하고 싶은 경우에 읽으시면 됩니다.
-
MDN 토론 포럼 학습 카테고리에서 평가 또는 도움을 요청하는 게시글을 작성합니다. 게시글에는 다음 내용이 포함되어야 합니다.
- "문서 마크업에 대한 평가 필요"와 같은 설명이 포함된 제목입니다.
- 이미 시도한 사항과 바라는 사항(예시: 문제가 발생하여 도움이 필요하거나 평가를 원하는 경우)에 대한 세부 내용을 작성합니다.
- 평가받고 싶거나 도움이 필요한 경우에 대한 위의 1단계에서 제시한 것 처럼, 온라인 공유 가능 편집기 링크가 있어야합니다. 코드를 볼 수 없다면 코딩에 관한 문제가 있는 사람을 도와주기가 매우 어렵기 때문입니다.
- 링크는 실제 프로젝트 또는 평가 페이지로 연결되는 링크로, 도움을 받고자 하는 문제를 확인할 수 있습니다.
page(Doc) not found /ko/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML