Skip to Content
Go Back
안형우

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

📌 워드프레스, 답답한 빌더와 플러그인 대신 시원하게 커스터마징하기(강의) 2023-01-15
📌 아무도 말하지 않는 PHP의 좋은 점 2018-10-13
📌 유지보수하기 쉬운 CSS 전략(슬라이드) 2016-12-20
📌 워드프레스 테마에서 템플릿 파일 매칭 순서 2013-05-12
📌 [번역] CSS 코드 냄새 2013-01-01

[번역완료] 오페라 웹표준 강좌 15 : HTML의 본문 마크업

이 글은 오페라 웹표준 강좌의 15강, HTML의 본문 마크업을 번역한 것입니다. 원문의 링크를 얻은 곳은 클리어보스입니다.

들어가며

이 글에서 나는 본문(body) 콘텐츠를 의미에 따라 표현하는 HTML 기본 사용법을 보여 줄 것이다.

우리는 제목요소(heading)와 문단, 그리고 인용문과 코드 등 일반적으로 사용되는 구조적 요소들을 살펴볼 것이다. 그리고나서 우리는 짧은 인용부호와 강조 같은 inline 형식의 내용(inline content)을 살펴 보고 구식의 표현용 요소를 짧게 살펴본 후 마무리할 것이다. 이 글의 구조는 다음과 같다.

  • 빈 칸 – 최후의 개척지 Space—the final frontier
  • 블럭 레벨 요소 Block level elements
    • 페이지를 구분하는 헤딩 Page section headings
    • 기본적인 문단 Generic paragraphs
    • 다른 자료를 인용하기 Quoting other sources
    • 이미 정렬해 둔 텍스트 Preformatted Text
  • 인라인 요소 Inline elements
    • 짧은 인용구 Short quotations
    • 강조 Emphasis
    • 기울여서 표시한 텍스트 Italicised text
  • 표현용 요소 – 결코 사용하지 말 것 Presentational elements—never use these
  • 요약 Summary

알림: 각 예제 코드 뒤에는 “실제 적용된 모습 보기” 링크가 있다. 클릭하면 소스코드를 실제로 렌더링한 것을 볼 수 있다.(정확히 번역이 안 되서 짧게 의역했다. 원문은 : After each code example, there is a “View live examples” link, which when clicked will take you to the actual rendered output of that source code, contained within a different file—it is to view live examples of how the source code is actually rendered in the browser, as well as looking at the code.)

나머지 글은 클리어보스에 있는 “오페라 웹표준 강좌 15. HTML의 본문 마크업”에서 볼 수 있다.

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

댓글 (2개)

  • html5에 대한 흥미를 더욱 돋게 만드네요. 출력해놓은 대량의 문서를 천천히 봐야겠어요. 위 글의 원래 필자의 얼굴이 왠지 친숙하네요 저와 일하는 프로그래머와 흡사해요 ㅋ 출력해놓은 그 문서도 바로 그 분이 해놓으신 거죠.

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다