본문 바로가기

HTML36

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.
html form 태그로 웹 폼 기본 구성 해보기 html form 태그로 웹 폼 기본 구성 해보기 네 안녕하세요, 이번 포스팅에서는 html 웹 폼에 대한 글을 한 번 적어볼까 합니다. 웹 폼이란 우리가 웹 페이지를 이용하는 사용자에게 정보를 입력을 받을 때 사용하는 것을 말합니다. 이를테면 우리가 로그인을 하거나, 그 외에 검색이라던지, 그 외 어떤 정보를 입력하여 찾아내거나 등록을 할 때 많이 씁니다. 우리가 흔히 보는 검색 창이나 로그인 화면에 보이는 문자 입력 칸이 바로 그러한 웹 폼을 만드는 태그로 만들어집니다. 이 폼을 만들기 위해서 정말 다양한 태그들이 이용이 됩니다. 그러한 태그들에 대해서는 추후에 올라올 포스팅에서 다루기로 하고, 이번에는 간단하게 웹 폼에 대해서 맛을 좀 보는 시간을 가져보겠습니다. 1. 웹 폼을 만드는 태그 : fo.. 2023. 3. 3.
html 시멘틱 인라인 태그 mark, time, meter, progress 태그에 대하여 알아보기 html 시멘틱 인라인 태그 mark, time, meter, progress 태그에 대하여 알아보기 네 안녕하세요, 이번 포스팅에서는 시멘틱 인라인 태그에 대해서 알아보도록 하겠습니다. 인라인 태그는 시멘틱 태그로 커다란 뼈대를 만들고, 시멘틱 블록 태그로 그 뼈대 안에 들어갈 요소들을 넣어놨다면, 이 시멘틱 인라인 태그로 더 디테일한 부분들에 대한 작업을 합니다. 그래서 이번 시간에는 이 시멘틱 인라인 태그를 사용하는 방법에 대하여 알아보도록 하겠습니다. 그럼 지금부터 시작하겠습니다. 1. 시멘틱 인라인 태그 : mark , time, meter, progress 태그 시멘틱 인라인 태그는 html에서 텍스트의 일부를 마크업을 시키는 태그들입니다. 이 태그들로도 웹 문서 내에서 디테일한 표현이 가능하.. 2023. 3. 3.

티스토리툴바