웹 표준 퍼블리싱 바이블(37)
-
3-7. 인용문, 정형화된 텍스트 알아보기
1. 인용문 알아보기 다른 사람의 말이나 글, 혹은 다른 소스를 인용하는 경우에 사용하고, 블록 요소로는 , 인라인 요소로는 요소를 활용할 수 있습니다. 정형화된 텍스트의 표현은 요소를 활용하며, 요소나 없이도 줄바꿈이나 공백이 유지되는 특징이 있습니다. 1-1. 요소는 브라우저에서 들여쓰기의 형태로 출력됩니다. "cite"속성으로 해당 컨텐츠의 출처를 나타내고, 요소로 내용을 파악합니다. - 소스코드 1-1. 다음은 "웹 접근성 연구소"에서 정리한 웹 접근성 정의내용입니다. 월드와이드웹(World Wide Web)을 창시한 팀 버너스 리(Tim Berners-Lee)는 웹이란 "장애에 구애 없이 모든 사람들이 손쉽게 정보를 동유할 수 있는 공간"이라고 정의하였스며, 웹 컨텐츠를 제작할 때에는 장애에 구..
2017.10.11 -
3-6. 제목, 문단, 연락처정보, 구분선 알아보기
1. 레이아웃을 먼저 잡아야만 하는 것은 아닙니다. 누구는 각각의 요소를 먼저 만든 후에 레이아웃을 지정하기도 하고 누구는 레이아웃을 먼저 작성하기도 합니다. 중요한 것은 완료된 코드가 누가 봐도 체계적이고 알기 쉬운 코드로 만들어졌느냐 입니다. 2. 제목을 작성하는 방법 레이아웃을 작성하는 예를 들면서 제목 작성하는 방법을 보여드렸는데요. 문서를 마크업하는 경우에 빠뜨리지 말아야 할 요소가 바로 제목 요소(~)입니다. 문서 전체의 제목을 나타내는 요소고 중요합니다. 본문의 가장 큰 제목을 의 내용으로 적용하면 되는데, 메인 페이지의 경우에는 로고를 의 내용으로 적용하는 것이 좋습니다. 2-1. 제목요소는 이 가장 큰 제목이고 ~까지 지정할 수 있습니다. - 소스코드 Heading1 Heading2 He..
2017.10.10 -
3-5. HTML5 섹셔닝 요소들의 활용
1. 우리는 보다 좀 더 시멘틱(Semantic)한 마크업을 활용할 수 있습니다. HTML5에서는 section, nav, article, aside 등의 섹셔닝 요소들로 레이아웃을 작성하고 여기에 h1~h6 요소들로 해당 섹션의 제목을 작성하게 됩니다. 물론 여전히 요소도 쓰이지만 이전보다는 확실히 그 사용빈도가 줄었습니다. -소스코드 LOGO MAIN MENU ABOUT Company info -실행결과 HTML5에서는 섹셔닝 요소 안에 작성하는 요소를 부터 시작하는 것이 좋습니다. 좀 생소해 보일 수도 있겠지만, 브라우저는 이런 경우 문서의 구조를 정확히 판단하는 능력을 가지고 있습니다.
2017.10.08 -
3-4. Div 요소로 작성하는 문서의 그룹화 방법
1. 문서를 만들 때 어려운 점은 원하는 레이아웃을 만드는 작업이었습니다. 몇 년 전까지만 해도 요소를 활용해서 레이아웃을 만들었고, 최근엔 요소로 묶은 후 CSS를 활용해 레이아웃을 만들고 있습니다. 요소를 활용해서 문서를 묶어주는 방법을 그룹화한다고 합니다. 문서를 만들어보기도 전에 그룹화하는 방법부터 알아보는 이유가 뭘까요? 사실 HTML5로 발전하는 과정에서 그룹화의 의미가 바뀌게 되었습니다. HTML5부터는 원래 가 담당하던 그룹화 작업을 새롭게 섹셔닝 요소들이 담당하게 되었고, 그룹화라는 용어도 블록 요소 중에서 p, hr, pre, blockquote, ol, ul, li, dl, dt, div 등에 그 역할을 넘겨주게 되었습니다. 웹 페이지를 레이아웃에 맞춰 그룹화 작업을 하는 경우 적절한..
2017.10.08 -
3-3. 특수문자 삽입 방법과 텍스트를 정의하는 인라인 요소들
1. 특수문자 삽입의 올바른 방법 XHTML에서는 , & 등의 기호를 텍스트에 사용하면 문자데이터가 아니라 XHTML 특유의 기호로 인식합니다. 그래서 XHTML상의 기호나 키보드로 직접 입력이 어려운 문자를 표시하기 위해 "문자참조(Charactor References)"를 사용하며, HTML5에서도 기호의 표현은 이 문자참조의 방법을 사용하는 것이 좋습니다. 이러한 특수문자의 조합을 "Entitu code"라고 하며, 보통 &으로 시작해서 ;로 끝나게 됩니다. 문자실체 참조와 수치문자 참조 2방법이 있으며, 어떤 것을 사용해도 되지만, XML에서는 수치문자 참조 방법을 사용하는 것이 좋습니다. 기호 내용 문자실체 참조 수치문자 참조 보다 큼 > > & Ampersand & & ⓒ Copyright ©..
2017.10.06 -
3-2. 블록/인라인 레벨 요소 및 컨텐츠 분류
1. HTML태그는 크게 '블록 레벨 요소'와 '인라인 레벨 요소'로 구분할 수 있습니다. 블록 레벨은 너비나 높이를 지정할 수 있고 줄 바꿈 속성을 가지고 있지만, 인라인 레벨은 너비나 높이를 지정할 수 없으며 줄이 바뀌지 않는(인라인) 형식으로 표현됩니다. HTML5로 발전되면서 블록 레벨과 인라인 레벨로 구분하는 방법은 퇴색 되었지만, 없어진 것은 아니며 비슷한 속성끼리 나누는 방법으로 발전되었습니다. 익스플로러 버전9 이하에서는 HTML5요소를 제대로 지원하지 않으므로, 이 경우에는 자바스크립트에서 document.create.Element("태그이름")의 혁식으로 생성하고, 스타일시트로 인라인 또는 블록요소의 특성을 따로 지정해야 합니다. 2. 블록 레벨 요소 블록 레벨 요소는 자신을 감싸는 상..
2017.09.25