이글에는 일전에 소개했던 input 태그 속성에 대해 추가 설명하겠다. https://coding-diary100.tistory.com/40 HTML_form,input,label 태그 폼 태그 - 웹 페이지에서 사용자로부터 입력을 받을 때 사용하는 태그 - 사용자가 입력한 데이터를 서버로 보낼 떄 form 요소를 사용 문법 전송방법 get : url에 데이터를 포함하여 전달 post : body 에 coding-diary100.tistory.com 이전에 정리한 input 속성의 type이다 input 태그 : 입력상자 type 속성 checkbox : 러개의 옵션 중에서 다수의 옵션을 입력받을 수 있도록 하는 버튼 ✔그룹을 맺기 위해 name속성을 동일하게 해야함 File : 원하는 파일을 서버로 전..
시맨틱 태그(semantic)란? -semantic : 의미론적인 시멘틱 태그란 의미가 있는 태그를 말한다. div 나 span 태그와 달리 꾸밈없이 그 자체에 의미가 담긴 태그이다. 그렇다면 왜 사용할까? 시맨틱 태그의 장점 - 검색엔진 최적화 - 스크린 리더를 사용하여 페이지를 탐색할때 도움이됨 - div>div>div>div>div>div>div> .... 끝없는 div를 탐색하는 것보다 효율적이다. - 개발자에게 명확한 의미를 전달 시멘틱 태그의 종류 ●hearder -페이지의 제목과 같은 소개 내용을 포함 -hearding 태그나 로고,검색양식,작성자 이름등을 포함 ●nav 메뉴. 목차등에 사용 ●main 지배적인 컨텐츠 영역을 나타내는 태그 ●section - 구체적인 시맨틱 태그가 없는 문서..
1.inline 태그 -content 크기 만큼만 자리를 차지하는 요소 -텍스트, img, span -텍스트의 특징을 가지고 있음 2.block 태그 -라인을 모두 차지하는 요소 -p, h, ul, li, div -면의 특징을 가지고 있음 ●span 태그 -줄 단위로 영역이 설정 -inline 특징을 가지고 있음 ●div 태그 -면 단위로 영역이 설정 -block 특징을 가지고 있음
버튼 태그 버튼을 생성하는 요소 버튼명 input tpye ="button"과 동일하다. type 속성 input 태그의 버튼 형식으로 발현되는것 버튼 태그이지만, input type 속성으로 발현 될 수 있으므로 같이 설명하겠다. ●button 이것만 실행시 아무 의미 없다. CSS나 JavaScript 로 꾸미기 가능하다. ●reset 입력값들을 지운다. ●submit 데이터를 전송한다. 결과물 선택상자 ●여러개의 옵션이 드롭다운 리스트로 되어 있으며 그 중에서 단하나의 옵션만을 선택 문법 프로그래머 공무원 전문직 학생 취준생 value가 서버로 전달됨 결과물 여러줄 글상자 ●여러줄의 텍스트를 입력받는 글상자 value : value의 위치가 특이하다. 자기소개 결과물
폼 태그 - 웹 페이지에서 사용자로부터 입력을 받을 때 사용하는 태그 - 사용자가 입력한 데이터를 서버로 보낼 떄 form 요소를 사용 문법 전송방법 get : url에 데이터를 포함하여 전달 post : body 에 데이터를 포함하여 전달 input 태그 -입력 상자 생성 사용 속성 type 속성 ●text : 문자를 입력받는 글상자 ●password : 비밀번호를 입력받는 글상자 ●radio : 여러개의 옵션 중에서 단 하나의 옵션만을 선택할 수 있도록 하는 버튼 ✔그룹을 맺기 위해 name 속성의 값을 동일하게 해야함 (name을 동일하게 하면 그룹이 맺어진다.) 사용속성 ●name : 요소의 이름을 설정. 서버에서 값을 전달받을 때 key로 사용 (입력받은 값이 서버에 가면 name값으로 인식되어..
https://coding-diary100.tistory.com/29 HTML_기본개념 HTML ( Hyper Text Markup Language) 클라이언트 사이드 언어이다. 같은 클라이언트 사이드 언어로는 CSS와 JavaScript가 있다. HyperText (웹 페이지에서 다른 페이지로 이동할 수 있는것) 기능을 가진 문서를 만 coding-diary100.tistory.com 기본개념은 따로 정리해 놓았다. 사용 Tool: vscode iframe ● inline frame의 약자 ● 웹사이트 안에 또 다른 웹사이트를 삽입 기본문법 사용 속성 ●target : 하이퍼링크 속성으로써 경로설정 가능 ex) target: '특정name' target:'_blink' : 새탭에서 열림 ●name: i..
https://coding-diary100.tistory.com/29 HTML_기본개념 HTML ( Hyper Text Markup Language) 클라이언트 사이드 언어이다. 같은 클라이언트 사이드 언어로는 CSS와 JavaScript가 있다. HyperText (웹 페이지에서 다른 페이지로 이동할 수 있는것) 기능을 가진 문서를 만 coding-diary100.tistory.com 기본개념은 따로 정리해 놓았다. 사용 Tool: vscode 테이블 태그 -여러 종류의 데이터를 보기 좋게 정리하여 보여주는 표를 작성 -로 시작하고 끝냄 사용 태그 : 행을 생성 , : 셀을 생성 : 셀의 제목,가운데 정렬, 굵은 글씨 : colgroup 태그 뒤에 나오는 컬럼(th 또는 td)에 적용할 스타일을 해당 ..
https://coding-diary100.tistory.com/29 HTML_기본개념 HTML ( Hyper Text Markup Language) 클라이언트 사이드 언어이다. 같은 클라이언트 사이드 언어로는 CSS와 JavaScript가 있다. HyperText (웹 페이지에서 다른 페이지로 이동할 수 있는것) 기능을 가진 문서를 만 coding-diary100.tistory.com 기본개념은 따로 정리해 놓았다. 사용 Tool: vscode 하이퍼링크 : 텍스트나 이미지에 지정하여 이동을 쉽게하고, 자료를 연결할 수 있다. - 다른 페이지 또는 사이트로 연결하는 링크(문자 또는 이미지) - 인라인 태그 문법 링크에 사용할 문자 또는 이미지 하이퍼 링크를 사용하기전에 웹서버를 구축하기 위해 호스팅과 ..
