HTML (7) 썸네일형 리스트형 HTML attribute vs property attribute- HTML 텍스트 문서에 있는 것- html 문서에서 elements 에 추가적인 정보를 넣을 때 사용되는 요소- 변하지 않고 초기 (default)값을 전달⇒ html 문서 안에서의 정적인(바뀌지 않는) 속성 그 자체 property- HTML DOM 트리에 있는 것- properties는 변할 수 있음⇒ html DOM 안에서 동적인(바뀌는) 속성(또는 그 값) 차이점 예시 EX cookie / session-storage / local-storage session-storage - key-value 형태 - 브라우저 탭을 닫을 때 사라짐 - 모바일은 2.5mb, 데스크탑은 5mb~10mb의 용량 - window.sessionStorage local-storage - key-value 형태 - 수동으로 지우지 않는 이상 영구적 보관 - 모바일은 2.5mb, 데스크탑은 5mb~10mb의 용량 - window.localStorage cookie - key-value 형태 - HTTP요청시 사용자의 쿠키 정보가 서버로 전달 - 4kb의 용량 - 사용자의 로컬에도 저장되고, 매 HTTP요청마다 별도의 암호화 없이 전달 - 같은 도메인간에는 쿠키값 공유 <form> method : get vs post GET- URL을 통해 데이터 name/value 쌍으로 전송 (개발자 도구에서 확인 가능)- 캐시 될 수 있음- 브라우저 히스토리에 남음- 북마크 될 수 있음- 보안이 필요한 데이터를 다룰때 사용하면 안됨- 길이에 제한이 있음- 데이터를 요청할 때만 사용됨- select적인 성향을 가지고 있음- 서버에서 데이터를 가져와서 보여주는 용도 (서버의 값이나 상태 등을 바꾸지 않음)- 게시판의 리스트, 글 보기, 페이지 검색, 조회 같은 기능- 전송 속도가 POST 보다 빠름 ⇒ 서버에 데이터를 요청하는 경우 사용 POST- http 바디를 통해 데이터를 전송- 절대 캐시되지 않음- 브라우저 히스토리에 남지 않음- 북마크 될 수 없음- 데이터 길이에 제한이 없음- 서버의 값이나 상태를 바꾸기 위해서 사용 ⇒ .. <button> vs <input> - type="submit" : 폼 전송- type="reset" : 폼 내용 초기화- type="button" : 기능 구현에 주로 사용. (자바스크립트 이용) ⇒ type 속성은 반드시 지정하는 것이 바람직하며 지정하지 않을 경우 submit 기능을 수행 - button 과 같은 타입을 명시할 경우 동일한 기능 수행( ⇒ ) w3schools 에서 설명하는 - Inside a element you can put content, like text or images. This is the difference between this element and buttons created with the element.⇒ 은 닫는 태그이므로 컨텐츠에 텍스트 뿐만 아니라 HTML요소도 받을 수 있다. - If yo.. 셀렉트박스 , 콤보박스 <select> / <option> / <optgroup> 태그 - select box, combobox, drop-down list, pull-down menus 라고도 함- multiple 속성 : shift, ctrl을 이용한 다중선택을 가능하게 함- size 속성 : 보여줄 option의 개수를 설정함 .설정할 경우 list box 처럼 사용 - 콤보 박스의 옵션- selected 속성 : 페이지가 로드 될 때 미리 선택됨- disabled 속성 : 선택 불가능 - label 속성 : 옵션에 카테고리 설정 EX 1⇒ selected 속성을 사용하지 않으면 제일 처음 옵션이 선택된다 EX 2⇒ 의 selected 속성을 여러개 사용하면 나중에 지정된 옵션이 선택된다 EX 3⇒ 의 multiple 속성을 사용하면 selected 속성을 사용한 option이 .. 인라인(Inline) 요소 / 블록(Block) 요소 인라인 요소(Inline element)- 줄바꿈 없이 우측으로 바로 이어서 표시- 인라인 요소 안에 다른 인라인 요소 포함 가능- 컨텐츠가 끝나는 지점까지를 너비로 가지게 됨- 임의로 width, height 로 변형을 줄 수 없음- margin이 아니라 line-height로 줄의 높낮이 (상하 여백) 조절- padding-top/bottom 사용 불가- text-align으로 텍스트의 중앙, 좌 , 우측 정렬 가능- 인라인 속성을 가진 태그끼리 연속으로 사용될 경우 최소한의 간격 유지를 위해 좌, 우 약 5px 가량의 외부 여백 자동 생성 ⇒ 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치 EX 1⇒ div 태그는 block요소 이지만 css에서 강제로 inline요소로 보이게 처리 -> wi.. 마크업(Markup) / 마크업언어(markup language) 마크업(Markup)- 본문 내용에서 사용자가 특별한 정보를 표시하기 위한 모든 것- 문서 처리를 지원하기 위한 문서에 추가되는 정보 ⇒ 문서의 내용이 아니라 내용이 어떻게 배치되고 어떤 크기와 모양을 가지며 여백은 어느 정도인지를 표현하는 기술 마크업 언어(Markup language)- 문서의 구조를 정의하고 정보를 표현하기 위한 언어- 문서 안의 정보가 어떻게 구조화되었는가를 지정하는 언어- 마크업 언어는 "마크(Mark)"로 둘러싸인 언어 (태그로 둘러싸였다고도 표현)- 문서의 골격에 해당하는 부분을 작성하는데 사용- 문서의 내용에 추가적인 정보를 표시하기 위한 언어 ⇒ 문서의 내용을 조직화하고 구조화 시켜, 문서를 읽는 사람 및 문서를 처리하는 응용 프로그램이 내용을 정확하게 이해하는데 추가적인.. 이전 1 다음