본문 바로가기

분류 전체보기221

html 폼 만들기 4 - 이미지 버튼 만들기 html 폼 만들기 4 - 이미지 버튼 만들기 네 안녕하세요, 이번 포스팅에서는 이미지 버튼을 만들어보도록 하겠습니다. 저번 포스팅에서는 기본 버튼들을 만들어 그 기능을 살펴보았습니다. 하지만 우리가 보는 버튼 중에는 이미지로 된 버튼들도 존재하고, 디자인적으로도 더 예쁘고, 시선을 사로잡기에도 좋아서 사업적 아이템이 되기도 하여 다방면에서 더 좋습니다. 그래서 이러한 이미지 버튼을 이번에 직접 만들어보는 시간을 가져보도록 하겠습니다. 그리고 버튼 태그에 대해서 잘 모르시는 분들이 계시다면, 제가 버튼 태그에 대한 포스트를 기재해 둘 테니, 한 번 들어가셔서 보고 다시 오시길 추천드립니다. 아래는 버튼 태그 포스팅 링크입니다. 2023.03.04 - [html, css, 자바스크립트] - html 폼 만.. 2023. 3. 4.
html 폼 만들기 3 - button 태그로 기본 버튼 만들기 html 폼 만들기 3 - button 태그로 기본 버튼 만들기 네 안녕하세요, 이번 포스팅에서는 버튼을 만드는 방법에 대하여 알아보겠습니다... 우리가 무언가를 검색을 하거나, 혹은 아이디와 비밀번호를 입력을 한다던가, 아니면 페이지 이동 및 전환을 할 때 버튼을 누릅니다. 그 말은 즉슨, 웹은 버튼을 거의 항상 필요로 한다는 뜻이 됩니다. 그래서 이번 시간에는 그 부분을 한 번 다뤄보려 합니다. 그럼 지금 시작하도록 하겠습니다. 1. 버튼의 종류 버튼은 큰 틀에서 나누면 문자로 이루어져 있는 텍스트 버튼, 그리고 이미지가 씌워져 있는 이미지 버튼이 있습니다. 보통 통상적으로는 이미지 버튼을 가장 많이 쓰는데, 필요에 따라서 이미지 버튼을 쓸 때도 있습니다. 그리고 버튼에 어떤 기능을 입히느냐에 따라서.. 2023. 3. 4.
html 폼 만들기 2 - datalist, option 태그로 데이터 목록을 가지고 있는 창 만들기 html datalist, option 태그로 데이터 목록을 가지고 있는 창 만들기 네 안녕하세요, 이번 포스팅에서는 데이터 목록을 가지고 있는 창을 만들어보려 합니다. 때에 따라서 데이터 목록을 보여주고 거기서 선택을 하게 유도를 해야 하는 경우가 있습니다. 그래서 이번 시간에는 그러한 폼의 일종인 datalist 폼을 이용한 웹 폼을 만들어보도록 하겠습니다. 1. 데이터 목록을 가지고 있는 텍스트 입력 창 : datalist, option 태그 사용 우리가 어떤 검색어를 입력을 하거나 어떤 것을 입력창에서 선택을 할 때 자동 완성 기능을 통해서 검색창 아래로 여러 가지 키워드들이 쭈르륵 ~ 하고 나오는 걸 보신 적이 있으실 겁니다. 그게 바로 datalist 태그를 이용하여 만든 건데, 과거에는 이 .. 2023. 3. 3.
html 폼 만들기 1 - input, textarea 태그로 기본 텍스트 입력창 만들기 html 폼 만들기 1 - input, textarea 태그로 기본 텍스트 입력창 만들기 네 안녕하세요, 이번 포스팅에서는 간단한 html 폼을 만드는 것에 대해서 한 번 다뤄볼까 합니다. 폼을 구성하는 태그는 여러 가지 종류가 있는데, 그중에서 가장 기본이 되는 텍스트를 입력하는 태그를 만드는 방법에 대하여 좀 더 자세히 알아보도록 하겠습니다. 그럼 지금부터 같이 알아보실까요? 1. 폼의 요소와 종류 앞서 말했듯이, 폼의 종류는 여러 개가 있는데, 그중에서 가장 연계가 많이 되는 태그는 2023. 3. 3.