본문 바로가기

📁Web Developing/HTML 기초17

폼에서 사용하는 여러 가지 태그 textarea : 여러 줄을 입력하는 텍스트 영역 여러 줄을 입력하는 텍스트 영역을 만듭니다. 게시판에서 글을 입력하거나, 약관 등을 표시할 때 자주 사용합니다 내용 cols와 rows 속성을 이용하여 텍스트 영역의 크기를 지정할 수 있습니다. cols는 문자 단위이고 rows는 줄 단위입니다. 지정한 rows수보다 텍스트가 길어지면 자동으로 스크롤 막대가 생깁니다 회원 가입을 환영합니다 메모 select, option : 드롭다운 목록 사용자가 내용을 직접 입력하는게 아니라 여러 옵션 중에서 선택하게 하려면 드롭다운 목록을 사용할 수 있다. select태그와 option태그를 이용해 표시한다. select태그로 드롭다운 목록의 시작과 끝을 표시하고, option태그를 사용해 그 안에 원하는 항목을 추.. 2022. 5. 30.
input 태그-6 (주요 속성들) input 태그에 여러 자잘한 기능들을 추가할 수 있는 속성들을 알아보자 autofocus : 자동으로 커서 가져다놓기 이 속성을 사용하면 페이지를 불러오자마자 원하는 요소에 마우스 포인터를 사용할 수 있다. placeholder : 힌트 표시 텍스트박스에 적당한 힌트 내용을 표시하고, 힐드를 클릭하면 힌트가 사라지도록 할 수 있다. '아이디를 입력하세요' 등의 힌트를 로그인 텍스트박스에 표시하는 것이 그 예시이다. autofocus와 placeholder를 사용하는 예제이다 배송 정보 이름 배송 주소 이메일 연락처 배송 지정(주문일로부터 최소 3일 이후) readonly : 읽기 전용 필드 입력은 못하고 읽게만 하는 읽기 전용 필드를 만들 수 있다. required : 필수 입력 필드 submit 버튼.. 2022. 5. 30.
input 태그-5 (버튼, 히든필드) 전송기능을 하는 submit 버튼 submit은 폼에 입력한 정보를 서버로 전송합니다. submit 버튼으로 전송된 정보는 태그의 action속성에서 지정한 폼 처리 프로그램에 넘겨집니다. 입력한 내용을 모두 지우는 reset 버튼 요소에 입력된 모든 정보를 재설정해서 사용자가 입력한 내용을 모두 지우는 역할을 합니다. 이미지 버튼 type="image"는 submit 버튼과 같은 기능을 하는 이미지 버튼을 나타냅니다. 기본 버튼 type="button"은 submit이나 reset버튼과 같은 기능이 없고 오직 버튼 형태만 삽입합니다. 주로 버튼을 클릭해서 자바스크립트를 실행할 때 사용합니다. 기본형은 다음과 같습니다 기본 버튼을 이용해 자바스크립트의 window.open() 함수를 실행하여 연결한 문서.. 2022. 5. 30.
input 태그-4 (날짜와 시간 입력) 날짜 입력하기 웹 문서나 애플리케이션에 달력을 넣으려면 type="data" , type="month" , type="week" 같은 날짜 관련 유형을 이용한다. 기본형은 다음과 같다 type 설명 "date" 달력에서 날짜를 선택해서 입력할 수 있다. "month" 달력에서 월을 선택해서 입력할 수 있다. "week" 달력에서 주를 선택해서 입력할 수 있다. 예시를 보자 날짜 지정하기 시간 입력하기 기본형은 다음과 같다 type 설명 "time" 폼에서 시간을 입력하게 합니다. 오전/오후, 시, 분으로 시간을 입력합니다. "datetime", "datetime-local" 사용자가 웹 문서를 보고 있는 지역에 맞는 날짜와 시간을 함께 입력할 수 있습니다. 예시는 다음과 같다 시간 지정하기 2022. 5. 30.
input 태그-3 (number, range) 스핀박스나 슬라이드 막대를 통해 숫자를 입력받는게 더 편할 때, type="number", type="range"를 사용할 수 있다. 기본형은 다음과 같다 number 와 range 필드에서 사용할 수 있는 속성은 다음과 같다 속성 설명 min 필드에 입력할 수 있는 최솟값을 지정합니다. 기본 최솟값은 0입니다. max 필드에 입력할 수 있는 최댓값을 지정합니다. 기본 최댓값은 100입니다. step 숫자 간격을 지정할 수 있습니다. 기본값은 1입니다. value 필드에 표시할 초깃값입니다. 이를 활용한 예제는 다음과 같다 선물용 3kg 개 (최대 5개) 선물용 5kg 개 (최대 3개) 가정용 3kg 개(최대 5개) 가정용 5kg 개(최대 3개) 2022. 5. 30.
input 태그-2 (버튼) 체크박스와 라디오버튼 여러 항목 중 하나의 항목을 선택하려면 라디오버튼을, 2개 이상 선택하려면 체크 박스를 사용한다. 버튼에서 사용할 수 있는 속성은 다음과 같다 종류 설명 value 선택한 체크 박스나 라디오 버튼을 서버에게 알려줄 때 넘겨줄 값을 지정합니다. 이 값은 영문이거나 숫자여야 하며 필수 속성입니다. checked 버튼은 처음에 아무것도 선택되지 않은 상태로 화면에 표시되는데, 만약 기본으로 선택해 놓고 싶은 항목이 있다면 사용합니다. 속성값은 따로 없습니다. 상품 주문을 넣는 폼을 체크바긋와 라디오버튼을 활용하여 만들어보겠다. 상품 주문 주문할 상품을 선택해 주세요. 선물용 3kg 선물용 5kg 가정용 3kg 가정용 5kg 선물포장 여부를 선택해 주세요. 선물 포장 선물 포장 안 함 라디.. 2022. 5. 30.
input 태그-1 (텍스트 입력) 구글의 검색 창, 인스타그램의 로그인 창 등은 모두 input태그로 만들어졌다. input태그는 다양한 폼에서 사용자가 입력한 정보를 받을 때 사용한다. input태그는 매우 다양한 입력 형태로 만들 수 있다. input태그에서 입력 형태를 지정할 때 type속성을 사용한다. 종류 설명 text 한 줄짜리 텍스트를 입력할 수 있는 텍스트박스를 넣습니다. passward 비밀번호를 입력할 수 있는 필드를 넣습니다 search 검색할 때 입력하는 필드를 넣습니다 url URL주소를 입력할 수 있는 필드를 넣습니다 email 이메일 주소를 입력할 수 있는 필드를 넣습니다 tel 전화번호를 입력할 수 있는 필드를 넣습니다 checkbox 주어진 여러 항목에서 2개 이상 선택할 수 있는 체크 박스를 넣습니다. r.. 2022. 5. 30.
폼 삽입하기 아이디 비번, 로그인 버튼, 회원 가입 등 사용자가 웹 사이트로 정보를 보낼 수 있는 요소는 모두 폼이라고 할 수 있다. 텍스트박스나 버튼같은 폼 형태는 HTML태그로 만들지만 폼에 입력한 사용자 정보는 ASP나 PHP, JSP 같은 서버 프로그래밍을 이용해 처리한다. 일단은 태그만 살펴보자. form 태그 태그 사이에 여러가지 폼 요소를 넣는다. 기본형은 다음과 같다 여러 폼 요소 form 태그는 몇 가지 속성을 사용해서 입력받은 자료를 어떤 방식으로 서버로 넘길 것인지, 어떤 프로그램을 이용해 처리할 것인지를 지정한다. 종류 설명 method 사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄 것인지 지정합니다. method에서 사용할 수 있는 속성값은 get과 post입니다. get : 데이.. 2022. 5. 29.
하이퍼링크 삽입하기 는 anchor로 하이퍼링크를 다루는 태그이다. 링크는 태그로 만드는데, 텍스트를 사용하면 텍스트 링크가 되고, 이미지를 사용하면 이미지 링크가 된다.기본형은 다음과 같다 텍스트 또는 이미지 텍스트 링크와 이미지 링크 만들기 이런 식으로 삽입된 하이퍼링크를 클릭하면 현재 열려 있는 웹 브라우저 창에서 새로운 문서를 연다. 만약 새 탭에서 링크를 열고 싶다면 target속성에 _blank를 지정하면 링크를 클릭했을 떄 문서가 새 탭에서 열린다. Youtube 2022. 5. 29.
멀티미디어 컨텐츠 삽입하기 object 태그 오디오파일, 비디오, 자바 애플릿, PDF등 다양한 멀티미디어 파일을 사용할 때 object태그를 사용한다. 기본형은 다음과 같다 data 속성에는 보여줄 멀티미디어 파일을 지정한다. width, height 속성을 상요해 플레이어의 크기를 지정한다. embed 태그 src속성을 사용해 삽입할 멀티미디어 파일을 지정한다. 필요하다면 width, height 속성도 이용 가능하다. 태그에는 닫는 태그가 없다. 기본형은 다음과 같다 오디오, 비디오, 이미지 등 다양한 멀티미디어 파일을 삽입할 수 있다. 따라서 HTML의 , , 태그를 지원하지 않는 웹 브라우저를 고려해야 하면, 태그를 사용해서 멀티미디어 파일을 삽입한다. , 태그 이 태그들은 음악이나 비디오를 재생할 수 있는 컨트롤바와 컨.. 2022. 5. 29.
이미지 삽입하기 태그는 이미지를 추가할 때 쓰인다. 기본형은 다음과 같다 이런 식으로 이미지를 넣을 수 있다. src 속성에는 이미지 파일 경로를 넣어야 하는데 이때 파일의 경로는 웹 문서 파일의 위치를 기준으로 결정된다. 이미지의 크기 조정 이미지의 크기를 변경하고 싶다면 width 혹은 height 속성을 활용하면 된다. width="200" 이런식으로 옵션을 추가적으로 적어주면 된다. 이때 숫자 수치는 픽셀값이며, "50%"처럼 비율값으로 설정하면 현재 웹 브라우저 창의 너비와 높이를 기준으로 이미지 크기를 결정한다. 이때 width와 height중 하나만을 입력하면 다른 하나의 값은 비율에 맞추어 알아서 계산해준다. +title옵션을 활용해 마우스를 올리면 추가정보를 툴팁으로 표시해줄 수 있다. 2022. 5. 28.
표 태그 이해하기 어려우니 잘 들어보자. 표 생성-기본 기본적으로 표를 만드는 방법은 다음과 같다. 태그는 표 제목을 적어주는 태그이다 각 칸에 들어갈 데이터들을 태그로 감싼다. 한 행에 들어갈 태그들을 태그로 감싼다. 모든 행들을 태그로 감싼다. 표의 구조를 다루기 표에서 각 열의 내용을 설명해주는 표의 첫 행을 태그로 감싸고 table data를 의미했던 를 태그로 바꾸어주면 html은 이부분이 표의 첫 행이고 정보를 표시하는 부분이라는 것을 인식한다. th태크로 감싸진 텍스트는 굵게 표시한다. 합계 등을 표의 맨 아래에 적을때는 이라는 태그로 감싸주면 인식한다. 그 외의 내용에 해당하는 부분은 태그로 감싸주면 일반 데이터 부분이라고 인식한다. 이렇게 재목행과 결과행을 만들 수 있다. 만약 제목행이 아닌 제목.. 2022. 5. 28.
리스트와 설명 목록 태그 list 태그 목록을 표시하는 법도 알아보자. 로 감싸면 목록이 된다. 로 감싸면 그루핑이 된 효과가 일어난다. 일반적으로 ul태그로 li태그들을 감싸서 사용한다. ul대신 ol로 감싸면 숫자가 있는 리스트로 만든다. 1 2 3 4 5 6 7 8 9 10 11 12 pagename Hello, GYHEO! Colored by Color Scripter 2022. 5. 28.
텍스트 컨텐츠를 다루는 태그들 heading 태그 h1, h2... 태그는 제목(heading)을 의미한다. 큰 글자로 보여주고, 줄바꿈을 해준다. paragraph 태그 태그는 단락(paragraph)을 만드는 태그이다. 단락과 단락 사이에 줄바꿈을 넣어준다. css를 활용하여 단락 사이의 간격을 조정할 수 있다. 줄바꿈 태그 이라는 태그는 줄바꿈(break) 기능을 제공한다. 태그는 닫는 태그가 없다는 점에 주의하자. 인용문 태그 태그 대신 태그를 사용하면 안으로 들여써진 인용 단락을 만들 수 있다. 2022. 5. 28.
글자의 형태를 다루는 태그들 strong, bold 태그 태그사이의 글자를 볼드처리한다. 은 경고문 따위를 적는 두꺼운 글씨에 쓰는 것이고 그냥 내맘대로 굵은 글씨를 써서 강조하고 싶을 때에는 를 활용한다. 이텔릭체 태그 또는 태그를 활용하여 기울인 텍스트를 보여줄 수 있다. em은 emphasis의 줄임말로써, 흐름상 강조하고 싶을 때 쓰는 태그이고 i는 italic의 줄임말로써 마음속의 생각이나 용어, 관용구 등에 사용한다. 기타 태그들 (대괄호는 생략하였음) abbr : 줄임말을 표시하고 title 속성을 함께 사용할 수 있음 cite : 웹 문서나 포스트에서 참고 내용을 표시함 code : 컴퓨터 인식을 위한 소스코드 small : 부가 정보처럼 작게 표시해도 되는 텍스트 sub : 아래 첨자를 표시 sup : 위 첨자를 표.. 2022. 5. 28.

티스토리툴바