학습/HTML (5) 썸네일형 리스트형 [HTML]시맨틱 태그(Semantic Tag) 1. 메타 데이터란 데이터에 대한 데이터 2. 시맨틱 태그 특정 의미를 가진 태그 영역을 의미있게 나눌 때 사용한다. div 태그와 기능은 완전히 같다. 작성하는 사람의 의도에 맞게 사용해야한다. 아주 엄격한 사용법이 있는것은 아니다. header 도입부를 나타내는 태그 nav 사이트 안에서 이동하는 메뉴 영역 main (한페이지에서 한번 사용해야한다) 본문 footer 영역 아래쪽에서 정보를 담고 있는 태그 article 독립적이고 완전한 내용을 가지고 있는 태그(ex: 블로그 게시글, 댓글) section 주제에 맞게 영역을 나눌 때 사용하는 태그 figure 이미지와 이미지 설명 3. 시맨틱 태그의 장점 - 검색 엔진 최적화(Search Engine Optimization) SEO 헤드 태그에 메타.. [HTML]폼 태그 1. 데이터를 전송할 때 사용하는 태그 2. 라벨 인풋의 설명 인풋태그를 라벨에 감싸거나 설명 라벨의 for 속성과 input의 id속성을 맞춰주면 label의 내용을 클릭하면 input이 포커스된다. 3. input 태그 name 속성 폼 태그가 데이터를 전송할 때 데이터의 이름 4. input 태그 type속성 text 기본값 password 비밀번호 email 이메일 date 날짜 number 숫자 checkbox 체크박스 여러가지선택 가능 value기본값 on radio 동그란 선택 버튼 여러가지 중 하나 value 기본값 on select 지정 된 값 중에 선택(type이 아니라 태그임) 안에다 option 태그로 목록 생성 file 파일 (accept=".png,.jpg") (multiple).. [HTML]리스트, 테이블, 멀티미디어 태그 1. 리스트 ol ordered list 순서가 있는 리스트 ul unordered list 순서가 없는 리스트 li list item 리스트 아이템 리스트 스타일링 type 속성을 사용할 수 잇다. type ="a" a. b. c. type ="A" A. B. C type ="1" 1. 2. 3. 4. type ="i" i. ii. iii. 등등 css 사용 가능 list-style: disc, decimal, hangul, none 등등 2. 테이블 태그 테이블 태그 테이블 로우 테이블 셀 table header 제목내용을 적는 셀 테이블 꾸미기 border를 넣어준다 셀 사이 공간 없애기 table { border-collaps: collaps; } 셀 사이 공간 늘리기 table { border-.. [HTML]링크 1. HyperText Markup Language 링크로 연결된 문서를 만들고, 구조와 의미를 마크업하는 언어 속성에서 true false를 값으로 가지는 속성은 속성이름만 적는 방법이 있다. 기본값이 false 2. 링크의 상대주소 index.html 링크를 연결할 때 / 다음 파일이름을 작성안하면 index.html에 연결된다. ./ 현재폴더 ../상위폴더 / 최상위 폴더 3. 페이지 안에서 이동하기 URL 프래그먼트 : 주소 맨 뒤에 붙어 해당 주소의 일부분을 가리킨다 태그의 아이디를 이용 4. 링크 새창 열기 target="_blank" 임의의 target target="이름" 해당 타켓으로 새로 열린 새창에는 같은 타겟 속성값이 있는 창들이 열림 5. a 태그로 메일 보내기, 전화걸기 href.. [HTML]HTML 기본 정리 - 1 1. DTD(Document Type Definition) 문서형 정의 웹 브라우저에게 이 문서가 HTML 문서라고 정의해주는 문장. 2. 문서의 작성은 시작태그, 종료태그 사이의 내용을 입력한다. 이전 1 다음