본문 바로가기
728x90

Web 개발/HTML.CSS27

HTML/CSS - select / option/datalist 안녕하세요, 이번에는 select와 option에 대해 정리해보겠습니다. select는 option을 선택하는 메뉴 역할을 하는 태그입니다. 나중에 홈페이지를 만들때 사용을 많이 할 것 같아 정리해보겠습니다. ◆select 속성 autocomplete : 사용자가 이전에 입력한 값으로 자동완성 (on/off) disabled : 선택 메뉴 비활성화 (Boolean) form : form의 id 속성값 입력 multiple : 다중 선택 여부 name : 선택 메뉴의 이름 size : 한 번에 볼 수 있는 행의 개수 Apple Mango Melon Orange Apple Mango Melon Orange Apple Mango Melon Orange Apple Mango Melon Orange 위와 같이 입.. 2021. 5. 30.
HTML/CSS - button 안녕하세요, 이번에는 button에 대해 정리해보겠습니다. ◆button 속성 autofocus : 페이지가 로드될 때 자동으로 포커스 (Boolean) disabled : 버튼을 비활성화 (Boolean) form : 의 id 속성 값 name : form 데이터와 함께 전송되는 버튼의 이름 type : 버튼의 타입 (button(일반 버튼 / 기본값), reset(초기화), submit(서버로 제출)) 이전에 input 태그를 이용하여 버튼을 만들었었는데요, button태그로도 동일한 기능의 button을 만들 수 있습니다! 초기화 제출 위와 같이 코드를 짜고 실행을 하면 아래처럼 동일한 버튼이 형성됩니다! reset, submit 말고 일반 button은 눌러도 아무런 효과가 없습니다. 이런 버튼은.. 2021. 5. 29.
HTML/CSS - input 안녕하세요, 지난번에 form에 관해 정리하면서 input 태그를 이용하여 로그인 형태를 확인해보았습니다. 오늘은 input에 대해 정리해보겠습니다. input은 많은 속성들을 가지고 있는데 하나씩 정리해보겠습니다. type : 입력받을 데이터의 종류를 나타냄 (기본값 : text) -. button / color / checkbox / email / password / image / number(숫자만 입력받기) / reset 등등 이전에 로그인 버튼을 을 사용하여 만들었는데요, input 태그를 이용해서도 로그인 버튼을 만들 수 있습니다! type을 button으로 하고 value를 "로그인"으로 하면 동일한 버튼이 생성 됩니다. 위의 button은 실제로 버튼 모양으로 누르는 것은 가능하지만 눌렀을.. 2021. 5. 28.
HTML/CSS - form 안녕하세요, HTML의 을 정리해보려 합니다. 슬슬 HTML의 끝에 다 와가는 것 같아 기분이 좋으면서도 두렵습니다. 올해 안에 꼭 프런트엔드 기초 및 지식을 습득하여 프로젝트를 만들 수 있기를! 나중에 보았을 때 이해를 더 빨리 직관적으로 하기 위해 코드를 작성한 상태에서 분해하면서 정리해보겠습니다. 은 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타냅니다. form 태그의 속성으로는 action, name, target, method, autocomplete 등이 있습니다. 여러 사이트에서 로그인 화면을 보면 아이디와 비밀번호를 입력받아 로그인 버튼을 클릭하여 로그인하는 구조로 되어있습니다. form을 이용하여 이러한 형태 틀을 만들 수 있는데요, 아래 예시를 보며 정리해보겠습니다. .. 2021. 5. 27.