JuinThyme

태그 - 버튼 넣기 태그에서 type을 buttn, submit, reset 를 지정하면 해당 기능을 가진 버튼이 표출됐다. 태그 말고도 태그를 이용해서 버튼을 표출할 수 있다. 내용 속성 submit : 폼을 서버로 전송한다. reset : 폼에 입력한 모든 내용을 초기화한다. button : 버튼 형태만 만들 뿐 자체 기능은 없다. 태그 - 계산 결과 태그는 입력하는 값이 계산 결과라는 것을 브라우저에 알려준다. 내용 + = num1.value는 input 태그의 첫 번째 필드에 입력된 값이다. num2.value는 input 태그의 두 번째 필드에 입력된 값이다. 태그 - 진행 상태 보여주기 태그는 작업 진행 상태를 나타낼 때 사용하는 태그다. 작업 시작을 0으로 하고 최종 완료를 최댓값으로 해 얼..

IT/HTML 및 CSS 2021. 4. 8. 19:53

, , 태그 - 드롭다운 목록 만들기 사용자가 내용을 입력하는 것이 아니라 여러 옵션 중에서 선택하도록 하고 싶을 때 드롭다운 목록을 사용한다. 드롭다운 목록이란 클릭했을 때 옵션들이 요소 아래쪽으로 펼쳐져서 붙여진 이름이다. 태그 내용1 내용2 내용3 태그 속성 size : 화면에 표시될 드롭다운 메뉴의 항목 개수를 지정한다. multiple : 브라우저 화면에 여러 개의 옵션이 함께 표시되면서 Ctrl 키를 누른 상태로 드롭다운 메뉴에 있는 여러 항목을 선택할 수 있다. 태그 속성 value : 옵션을 선택했을 때 서버로 넘겨질 값을 지정한다. selected : 화면에 표시될 때 기본으로 선택되어 있는 옵션을 지정한다. 과자 바나나킥 조리퐁 맛동산 유과 한과 태그 - 옵션끼리 묶기 드롭다운 목록에서..

IT/HTML 및 CSS 2021. 4. 7. 20:06

autofocus 속성 - 입력 커서 표시하기 autofocus 속성을 사용하면 페이지를 불러오자마자 폼의 요소 중에서 원하는 요소에 마우스 커서를 표시할 수 있다. 이 기능은 HTML5에서 추가된 기능이다. 이름 placeholder 속성 - 힌트 표시하기 포털 사이트의 로그인 창에서도 따로 '아이디'나 '비밀번호' 같은 제목에 붙이지 않고 입력 박스 안에 '아이디'나 '비밀번호'라고 표시해 놓아 사용자가 알아볼 수 있다. 태그의 placeholder 속성으로 만들 수 있다. 학번 실행 화면 readonly 속성 - 읽기 전용 필드 만들기 입력란에 텍스트를 표시하는 것을 넘어 사용자가 입력하지 못하고 읽게만 만들 수 도 있다. readonly 속성은 필드 안에 내용이 있지만 내용을 보여주기만 하고, 입..

IT/HTML 및 CSS 2021. 4. 6. 21:52

type="submit", type="reset" - 서버 전송, 리셋 버튼 넣기 리셋(reset) 버튼은 요소에 입력된 모든 정보를 재 설정해 사용자가 입력한 내용을 모두 지울 수 있다. type="submit"은 사용자가 입력한 정보를 서버로 전송하는 버튼을 넣는다. 태그에서 지정한 폼 처리 프로그램으로 넘긴다. 메일주소 type="image" - 이미지 버튼 넣기 submit 버튼 대신에 이미지를 넣어서 서버로 전송하는 이미지 버튼을 넣는다. 기능은 submit 버튼을 클릭할 때처럼 사용자가 입력한 정보를 폼 처리 프로그램으로 전달된다. 아이디 비밀번호 type="button" - 버튼 넣기 폼 안에 버튼 형태를 만든다. submit이나 reset 같은 자체 기능이 없는 버튼만 넣는다. 그래서 버튼..

IT/HTML 및 CSS 2021. 4. 5. 20:00

