HTML (13) 썸네일형 리스트형 12. 디스플레이와 시맨틱 태그 HTML의 디스플레이 inline content 크기 만큼만 자리를 차지하는 요소 텍스트, img, span 텍스트의 특징을 가지고 있음 block 라인을 모두 차지하는 요소 p, h, ul, li, div, ... 면의 특징을 가지고 있음 span 태그 줄 단위로 영역이 설정 inline 특징을 가지고 있음 div 태그 면 단위로 영역이 설정 block 특징을 가지고 있음 디스플레이 1. span 태그 영역 입니다 div 태그 영역 시멘틱 태그(Semantic) 시멘틱 태그(Semantic) Semantic : 의미론적인 의미가 있는 태그를 사용 시멘틱 태그의 장점 검색엔진 최적화 스크린 리더를 사용하여 페이지를 탐색할 때 도움 div>div>div>div>div>... 끝없는 div를 탐색하는 것보다.. 11. input 태그(2) type 속성 checkbox 여러개의 옵션 중에서 다수의 옵션을 입력받을 수 있도록 하는 버튼 그룹을 맺기 위해 name 속성의 값을 동일하게 해야 함 취미 : 운동 음악감상 영화감상 게임 등산 file 원하는 파일을 서버로 전송하기 위한 글상자 첨부파일 : 파일 선택을 클릭 파일을 선택한뒤 열기 클릭 button 이벤트가 없는 일반버튼 버튼명 reset 입력받은 데이터를 초기화 하는 버튼 아이디 : 다시 입력 클릭 submit 입력받은 데이터를 서버에 제출하는 버튼 hidden 보이지는 않으나 서버에 값을 전달하고 싶을 때 사용하는 글상자 email 이메일을 입력받는 글상자(@ 필요) 이메일 : url 웹사이트를 입력받는 글상자(http 필요) 웹사이트 : tel 전화번호를 입력받는 글상자(모바일에서.. 10. 폼태그와 인풋태그 폼 태그 웹 페이지에서 사용자로부터 입력을 받을 때 사용하는 태그 사용자가 입력한 데이터를 서버로 보낼 때 form 요소를 사용 form 태그 안에 from 요소를 통해 데이터를 서버로 전달 전송 방법 get : url에 데이터를 포함하여 전달 post : body에 데이터를 포함아여 전달 태그(입력 상자) type 속성 text : 문자를 입력받는 글상자 password : 비밀번호를 입력받는 글상자 radio : 여러개의 옵션 중에서 단 하나의 옵션만을 선택할 수 있도록 하는 버튼 ✔ 그룹을 맺기 위해 name 속성의 값을 동일하게 해야 함! 속성 name : 요소의 이름을 설정, 서버에서 값을 전달받을 때 key로 사용 id : 요소의 유일한 이름을 설정. HTML문서에서 해당 요소의 스타일을 주거.. 9. 아이프레임 아이프레임 inline frame의 약자 웹사이트 안에 또 다른 웹사이트를 삽입 taget 속성 _blank : 새탭에서 열림 아이프레임의 name : 해당 아이프레임에서 열림 아이프레임 하이퍼링크 연습 페이지(현재 페이지) 하이퍼링크 연습 페이지(새 탭) 하이퍼링크 연습 페이지(현재 페이지) 아이프레임 하이퍼링크 연습 페이지(현재 페이지) 클릭 하이퍼링크 연습 페이지(새 탭) 클릭 하이퍼링크 연습 페이지(현재 페이지) 맨 아래 클릭 8. 테이블 테이블 여러 종류의 데이터를 보기 좋게 정리하여 보여주는 표를 작성 로 시작하고 로 끝냄 로 행을 생성, 로 셀을 생성 1 2 3 셀의 제목, 가운데 정렬, 굵은 글씨 colspan 속성 셀을 가로로 합침 rowspan 속성 셀을 세로로 합침 테이블 만들기1 첫번째 셀 첫번째 셀 두번째 셀 th태그 사용1 th태그 사용2 세번째 셀 네번째 셀 다섯번째 셀 여섯번째 셀 첫번째 셀 두번째 셀 colspan으로 열 합치기 다섯번째 셀 여섯번째 셀 첫번째 셀 두번째 셀 rowspan으로 행 합치기 네번째 셀 여섯번째 셀 colgroup colgroup 태그 뒤에 나오는 컬럼(th 또는 td)에 적용할 스타일을 해당 태그에서 미리 설정할 수 있도록 함 1 2 3 1 2 3 caption 표의 제목을 붙일 때 사용.. 7. 책갈피 책갈피 태그의 name 속성 또는 id 속성을 이용하여 책갈피 기능을 설정 링크에 사용될 문자 또는 이미지 문자 또는 이미지 문자 또는 이미지 책갈피 도착지로 이동합니다! Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero repudiandae numquam voluptate hic nostrum ullam dolore voluptas, neque provident excepturi quibusdam natus repellat, quas repellendus asperiores unde, dignissimos ad. Vero! Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero r.. 6. 하이퍼 링크 하이퍼 링크 다른 페이지 또는 사이트로 연결하는 링크(문자 또는 이미지) 인라인 태그 링크의 사용할 문자 또는 이미지 하이퍼 링크 코리아 아이티 아카데미 서브 페이지 하이퍼 링크 테스트용 서브 페이지 서브 페이지 1번 클릭 2번 클릭 3, 4번 클릭 5. 이미지 태그 이미지 태그 비트맵 이미지 픽셀이 모여 만들어진 정보의 집합 레스터 이미지라고도 부름 픽셀 단위로 화면에 렌더링함 그림판, 포토샵 등 툴로 편집 백터 이미지 수학적 정보의 형태들이 만들어내는 결과물 이미지가 가지고 있는 점, 선, 면의 위치, 색상정보를 가지고 있음 확대 및 축소를 해도 이미지가 깨지지 않음 일러스트 같은 툴로 편집 jpg(jpeg) 압축률이 훌륭하여 사진이나 예술분야에 많이 사용 가장 널리 쓰이는 이미지 포멧 손실 압축 표현 색상(24비트, 약 1600만 색상)이 뛰어나 고해상도 표시장치에 적합 gif 이미지 파일내에 이미지 및 문자열 같은 정보도 저장할 수 있는 파일 여러장의 이미지를 한 개의 파일에 저장할 수 있음(움짤, 애니메이션) 8비트(256색상) 컬러만 지원 비손실 압축 pn.. 이전 1 2 다음
