본문 바로가기

전체 글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.
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.
html 시멘틱 블록 태그 figure, details, summary 태그에 대하여 알아보기 html 시멘틱 블록 태그 figure, details, summary 태그에 대하여 알아보기 네 여러분, 이번 포스팅에서는 시멘틱 웹을 만들 때 쓰는 추가적인 태그들에 대하여 알아보는 시간을 가져보려 합니다. 우선 그 기본이 되는 태그들 중에는 '시멘틱 블록 태그'와 '시멘틱 인라인 태그'라는 것이 있는데, 이 둘의 존재 만으로도 가독성이 매우 뛰어나지며 페이지가 간결하면서도 예뻐 보이게 됩니다. 그럼 이 두 카테고리의 태그가 어떤 기능을 하는 지 같이 알아보실까요? 1. 시멘틱 블록 태그 시멘틱 블록 태그는 본문을 한나의 덩어리로 묶어서 블록화를 시키는 것이라고 생각하면 됩니다. 마치 태그처럼 해당 태그 내에 있는 문서를 하나의 덩어리로 묶어서 표현을 하는 겁니다. 시멘틱 블록 태그는 보통 3개의 태.. 2023. 3. 2.
html header, nav, section, article, aside, footer 태그로 시멘틱 웹 구성해보기 html header, nav, section, article, aside, footer 태그로 시멘틱 웹 구성해 보기 네 여러분, 이번 포스팅에서는 html 문서를 구조화하는 방법에 대하여 알아보도록 하겠습니다. 우리가 전에 배운 html 문서를 만드는 방법은 매우 기본적임과 동시에 다소 중구난방 한 부분이 없지 않아 있었는데, 그러한 문서를 특정한 태그로 구조화를 시키면 화면상에서 좀 더 정리가 되어 보이고 깔끔해 보여서 가독성이 높아집니다. 그러한 방법으로 만들어낸 웹문서를 우리는 '시멘틱 웹'이라고 부르며, 그리고 이 시멘틱 웹을 만들 때 사용하는 태그를 '시멘틱 태그'리고 합니다. 그럼 지금부터 같이 한 번 보도록 하겠습니다. 1. html 시멘틱 태그 : header, nav, section,.. 2023. 3. 2.

티스토리툴바