프로그래밍 공부/HTML5 (10) 썸네일형 리스트형 HTML5 - 공간 분할 태그 과거의 웹 페이즈는 공간 분할을 하지 않았습니다. 하지만 연대 웹 페이지는 공간 분할 태그를 사용하여 웹 페이지를 분할합니다. 가장 대표적인 공간 분할 태그는 div 태그이며, 공간 분할이 되어야 레이아웃을 구상 할 수 있기 때문입니다. div 태그 & span 태그 태그 이름 설명 div block 형식으로 공간을 분할합니다. span inline 형식으로 공간을 분할합니다. div 태그는 block 형식으로 차곡차곡 쌓아 올려지는 형식을 말합니다. 아래 예시1을 보면 알 수 있습니다. 반면 span 태그는 inline 형식으로 공간을 분할합니다. 예시2를 보면 알 수 있습니다. 스타일시트에서 중요한 부분을 차지하니 div 태그와 span 태그의 차이를 알고 block 형식과 inline 형식의 차이를.. HTML5 - 입력 양식 태그 입력 양식은 사용자에게 입력받는 공간을 의미합니다. 입력 양식 태그는 입력 양식을 만들 때 사용하는 태그입니다. 회원들의 정보를 입력 할 때 또는 웹 페이지에 가입을 할 때의 양식이 대표적입니다. 입력 양식 개요 입력 양식은 form 태그를 사용해 생성합니다. 추가로 입력 양식 안에 input 태그를 입력하면 예시1과 같은 양식이 만들어 집니다. 예시1 입력 양식에 데이터를 입력하고 전송을 위해서는 form 태그에 아래 표의 속성을 넣어야 합니다. 속성 이름 설명 action 입력 데이터의 전달 위치를 지정합니다. method 입력 데이터의 전닥 방식을 선택합니다. method 속성에는 get 방식과 post 방식이 있습니다. 가령 input 입력란에 rint를 입력을 하였을 때 get 방식으로 전송을 .. HTML5 - 비디오 태그 Video 태그 윈도우에 기본으로 내장 되어 있는 동영상 파일은 WMV 형식인데 웹 브라우저는 WMV 형식을 지원하지 않습니다. 따라서 MP4(H.264+ACC) 형식과 WebM(VP80+Vorbis) 형식을 사용합니다. video 태그를 생성할 때는 아래의 표의 속성을 사용합니다. 속성 이름 설명 src 비디오 파일 경로 지정 poster 비디오 준비 중일 때의 이미지 파일 경로 지정 preload 비디오를 재생하기 전에 모두 불러올지 지정 autoplay 비디오를 자동 재생할지 지정 loop 비디오를 반복할지 지정 controls 비디오 재생 도구를 출력할지 지정 width 비디오 너비 지정 height 비디오 높이 지정 video 태그도 audio 태그 처럼 웹 브라우저마다 지원하는 비디오 형식이 .. HTML5 - 오디오 태그 오디오 태그는 웹 브라우저에서 플러그인의 도움 없이 음악을 재생할 수 있게 만들어주는 HTML5 태그입니다. 이 기능은 HTML5에서 추가된 기능이므로 인터넷 익스프롤러 8 이하에서는 사용할 수 없습니다. 또한 img 태그와 사용방법이 비슷해서 사용이 간편합니다. audio 태그 audio 태그의 기본 형태는 아래와 같습니다. audio 태그도 img 태그 처럼 다양한 속성을 가지고 있지만 이중에서도 audio 태그와 관련된 중요한 속성은 아래 표에 적혀 있습니다. 속성 이름 설명 src 음악 파일의 경로 지정 preload 음악을 재생하기 전에 모두 불러올지 지정 autoplay 음악을 자동 재생할지 지정 loop 음악을 반복할지 지정 controls 음악 재생 도구를 출력할지 지정 예시1 위의 속성을.. HTML5 - 이미지 태그 이미지를 생성할 때는 아래의 img 태그를 사용합니다. img 태그에는 여러가지 속성이 있지만 그중 가장 중요한 속성은 아래 표와 같습니다. 속성 이름 설명 src 이미지 경로 지정 alt 이미지가 없을 때 나오는 글자 지정 width 이미지 너비 지정 height 이미지 높이 지정 최근에는 스타일시트를 이용해 입력하는 것이 일반적이므로 width 속성과 height 속성은 잘 사용하지 않습니다. src 속성에 이미지 경로를 입력하면 이미지가 뜹니다. 예시1 이미지 태그를 사용하여 코드를 입력하면 예시1의 결과가 나옵니다. src 속성에 입력한 이미지가 존재할 때는 이미지를 출력하고 이미지가 존재하지 않을 때는 오른쪽 그림처럼 alt 속성에 입력한 글자가 출력 됩니다. 예시2 마땅히 사용할 이미지 없는 .. HTML5 - 테이블 태그 테이블 태그는 HTML 페이지에서 표를 만들 때 사용하는 태그입니다. 과거에는 테이블 태그를 사용해 레이아웃도 구성했습니다. 하지만 현대의 웹 페이지 대부분은 뒤에서 살펴볼 div 태그를 사용해 레이아웃을 구성하므로 사용 빈도가 줄었습니다. 테이블 태그 기본 table 태그를 생성하기 위해서는 아래의 표의 태그를 이용합니다. 태그 이름 설명 tr 표 내부의 행 태그 th 행 내부의 제목 셀 태그 td 행 내부의 일반 셀 태그 tr 태그는 table row를 의미하고, th 태그는 table header를 의미하며 td 태그는 table data를 의미합니다. 이것을 이요해서 아래의 예시1을 만들 수 있습니다. 예시1 예시1을 실행하고 요소 검사를 해보면 코드를 입력한 것과 다르게 아래 예시2와 같은 계층.. HTML5 - 목록 태그 기본 목록 목록을 만들 때는 아래 표의 태그를 사용합니다. 태그 이름 설명 ul 순서가 없는 목록 ol 순서가 있는 목록 li 목록 요소 ol 태그는 정렬된 목록(ordered list)을 의미하고 ul 태그는 정렬되지 않은 목록(unordered list)을 의미합니다. 마지막으로 li 태그는 목록 요소(list item)를 의미합니다. 예시1 위의 예시1을 참고하면 ol 태그를 사용하면 글머리에 숫자가 붙은 목록이 생성되고 ul 태그를 사용하면 글머리에 기호가 붙은 목록이 생성됩니다. 정의 목록 정의 목록은 특정 용어와 그 정의를 표현할 때 사용하는 태그입니다. 단어를 써놓고 그 정의를 풀이한 목록을 정의 목록이라고 합니다. 정의 목록을 사용할 때는 아래 표와 같은 태그를 사용합니다. 태그 이름 설명.. HTML5 - 글자 태그 글자 태그는 웹 페이지에서 가장 많은 비중을 차지하는 태그입니다. 제목 HTML5의 대표적인 글자 태그는 제목을 입력할 때 사용하는 제목 글자 태그입니다. HTML5는 아래표의 제목 글자 태그를 제공합니다. 태그 이름 설명 h1 첫 번째로 큰 제목 글자 태그 h2 두 번째로 큰 제목 글자 태그 h3 세 번째로 큰 제목 글자 태그 h4 네 번째로 큰 제목 글자 태그 h5 다섯 번째로 큰 제목 글자 태그 h6 여섯 번째로 큰 제목 글자 태그 h1 태그부터 h6 태그의 h는 heading을 의미하며 각각의 숫자는 크기 및 우선 순위를 나타냅니다. 예시1 Heading 태그를 입력하고 코드를 실행하면 예시1과 같이 출력이 됩니다. h1 태그는 큰 제목을 의미하고 h6 태그는 작은 제목을 의미하며, 일반적으로 웹.. 이전 1 2 다음
