CATEGORIES
홈페이지를 구축시 입력폼에 자주 사용되는 라디오 버튼에 대하여 알아보고 만드는 방법을 함께 알아봅니다. 먼저 라디오 버튼은 어떻게 생겼을까요? 아래에서 자세히 알아보세요.# 웹사이트 구축시 입력폼 라디오 버튼이란, Radio button라디오 버튼은 동그란원 모양이마 선택 가능한 인터페이스를 가지고 있습니다. 방문자에게 입력값을 받기 위해서 웹사이트에 많이 사용됩니다. 쉽게는 연락하기 페이지나 관리자 페이지 등에서 쉽게 볼 수 있습니다. 어떻게 생겼는지는 아래의 이미지를 참고하세요. 이처럼 선택하는 버튼을 보신적 있으실겁니다.스크린샷) 사과와 바나나를 선택 가능하도록 라디오 버튼 사용바로 위의 이미지 처럼 몇 가지 값들 중 하나를 선택할 경우에 자주 사용되는 입력 양식 중 하나가 바로 라디오 버튼입니다. 라
Last Modified : 2018-01-26 08:02:48
아래는 효과적인 라디오 버튼을 생성하기 위한 방법과 이미지, CSS, 자바스크립트의 모든 방법에 대하여 정리한 내용입니다. 주요 내용은 아래와 같습니다.1. 라디오 버튼 생성을 위한 html 코드2. 라디오 버튼 css 스타일 코드3. 라디오 버튼 구현을 위한 자바스크립트 인터렉션아래 소스의 특징으로는 라디오 버튼 스타일의 커스터마이징 부분입니다. 브라우저 디폴트 디자인을 사용하지 않고 label 태그를 사용하였으며 라디오 버튼의 아이콘을 다르게 변경하였습니다. 라디오 버튼(Radio Button) 이미지의 소스 코드는 아래 링크를 참고해주세요.참고로 아래 코드를 구현시 생성되는 모습은 아래 스크린샷과 유사하게 나타날 것입니다.스크린샷) 구현될 라디오 버튼 이미지* 아이콘 이미지 다운받기http://webi
Last Modified : 2016-01-19 18:40:48
React 앱에서 인기있는 antd 라이브러리에서 checkbox와 radio 컴포넌트 사용 방법에 대하여 알아봅니다.# react antd 컴포넌트 checkbox, radioreact에서는 매우 자주 사용되는 antd 라이브러리에서 checkbox와 radio 컴포넌트는 입력폼을 작성할 때 자주 사용됩니다. 먼저 간단한 사용 방법은 아래와 같습니다. 아래 예제는 Radio와 Checkbox를 각각 적용하였습니다.! 체크 상태 on / off 적용하기먼저 체크 상태를 표시하기 위해서 checked 프로퍼티를 아래와 같이 설정합니다.<Checkbox checked={false} />그리고 onChange를 사용하여 값이 변경된 경우 해당하는 함수를 호출하여 새로운 값으로 업데이트를 합니다.import { R
Last Modified : 2020-12-30 09:12:38
웹페이지를 만들때 만약 16:9 등 원하는 화면 비율을 적용하려면 어떻게 할까요? CSS를 사용하여 비율로 화면을 적용하는 방법에 대하여 알아봅니다.! 화면 16:9 비율이 언제 필요할까요사실 16:9 비율이 필요한 경우는 크지 않습니다. 다만 웹사이트에서 자주 사용되는 경우는 아래와 같습니다.동영상 및 사진 등 미디어 콘텐츠를 보여줄 경우모바일 웹페이지인 경우 16:9 등의 비율로 고정할 경우특히 미디어 콘텐츠 재생시 팝업창을 비율에 맞춰서 보여주는 경우가 가장 많습니다. 그럼 아래는 어떻게 구현하는지 알아봅니다.# CSS를 사용하여 16 : 9 비율 적용하기참고로 아래 예제는 16:9 이지만 비율값을 조정하면 언제든 원하는 비율로 만들 수 있습니다. 먼저 비율로 맞추기 위해서 두 가지 css 단위를 사용
Last Modified : 2020-03-11 10:19:33