태그 살펴보기 사용자가 내용을 입력하는 부분은 한 줄짜리 텍스트나 비밀번호 같은 부분인데, 이런 부분을 만들 때 사용하는 태그가 태그다. 체크박스나 로그인 버튼처럼 사용자가 클릭하는 버튼도 태그를 이용한다. id 속성 사용하기 폼을 만들다 보면 똑같은 폼 요소가 여러 번 사용 된다. 예를 들어 회원 가입 폼을 만들 경우, 이름 입력 항목이나 주소 입력 항목 등 한 줄짜리 텍스트를 입력할 때 모두 라는 텍스트 필드를 사용한다. 여러 번 사용된 폼 요소를 구분하기 위해 사용하는 것이 id 속성이다. id를 지정하면 태그를 이용해 캡션을 붙일 수도 있고, CSS를 이용해 각 요소마다 다른 형태로 꾸밀 수 있다. 태그의 type 속성 hidden : 사용자에게는 보이지 않지만 서버로 넘겨지는 값을 가진다. te..

IT/HTML 및 CSS 2021. 4. 2. 20:40

태그 - 폼 만들기 폼 요소 태그 속성 값 method : 사용자가 입력한 내용들을 서버 쪽 프로그램으로 어떻게 넘겨줄지 지정한다. get : 주소 표시줄에 사용자가 입력한 값이 그대로 드러난다. post : 사용자의 입력을 표준 입력(standart input)으로 넘겨주기 때문에 입력한 내용의 길이에 제한을 받지 않고, 입력한 내용이 드러나지 않는다. name : 폼의 이름을 지정한다. action : 태그 안의 내용들을 처리해줄 서버 상의 프로그램을 지정한다. target : 태그에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도로 지정한다. autocomplete 속성 - 자동 완성 기능 검색창이나 로그인 창에 내용을 입력할 때 이전에 입력했던 내용이 아래에 표시되는 것이다. 속성을 '..

IT/HTML 및 CSS 2021. 3. 31. 22:07

태그, href 속성 - 링크 만들기 웹 사이트에서 클릭했을 때 다른 페이지로 넘어가지 않는 요소가 거의 없을 정도로 링크는 웹 상에서 널리 사용되고 있다. '메뉴'에도 링크가 적용되어있다. 링크를 만드는 태그는 텍스트와 함께 사용하면 텍스트 링크가 되고 이미지와 함께 사용하면 이미지 링크가 된다. 텍스트 속성 href : 링크한 문서나 사이트의 주소를 입력한다. target : 링크한 내용이 표시될 위치(현재 창 또는 새창)를 지정한다. download : 링크한 내용을 보여주는 것이 아니라 다운로드 한다. rel : 현재 문서와 링크한 문서의 관계를 알려준다. hreflang : 링크한 문서의 언어를 지정한다. type : 링크한 문서의 파일 유형을 알려준다. 텍스트 링크의 글자 색상 바꾸기 기본적으..

IT/HTML 및 CSS 2021. 3. 30. 12:23

태그, 태그 - 순서 없는 목록 만들기 순서가 필요하지 않는 목록(unordered list)을 만들 때 태그를 사용하고 태그 안에 태그를 사용해 각 항목을 표시한다. 각 항목 앞에 작은 원이나 사격형 같은 블릿이 붙는다. 목록 1 목록 2 목록 2 실행 화면 태그, 태그 - 순서 목록 만들기 태그에는 순서와 관련된 몇 가지 속성이 있으므로 속성 값에 조금씩 다른 형태로 표시할 수 있다. type 종류 1 : 숫자(기본값) a : 영문 소문자 A : 영문 대문자 i : 로마숫자 소문자 I : 로마숫자 대문자 start 속성 : 순서 목록을 기본적으로 1부터 시작하는데 start 속성을 이용하면 중간 번호부터 시작할 수 있다. reverse 속성 : 항목을 역순으로 표시한다. 박물관 미술관 경복궁 박물관 ..

IT/HTML 및 CSS 2021. 3. 29. 22:35