반응형

언어 자료구조 알고리즘/HTML5 15

[HTML5] 이미지

[HTML5] 이미지 이미지 태그는 img를 사용하고 src 속성에 표시할 이미지 소스를 명시합니다. 이미지는 모니터를 볼 수 없는 환경에서 스크린 리더와 같은 보조 기술에서 이미지 내용을 파악할 수 있게 하여야 합니다. 이를 위해 alt 속성을 제공하고 있으며 이를 대체 텍스트라 부릅니다. 이미지에 캡션을 붙일 때는 figure 태그와 figcaption 태그를 사용합니다. figure 태그에 이미지 태그를 여러 개 넣을 수 있습니다. 그리고 figcaption 태그를 이용하여 설명을 표시합니다. 하롱베이의 일출은 나도 모르게 명상에 잠기게 하네요. 다음은 이미지 태그를 사용한 예제입니다. DOCTYPE html /> 언제나 휴일 - 이미지 header { height:40px; background-c..

[HTML5] 테이블

테이블 테이블은 같은 종류의 여러 데이터를 정리하여 표시할 때 많이 사용합니다. 태그를 사용합니다. 테이블은 제목, 헤더, 본문, 꼬리 중에 필요한 요소를 선택적으로 구성할 수 있습니다. 제목은 테이블 맨 위에 표시합니다. 태그를 사용합니다. 헤더는 제목과 본문 사이에 표시하며 컬럼 제목을 정하는 용도로 많이 사용합니다. 태그를 사용합니다. 본문은 헤더와 꼬리 사이에 표시합니다. 태그를 사용합니다. 꼬리는 테이블 맨 아래에 표시하며 연락처라 부가 정보를 많이 표시합니다. 태그를 사용합니다. 헤더, 본문, 꼬리에는 행을 추가할 수 있습니다. 행은 태그를 사용합니다. 행 내부에는 쉘을 나타내는 태그를 사용할 수 있습니다. 헤더에 열 제목을 표시할 때 태그를 사용하면 접근성 점수를 높게 받습니다. 여러 행에 ..

[HTML5] 목록 태그 <ul>, <ol>, <dl>

목록 태그 - , , 목록을 나열할 때 사용하는 태그는 , , 가 있습니다. 태그는 순서가 중요하지 않을 때 사용하는 태그입니다. 태그는 순서가 중요할 때 사용하는 태그입니다. 태그와 태그의 항목은 태그를 이용합니다. 태그는 제목과 그에 관한 설명을 목록으로 표시할 때 사용하는 태그입니다. 태그를 사용할 때 제목은 , 설명은 태그를 사용합니다. ul 태그 사용 하나 둘 셋 ol 태그 사용 하나 둘 셋 dl 태그 사용 수 하나 둘 셋 Copyright 2015 언제나 휴일 ehclub.co.kr

[HTML5] P 태그와 PRE 태그

P 태그와 PRE 태그 HTML에서는 단락을 표현할 때 태그를 사용합니다. 그런데 공백이 여러 개 있어도 하나의 공백으로 처리합니다. 프로그램 소스 코드를 웹 페이지에 게시하면 보는 이는 매우 불편할 것입니다. 태그는 문맥에 입력하는 그대로 화면에 표시합니다. 아직 스크린 리더에서 pre 태그를 만나면 건너뛰어 웹 접근성에 대해 고려해야 한다고 말하는 이들도 있습니다. 다음은 하노이 타워 소스 코드를 태그를 이용한 것과 태그를 이용한 것을 비교하기 위한 것입니다. 하노이 타워 - p 태크 사용 int main(void) { hanoi("A", "B", "C", 16); } void Hanoi(const char *src, const char *use, const char *dest, int n) { if(n

[HTML5] 시맨틱 태그와 CSS

시맨틱 태그와 CSS HTML5에서는 웹 페이지의 내용이 무엇을 의미하는지 파악하기 쉽게 시맨틱 태그를 제공하고 있습니다. 이는 웹 접근성을 보장하기 위해 제공하는 태그들입니다. 스크린 리더와 같은 보조 기술에서 페이지의 내용을 빠르게 분석하고 제어할 수 있습니다. 웹 페이지 맨 위에 메인 메뉴나 페이지 제목등을 나타내는 부분은 header 태그를 사용합니다. 웹 페이지 맨 아래에 저작권 표시 등은 footer 태그를 사용합니다. 빠르게 탐색하기 위해 nav 태그를 사용합니다. 페이지의 주요 내용은 section 태그를 사용합니다. 내용의 조각은 article 태그를 사용합니다. 시맨틱 태그를 적용하기 전 프로그래밍 언어 여행 책 자유로운 글 프로그래밍 언어 C언어 형식 C언어의 형식에는 기본 형식과 매..

반응형