본문 바로가기

IT/HTML9

HTML-input태그 #2 태그 1편에 이어 2편 시작하겠습니다. 이번 글도 태그 속성값들을 하나씩 알아보겠습니다. 태그 속성값 #2 - color- date- datetime-local- month- number- range- search- tel- time- week- email 총 11개의 태그 속성값의 표시방법과 실제 웹페이지를 살펴보겠습니다. ① color 표시방법1234567891011121314 input태그 속성값 색상 Colored by Color Scriptercscolor의 기본 표시방법입니다. 색상 버튼을 선택하면 원하는 색상을 고를 수 있습니다. ② date date는 날짜(연도/월/일) 입력란입니다. 표시방법1234567891011121314 input태그 속성값 생년월일 Colored by Color S.. 2020. 12. 9.
HTML-input태그 #1 지난번 글에서 form 태그에 대해 알아보면서 태그도 잠시 나왔는데 오늘은 입력양식 태그인 태그에 대해 조금 더 상세하게 알아보겠습니다. 태그 속성값 - text: 글자 입력란- password: 비밀번호 입력란- button: 버튼 생성- submit: 제출 버튼 생성- checkbox: 체크박스 생성- radio: 라디오 버튼 생성- file: 파일 입력 양식- hidden: 숨김- image: 이미지 생성- reset: 초기화 버튼 생성 태그 속성값은 이외에도 종류가 많기 때문에 2편에 조금 더 다루겠습니다.지난 번 글에서 간단한 로그인 양식을 만들어봤는데 이번엔 type속성값 각각의 예시를 보여드리겠습니다. ① text표시방법11234567891011121314 input태그 속성값 Colored.. 2020. 12. 9.
HTML - form태그 이번엔 입력 양식 태그인 태그에 대해 알아보겠습니다. #1 태그설문조사나 회원가입 등 사용자에게 어떠한 값을 받을 때 사용하는 폼(양식)이라고 생각하면 됩니다.태그들을 나열하기 위해 태그를 사용합니다. 속성- action: form의 데이터가 전송되는 페이지- method: 데이터 전송 설정→ GET / POST GET : 데이터가 주소에 표시되면서 전송됩니다.→ POST : 데이터가 헤더에 숨어 전송되기 때문에 보안성이 높습니다. 표시 방법 1234567891011121314 input태그 Colored by Color Scriptercsform 속성인 action(데이터가 전송되는 페이지)과 method(데이터 숨김)를 사용했습니다. #2 form 요소 태그① 태그 : form의 설명글① 태그: 입력.. 2020. 11. 26.
HTML5 - 테이블 태그 표를 만들 때 사용하는 테이블(표) 태그에 대해 알아보겠습니다. #1 태그의 기본 요소들- : 표 제목- 태그 : 행- 태그 : 열 표시방법1234567891011121314151617181920212223242526272829303132 제목 표의 제목 cell-1-1 cell-1-2 cell-1-3 cell-1-4 cell-2-1 cell-2-2 cell-2-3 cell-2-4 cell-3-1 cell-3-2 cell-3-3 cell-3-4 cell-4-1 cell-4-2 cell-4-3 cell-4-4 cs태그 안에 태그가 들어가야 합니다. 실제 웹페이지 CSS로 표를 꾸며보겠습니다.- border-collapse : 단일선, 중복선 설정예) 123table, tr,td{ border-collaps.. 2020. 11. 26.
HTML5 - 리스트(목록) 태그 목록들을 나열하고 싶을 때 쓰는 리스트 태그에 대해 알아보겠습니다. 리스트 태그에는 3가지 종류가 있습니다. ① ol 태그 순서가 있는 목록(리스트) ② ul 태그 순서가 없는 목록(리스트) ③ dl 태그 설명 리스트 위의 리스트 태그는 아래와 같은 목록 요소(자식 요소)를 가집니다.태그, 태그 ① li 태그 목록 요소 태그 ① dt 태그 용어 ② dd 태그 용어에 대한 설명문(들여쓰기) 합쳐서 정리하면 아래와 같습니다. ① ol 태그 + li 태그순서가 있는 목록(리스트) ② ul 태그 + li 태그순서가 없는 목록(리스트) ③ dl 태그 + dt 태그 + dd 태그설명 리스트 #1 태그와 태그표에서 봤다시피 태그는 순서가 있는 리스트 태그입니다. 태그 안에는 무조건 목록 요소인 태그가 들어갑니다. 표.. 2020. 11. 26.
HTML&CSS-위치 변경하기 HTML5, CSS3을 이용해 요소들의 위치를 지정(변경)해보겠습니다. 앞전 태그에 대한 글에 위치 지정하는 부분이 나오긴 했지만 제대로 설명하지 않고 넘어갔는데 이번에 제대로 알아보겠습니다. 위치를 지정하기 위해서는 먼저 CSS의 position 값을 줘야 합니다. 그 전에 position 속성의 종류(키워드)에 대해 설명하겠습니다. ① relative 상대값 / 위치 설정 가능하고 자리를 차지함 ② absolute 절대값 / 절대 위치 설정 가능 ③ fixed 고정값 / 화면 기준으로 위치 설정 가능 ④ sticky 스크롤을 내리면 위치 설정 ⑤ static 기본값 / top, left, bottom, right 지정 안됨 ⑥ inherit - ⑦ initial - ⑧ revert - ⑨ unset .. 2020. 11. 25.
오뚜기 맛있는 오뚜기밥, 200g, 24개
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.