개발/HTML 썸네일형 리스트형 [HTML] Form tag / input tag 모음집 Form Tag - 웹서비스를 이용하려면 회원가입을 한 후, 로그인을 해야한다. 회원가입을 하려면 이메일 주소, 아이디, 비밀번호가 필요하다. 이러한 정보를 적을때 사용하는 tag가 form tag이다. - 위의 정보는 서버 사이드 프로그램을 통해 DB에 저장된다. Form Tag 사용방법 1. name : 폼 태그의 이름 2. method : 작성한 정보들을 어떠한 방식으로 보낼 것인지 (Get, Post) 3. action : 정보를 어디로 보낼것인지 input tag - input tag는 type의 값에 따라 많은 기능을 제공한다. 1. type : 속성값에 따라 ID 입력폼, 비밀번호 입력 폼등이 될 수 있다. 2. name : 입력폼의 이름, 서버 사이드 언어에서 name값으로 전달된 정보들을.. 더보기 [HTML] 메타(meta) 태그 정리 / 메타 태그 종류 메타 태그를 충실히 입력하면 검색 엔진에서 해당 키워드로 검색 시 상위에 노출될 확률이 높아지며 이는 키워드 광고를 이용하지 않고도 사이트가 상위 노출됨으로써 광고비용이 절감된다 메타태그의 속성 메타태그 속성에는 http-equiv, name content 3가지 속성이 있다. http-equiv = "항목명" - 웹 브라우저 서버에 명령을 내리는 속성 - name 속성을 대신해 사용할수 있음 - html 문서가 응답 헤더와 함께 웹 서보로 부터 웹 브라우저에 전송되었을때만 의미를 가짐 - content 속성의 정보 / 값을 위한 HTTP header를 제공 - html4에서는 문자 설정을 할때 사용했지만 html5에서는 문자 설정 방법이 더욱 간단해짐 ex) html4.01 : html5 : conte.. 더보기 [HTML] 폼태그 모음집 1. form (form tag는 사용자가 입력한 데이터를 수집하기 위해 사용됨, 입력 양식 태그를 포함할수 있다.) form elements (imput, textarea, button, select, checkbox, radio button, submit button...etc attribute Value Description action URL 입력데이터(form data)가 전송될 URL 지정 method get / post 입력 데이터(form data) 전달 방식 지정 Get과 Post는 HTTP 프로토콜을 이용해서 사용자 입력 데이터를 서버에 전달하는 방식(HTTP request method) Get - GET 방식은 전송 URL에 입력 데이터를 쿼리 스트링으로 보내는 방식 예) https:.. 더보기 [HTML] 이미지 표현 / 동영상 / 음악 / 멀티미디어 / Tag 1. 이미지 (WebPage에 이미지를 삽입하는 경우, img tag를 사용한다) - - attribute Description src 이미지 파일 경로 alt 이미지 파일이 없을 경우 표시되는 문장 width 이미지 너비 (CSS에서 지정하는 것이 일반적) height 이미지 높이 (CSS에서 지정하는 것이 일반적) 2. 미디어 2.1 adio - attribute Description src 음악 파일 경로 preload 재생 전에 음악 파일을 모두 블러올 것인지 지정 autoplay 음악 파일을 자동의 재생 개시할 것인지 지정 loop 음악을 반복할 것인지 지정 constols 음악 재생 도구를 표시할 것인지 지정. 재생 도구의 외관은 브라우저마다 차이가 있다. - 웹브라우저 별로 지원하는 음악 파.. 더보기 [HTML] Table (tag, attribute) tag Dscription table 표를 감싸는 태그 tr 표 내부의 행 (table row) th 행 내부의 셀 (table heading) td 행 내부의 일반 셀 (table data) attribute Description border 표 테두라 두께 지정 rowspan 해당 셀이 점유하는 행의 수 지정 colspan 해당 셀이 점유하는 열의 수 지정 더보기 [HTML] 목록 List /<ul> / <ol> / <il> unorder List (순서없는 목록) 순서가 없 찌롱 - 순서가 - 없 - 찌롱 Ordered List (순서있는 목록) 순서가 있 찌롱 1. 순서가 2. 있 3. 찌롱 type (순서를 나타내는 문자 지정 가능) ex) "1", "A", "a", "I", "i" 숫자가 지정되어 이찌롱 start (리스트 시작값 지정 가능) 숫자가 지정되어 이찌롱 -> 3부터 시작 (3,4,5 요렇게) reversed (순서가 역으로 나옴) 숫자가 지정되어 이찌롱 -> 3,2,1 이렇게 나옴 더보기 [HTML] Hyperlink 정리 HyperLink (한 텍스트에서 다른 텍스트로 건너뛰어 읽을 수 있는 이 기능) - HyperText의 Hyper는 컴퓨터 용어 - 텍스트 등의 정보가 동일 선상에 있는것이 아니라 다중으로 연결되어 있는 상태를 의미 - HTML의 중요 특징 link의 개념과 연결되는데 기존 문서나 텍스트의 선형성, 고정성 제약에서 벗어나 사용자가 원하는 순서대로 원하는 정보를 취득할 수 있는 기능을 제공 - HTML link는 hyperlink를 의미하며 a(anchor) tag가 그 역할을 담당한다. -> 실행 시, Visit google.com! text click하면 google 화면으로 간댜~ 1. Href attribute (이동하고자 하는 파일의 위치를 값으로 받는다.) 2. Directory 루트 디렉터리.. 더보기 [HTML] Text 관련 Tag / 특수문자 글자 크기(1에서 6으로 갈수록 작아짐) bold체 의미론적(Semantic) 중요성 없음 bold체 의미론적(Semantic) 중요성 있음 Italic체를 지정한다. 의미론적(Semantic) 중요성 없음 강조, 중요한 text 지정 의미론적 중요성 있음 특정 글자 작게 나오게 하기 가운데 줄긋기 밑줄치기 text 위로 올리기 text 밑으로 내리기 단락(Paragraphs) 지정 텍스트 단락을 만들며 앞뒤에 줄바꿈이 있는 텍스트 덩어리를 말함 만약 웹페이지 창의 너비보다 길어질 경우 자동 줄바꿈이 일어남 강제 개행 연속적 공백 태그 내의 content 작성된 그대로 브라우저 표시 HTML은 연속적으로 공백을 많이 넣더라도 한개의 공백만 표시되지만 pre tag는 그대로 표시됨 수평줄 삽입(점.. 더보기 이전 1 2 다음
