본문 바로가기

전체 글221

html type 속성과 placeholder 속성을 이용하여 정보의 힌트 및 양식 보여주기와 형식을 가진 텍스트 입력하기 html type 속성과 placeholder 속성을 이용하여 정보의 힌트 및 양식 보여주기와 형식을 가진 텍스트 입력하기 네 안녕하세요, 이번 포스팅에서는 html을 이용해서 폼 요소에 입력하는 정보의 양식을 제공 받게 하고, 형식을 가진 텍스트를 입력하는 것을 한 번 해보겠습니다. 우리가 보통 폼을 이용해서 만드는 것들은 로그인 화면 같이 무언가를 입력을 하는 창입니다. 그런데 그러한 정보 입력 칸들이 중구난방하면 시인성이 떨어지기 때문에 사용자들이 불편함을 느낄 수가 있습니다. 그래서 그러한 경우가 발생하지 않도록 폼 요소들을 묶어주는 겁니다. 그래서 이번 시간에는 어떤 식으로 폼 요소들에 대한 양식을 제공하며, 그리고 폼 요소에 부가적으로 추가하면 좋은 기능들이 어떤 것들이 있는지 한 번 알아보도.. 2023. 3. 10.
html number, range 속성을 이용하여 스핀 버튼과 슬라이드 바 사용하기 html number, range 속성을 이용하여 스핀 버튼과 슬라이드 바 사용하기 네 안녕하세요, 이번 포스팅에서는 스핀 버튼과 슬라이드 바를 사용하는 방법에 대해서 알아보도록 하겠습니다. 스핀 버튼과 슬라이드 바는 웹을 꾸미기에 아주 적합한 요소인데, 정말 어지간한 사이트들에는 다 들어가 있는 기능이 스핀 버튼과 슬라이드 바입니다. 그만큼 썼을 때 이목을 집중시키기가 쉽고, 매우 직관적으로 요소나 수치 등을 표현할 수 있어서 정말 많이 씁니다. 그럼 지금부터 이들을 어떻게 사용을 할 수 있는지 알아보도록 하겠습니다. 1. 스핀 버튼과 슬라이드 바로 편리한 숫자 입력하기 : number, range 속성 이용 이번에는 스핀 버튼과 슬라이드 바로 좀 더 시각적인 요소들을 넣어보겠습니다. html에서는 정.. 2023. 3. 7.
html month, week, date, time, datetime-local 속성 이용하여 시간 표현하기 html month, week, date, time, datetime-local 속성 이용하여 시간 표현하기 네 안녕하세요, 이번 포스팅에서는 html로 시간 정보를 입력하는 방법에 대하여 알아보도록 하겠습니다. html에서는 시간에 대한 정보도 제공을 해주는데요, 이 시간 정보를 활용을 할 데가 정말 많기 때문에 html 요소들 중에 가장 중요한 요소들 중 하나라고 생각을 합니다. 우리가 지도나 gps 등을 이용을 할 때도 위치 정보 외에 시간에 관한 정보도 받아 실시간으로 계속 전송을 하는 것이기 때문에, 시간 정보의 가치는 꽤나 중요하다는 것을 알 수가 있습니다. 그래서 이러한 시간 정보들을 html에서는 어떻게 제공을 해주는지 한 번 보도록 하겠습니다. 1. 시간 정보 입력하기 : input ty.. 2023. 3. 7.
html color 속성 이용하여 색 입력하기 html color 속성 이용하여 색 입력하기 네 안녕하세요, 이번 포스팅에서는 html을 이용하여 색을 입력하는 방법을 알아보도록 하겠습니다. 사실 색깔은 보통 css를 이용하여 뽑아내곤 하지만, html로도 뽑을 수 있습니다. 그래서 이번 포스팅에서는 html에서는 어떻게 색을 뽑아내는지 한 번 알아보도록 하겠습니다. 그럼 지금부터 시작하도록 하겠습니다. 1. html에서의 색 표현 html과 css에서의 색은 빛의 3원 색인 RGB, 다시 말해 빨강, 초록, 파랑을 적절한 비율로 섞어서 표현을 합니다. 그래서 각각의 색깔은 코드가 존재를 하는데, 코드는 #으로 시작하는 영어와 숫자가 섞인 6자리의 코드로 입력이 되며, 다른 말로 '16진수 코드'라고 불립니다. 물론, 직접 색깔의 이름을 쓸 수도 있.. 2023. 3. 7.
html label 태그로 폼 요소의 캡션 만들기 html label 태그로 폼 요소의 캡션 만들기 네 안녕하세요, 이번 포스팅에서는 html에서 쓰이는 label 태그를 이용하여 폼 요소의 캡션을 만들어보려고 합니다. html에서 캡션이란 어떤 표나 그림 등에 대한 설명문입니다. 우리가 프런트엔드나 백엔드 코딩을 할 때 무언가를 설명하기 위해서 주석문을 넣곤 합니다. 그러한 것 처럼 어떤 그림이나 표 등의 시각적인 자료를 넣었을 때 이것이 어떤 것인지를 사용자들에게 알리기 위해서 부가적인 설명문을 붙입니다. 그리고 폼에서는 이러한 캡션과 기타 폼 요소를 한 단위로 묶어서 표현을 하여 문서의 가독성을 높입니다. 그럼 지금부터 같이 한 번 알아보실까요? 1. 캡션 지정 및 캡션과 폼 요소 연결하기 : label 태그와 for 속성 이용 우리가 label .. 2023. 3. 6.
html 폼 만들기 7 - select, option 태그로 콤보박스 만들기 html 폼 만들기 7 - select, option 태그로 콤보박스 만들기 네 안녕하세요, 이번 포스팅에서는 콤보박스를 만들어보도록 하겠습니다. 콤보박스도 정말 많이 쓰이는 선택형 입력 폼의 일종입니다. 앞서 포스팅을 한 체크박스와 라디오 버튼 만큼이나 많이 쓰입니다. 그래서 되게 중요한 요소입니다. 그럼 지금부터 시작하도록 하겠습니다. 1. 콤보 박스 만들기 : select, option 태그 이용 콤보 박스는 우리가 흔히 말하는 드롭다운 단추입니다. 하나의 단추 안에 여러 개의 선택지가 있다고 하여 콤보 박스라 부르고, 그 콤보 박스를 누르면 선택지가 마치 떨어지듯 쭉 ~ 내려와서 선택지가 보인다고 하여 드롭박스라고도 부릅니다. 그리고 콤보 박스는 select라는 속성으로 테두리를 만들고, opti.. 2023. 3. 4.
html 폼 만들기 6 - 라디오 버튼 만들기 html 폼 만들기 6 - 라디오 버튼 만들기 네 안녕하세요, 이번 포스팅에서는 라디오 버튼에 대해 알아보도록 하겠습니다. 라디오 버튼 역시 선택형 입력 폼의 일종입니다. 그리고 체크박스만큼이나 자주 쓰입니다. 그래서 그만큼 중요한 선택형 입력 폼 양식입니다. 그럼 지금부터 시작하도록 하겠습니다. 1. 라디오 버튼 만들기 : input type = "radio" 라디오 버튼은 radio 속성을 이용해서 만듭니다. 또한, 라디오 버튼은 name 속성의 값이 같은 라디오 버튼끼리 하나의 그룹을 형성하고 묶입니다. 그리고 라디오 버튼 역시 체크박스처럼 checked 속성이 존재하는 칸이 있다면 웹 페이지를 여는 순간부터 체크표시가 되어서 출력이 됩니다. 그럼 간단한 예제를 통하여 같이 알아보실까요? 먹고 싶은.. 2023. 3. 4.
html 폼 만들기 5 - 체크박스 만들기 html 폼 만들기 5 - 체크박스 만들기 네 안녕하세요, 이번 포스팅에서는 체크박스를 만드는 방법에 대하여 알아보겠습니다. 체크박스는 선택형 입력 기능 중 한 기능이며, 선택형 입력이란 우리가 흔히 설문조사나 시험을 볼 때 4지선다나 5지선다형 문제를 푸는 것처럼 무언가를 선택을 할 수 있도록 하는 폼을 만드는 것입니다. 그래서 이걸 이용하게 되면 나중에 우리가 웹 사이트를 만들거나 어플 등을 만들고 후에 만족도 조사 같은 걸 할 때 이런 식으로 선택형 입력 폼을 만들어서 선호도 등을 조사하고 관리를 하는 데 도움을 줄 수 있기 때문에 매우 유용한 기능입니다. 그리고 무언가를 변환시키거나 합성시키는 등의 유머사이트 등에서도 이러한 선택형 폼을 써서 소비자들의 취향대로 결과물을 얻을 수 있도록 하기도 합.. 2023. 3. 4.

티스토리툴바