Portfolio

5. UI 5.1 내비게이션 5.1.1 내비게이션의 요소 5.2 Informational components 5.2.1 툴팁(Tooltip)5.2.2 모달 (Modal)5.2.3 메시지 박스 (message box)5.3 사용자 입력 영역 input 5.3.1 input의 type 종류 5.3.2 input의 공통 속성

5. UI

UI는 "User Interface"의 줄임말로 사용자와 디지털 장치나 프로그램 간의 상호작용을 가능하게 하는 시각적, 청각적, 감각적 요소의 집합입니다. 일상에서 스마트폰, 컴퓨터, ATM, 자동차 내비게이션 등 다양한 디지털 제품에서 접할 수 있는 UI는 우리가 디지털 환경에서 원하는 작업을 수행하는 데 필수적입니다.

좋은 UI는 사용자의 목적과 니즈를 중심으로 설계되며, 복잡한 기술적 내용을 간결하고 직관적으로 사용자에게 전달합니다. 그 결과, 사용자는 쉽게 원하는 정보를 찾거나 원하는 작업을 완료할 수 있게 됩니다.

UI의 디자인은 색상, 형태, 레이아웃, 아이콘, 버튼, 폰트 등 다양한 요소가 조화롭게 결합되어야 합니다. 이러한 요소들은 사용자의 주의를 끌고, 사용자가 원하는 방향으로 안내하며, 즐거운 사용 경험을 제공해야 합니다.

오늘날의 디지털 환경은 빠르게 변화하고 있기 때문에 UI 디자인 또한 지속적으로 발전하고 있습니다. 사용자의 행동, 기대, 기술의 발전 등을 고려하여 UI는 계속해서 새로운 모습을 보여주고 있습니다. 결국, UI는 디지털 세계와의 대화를 원활하게 만들어 주는 중심적인 역할을 하게 됩니다.

5.1 내비게이션

웹사이트나 앱에서 사용자는 다양한 정보나 기능에 접근하기를 원합니다. 그렇다면 어떻게 사용자에게 원하는 정보나 기능으로 쉽게 이동할 수 있도록 안내해 줄 수 있을까요? 바로 내비게이션 UI를 통해 가능합니다.

내비게이션 UI는 사용자 인터페이스의 핵심 요소 중 하나로, 사용자가 원하는 목적지까지의 경로를 명확하게 제시합니다. 전통적인 메뉴바부터 현대의 햄버거 메뉴, 탭 바, 사이드바와 같은 다양한 형태로 나타납니다. 사용자는 이러한 내비게이션 요소를 통해 원하는 페이지나 섹션으로 쉽게 이동할 수 있게 되며, 웹사이트나 앱의 전체 구조와 정보의 흐름을 한눈에 파악할 수 있습니다.

좋은 내비게이션 UI는 사용자의 직관과 일치하며, 복잡한 정보도 단순하고 명확하게 전달합니다. 따라서 사용자 경험(UX)을 향상하는 데 중요한 역할을 합니다. 오늘날의 디지털 환경에서 내비게이션 UI는 사용자와의 소통의 핵심 도구로, 디자이너와 개발자에게 끊임없는 연구와 발전의 주제가 되고 있습니다.

5.1.1 내비게이션의 요소

내비게이션 요소는 사용자가 웹 사이트, 모바일 앱 또는 다른 디지털 인터페이스에서 콘텐츠를 찾고 탐색하는 데 도움을 주는 요소와 구성 요소를 말합니다. 알맞게 구성된 내비게이션 UI는 사용자와 시스템 간의 상호작용을 용이하게 도와주며, 사용자의 경험을 향상시키고 시스템의 사용을 효율적으로 도와줍니다.

내비게이션에는 디자인과 구조에 따라 다양한 요소를 포함할 수 있지만, 대부분의 내비게이션에는 다음과 같은 기본 요소들이 포함됩니다.

GNB

전역 내비게이션 바라고도 합니다. 웹사이트나 애플리케이션의 상단에 위치하는 경우가 많습니다. 일반적으로 사이트 전체를 대표하는 주요 카테고리나 기능들에 대한 링크를 포함합니다. GNB는 대부분의 페이지에서 일정하게 보이며, 사용자가 핵심적인 페이지나 기능으로 빠르게 이동할 수 있도록 도와줍니다.

LNB

지역 내비게이션 바라고도 합니다. 주로 웹사이트나 애플리케이션의 왼쪽 사이드바 형태로 나타나며, 때로는 오른쪽에 위치하기도 합니다. LNB는 현재 사용자가 위치한 페이지나 섹션과 관련된 하위 카테고리나 기능에 대한 링크를 포함합니다. 예를 들어, “상품”이라는 주요 카테고리 내에 “전자제품”, “의류”, “도서”와 같은 하위 카테고리 링크가 LNB에 포함될 수 있습니다.

💡

GNB와 LNB는 웹사이트나 애플리케이션의 구조에서 자주 볼 수 있는 내비게이션 요소들입니다. GNB와 LNB 모두 사용자가 웹사이트나 애플리케이션 내에서 원하는 정보나 기능을 쉽게 찾을 수 있도록 도와주는 역할을 합니다.

메뉴바(Menu Bar)

메뉴바(Menu Bar)는 컴퓨터 소프트웨어 사용자 인터페이스의 일부로, 프로그램의 기능과 옵션을 표시하고 접근할 수 있게 해주는 수평적인 메뉴들의 집합입니다. 주로 웹 사이트나 앱의 상단 또는 측면에 위치하며, 다른 페이지 또는 섹션으로 이동할 수 있는 링크를 제공합니다.

로고 및 제목 : 대부분의 내비게이션에는 웹사이트나 회사, 브랜드의 로고나 제목이 포함되어 있습니다. 일반적으로 내비게이션 바의 왼쪽 상단에 위치하며, 클릭하면 홈페이지로 돌아가는 링크로 설정되는 경우가 많습니다.

메뉴 항목 : 주요 페이지나 카테고리의 링크를 나열한 것입니다. 예를 들어, "홈", “서비스”, “제품”, “블로그”, “연락처”와 같은 항목이 될 수 있습니다.

검색 기능 : 일부 내비게이션에는 검색 아이콘 또는 검색 필드가 포함되어 있습니다. 사용자는 여기에서 원하는 내용을 검색할 수 있으며, 검색 결과 페이지로 이동하거나 해당 내용을 찾을 수 있습니다.

아이콘: 소셜 미디어 링크, 장바구니, 사용자 프로필, 알림 등의 기능을 나타내는 그래픽 심볼입니다.

언어 또는 지역 선택 : 글로벌 웹사이트의 경우, 언어 또는 지역 선택 메뉴를 제공하여 사용자가 선호하는 언어 또는 지역을 선택할 수 있게 합니다.

위와 같은 내비게이션 요소의 대부분 스타일링과 동작은 CSS로 적용될 수 있습니다. 그러나 복잡한 상호작용이나 동적 기능은 자바스크립트(Javascript)를 사용하여 구현해야 합니다.

내비게이션 UI를 설명하기 위해 가장 대표적인 로고와 메뉴 항목이 들어간 메뉴바의 기본적인 HTML과 CSS코드를 작성해 보겠습니다.


<body>
    <nav class="menu-bar">
        <div class="logo">
            <a href="#">
                <img src="로고.png" alt="Logo" />
                제목이 들어갈 곳입니다.
            </a>
        </div>
        <ul>
            <li><a href="#">홈</a></li>
            <li><a href="#">서비스</a></li>
            <li><a href="#">제품</a></li>
            <li><a href="#">블로그</a></li>
            <li><a href="#">연락처</a></li>
        </ul>
    </nav>
</body>

위 메뉴바의 기본 구조는 아래에도 계속 사용될 예정입니다. 이제 이 메뉴에 스타일을 입혀보겠습니다.


.menu-bar {
    background-color: #dad7cd;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.menu-bar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.menu-bar li {
    margin-left: 15px;
}

.menu-bar a {
    color: white;
    text-decoration: none;
    padding: 10px 15px;
}

.menu-bar a:hover {
    background-color: #ddd;
    color: black;
    border-radius: 5px;
}

스타일이 구현된 최종 화면입니다.

사이드 메뉴(Side Menu)

사이드 메뉴바(Side menu)는 웹사이트, 애플리케이션 또는 기타 사용자 인터페이스에서 사용되는 UI 요소로, 화면의 한쪽 테두리에 위치하여 주요 내비게이션, 부가 기능, 설정 및 기타 항목들을 제공하는 수직적인 메뉴를 말합니다. 일반적으로 왼쪽이나 오른쪽에 위치하며, 사용자가 쉽게 액세스하고 메뉴 항목들을 탐색할 수 있도록 돕습니다.

사이드 메뉴바는 사용자 경험을 개선하고 효율적인 내비게이션을 제공하는 데 도움을 줍니다. 주요 기능 및 카테고리는 일반적으로 아이콘, 텍스트 또는 두 가지를 혼합하여 표시됩니다. 사용자는 메뉴를 클릭하거나 터치하여 해당 항목에 빠르게 액세스할 수 있습니다.


/* 기본 스타일 */

.menu-bar {
  position: fixed;   /* 사이드바를 화면에 고정 */
  top: 0;
  left: 0;
  width: 250px;      /* 사이드바 너비 설정 */
  height: 100%;      /* 화면 높이와 동일하게 설정 */
  background-color: #333;
  overflow-y: auto;  /* 내용이 사이드바를 초과하면 스크롤 표시 */
}

.logo img {
  width: 100%;       /* 로고 이미지 너비 설정 */
}

ul {
  list-style-type: none;  /* 목록 항목 앞에 있는 마커 제거 */
  padding: 0;
}

li {
  text-align: center;
  margin: 10px 0;
}

li a {
  text-decoration: none;  /* 링크 밑줄 제거 */
  color: #fff;             /* 텍스트 색상 설정 */
  padding: 10px 20px;      /* 패딩 추가 */
  display: block;          /* 전체 항목 영역이 클릭할 수 있도록 설정 */
  transition: background-color 0.3s;  /* 배경색 전환 효과 추가 */
}

li a:hover {
  background-color: #555;  /* 마우스 오버 시 배경색 변경 */
}

이처럼 사이드 메뉴바는 웹사이트나 애플리케이션의 디자인과 사용성을 개선하며, 작은 화면에서도 효과적으로 사용될 수 있어 모바일 장치에도 적합합니다.


/* 기본 스타일 */
body {
font-family: 'Arial', sans-serif;
}

.menu-bar {
position: fixed;   /* 사이드바를 화면에 고정 */
top: 0;
left: 0;
width: 250px;      /* 사이드바 너비 설정 */
height: 100%;      /* 화면 높이와 동일하게 설정 */
background-color: #333;
overflow-y: auto;  /* 내용이 사이드바를 초과하면 스크롤 표시 */
}

.logo img {
width: 100%;       /* 로고 이미지 너비 설정 */
padding: 20px;     /* 로고 주위에 패딩 추가 */
}

ul {
list-style-type: none;  /* 목록 항목 앞에 있는 마커 제거 */
padding: 0;
}

li {
text-align: center;
margin: 10px 0;
}

li a {
text-decoration: none;  /* 링크 밑줄 제거 */
color: #fff;             /* 텍스트 색상 설정 */
padding: 10px 20px;      /* 패딩 추가 */
display: block;          /* 전체 항목 영역이 클릭할 수 있도록 설정 */
transition: background-color 0.3s;  /* 배경색 전환 효과 추가 */
}

li a:hover {
background-color: #555;  /* 마우스 오버 시 배경색 변경 */
}

드롭다운 메뉴(Dropdown Menu)

드롭다운 메뉴(Dropdown menu)는 사용자 인터페이스(UI)에서 주로 사용되는 팝업 스타일의 메뉴로, 사용자가 특정 버튼, 링크 또는 아이콘을 클릭하면 펼쳐지며 여러 선택 사항을 보여줍니다. 사용자는 그중에서 원하는 항목을 선택할 수 있습니다.

구현을 위한 HTML 코드를 구현해 보도록 하겠습니다. 기존에 있던 menu-bar 중 li에 dropdown과 ul에 submenu가 추가로 작성되었습니다.


<body>
  <nav class="menu-bar">
    <div class="logo">
      <a href="#">
        <img src="img/logo.png" alt="Logo" />
      </a>
    </div>
    <ul>
      <li><a href="#">홈</a></li>
      <li class="dropdown">
        <a href="#">서비스</a>
        <ul class="submenu">
          <li><a href="#">서비스1</a></li>
          <li><a href="#">서비스2</a></li>
          <li><a href="#">서비스3</a></li>
        </ul>
      </li>
      <li><a href="#">제품</a></li>
      <li><a href="#">블로그</a></li>
      <li><a href="#">연락처</a></li>
    </ul>
  </nav>
</body>


/* 기본 스타일 */

.menu-bar {
  background-color: #333;
}

.logo img {
  height: 50px;
  padding: 10px;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

li {
  float: left;
}

li a {
  display: block;
  padding: 14px 20px;
  text-decoration: none;
  color: white;
  background-color: #333;
  transition: background-color 0.3s;
}

li a:hover {
  background-color: #555;
}

/* 드롭다운 메뉴 스타일 */
.dropdown {
  position: relative;
  display: inline-block;
}

.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.submenu li {
  float: none;
  border-bottom: 1px solid #666;
}

.submenu li:last-child {
  border-bottom: none;
}

.dropdown:hover .submenu {
  display: block;
}

드롭다운 메뉴는 내비게이션, 설정, 필터링, 정렬 등 다양한 목적으로 사용됩니다. 주요 내용 아래에 숨겨진 여러 하위 항목을 나타낼 때 사용되며, 일반적으로 메뉴 항목을 누르면 하위 메뉴나 선택할 수 있는 옵션들이 나타납니다. 사용자는 원하는 항목을 클릭하여 해당 기능을 수행하거나 페이지로 이동할 수 있습니다.

이러한 메뉴는 화면 공간을 절약하고 사용자 경험을 개선하는 데 도움을 주며, 복잡한 메뉴 구조를 간소화하여 사용자가 효율적으로 탐색할 수 있도록 합니다. 특히 모바일 기기나 작은 화면에서 유용하며, 터치 기반 인터페이스에서 자주 사용됩니다.

메뉴 아이콘

대부분의 웹사이트와 모바일 앱에서 볼 수 있는 그래픽 기호로, 주로 숨겨진 내비게이션 메뉴나 추가 옵션을 표시하거나 호출하는 데 사용됩니다. 이 아이콘은 사용자에게 추가적인 메뉴나 옵션에 대한 접근성을 제공하며, 특히 화면 공간이 제한적인 모바일 환경에서 매우 유용하게 작동합니다.

메뉴 아이콘 중 형태나 모양이 특정 음식을 연상시켜 그에 관련된 이름으로 불리게 된 아이콘들이 있습니다. 몇몇 대표적으로 사용되는 예시는 다음과 같습니다

햄버거 메뉴 아이콘 (Hamburger menu icon)

가장 널리 알려진 메뉴 아이콘으로, 세 개의 수평 라인으로 구성되어 있습니다. 이 아이콘을 클릭하면 주요 내비게이션 메뉴가 표시되는 경우가 많습니다. ‘햄버거’라는 이름은 아이콘의 모양이 햄버거를 연상시키기 때문에 붙여진 이름입니다. 주메뉴 항목을 표시하거나 숨기는 간단한 인터페이스에 주로 사용됩니다.

벤토 메뉴 아이콘 (Bento menu)

벤토 메뉴 아이콘의 디자인은 일반적으로 여러 개의 작은 사각형 또는 점들이 그리드 패턴으로 배열되어 있습니다. 이러한 아이콘은 사용자에게 여러 옵션 또는 기능을 한눈에 보여주기 위해 사용되며, ‘Bento’ (일본의 도시락)의 여러 구획에 음식이 나누어져 있는 형태를 연상시킵니다. 주로 사용자에게 다양한 기능이나 옵션을 한눈에 제공하기 위한 인터페이스에 사용됩니다.

케밥 메뉴 아이콘 (Kebab menu)

웹과 모바일 인터페이스에서 흔히 볼 수 있는 버티컬로 배치된 세 개의 점 또는 작은 수평선으로 구성된 아이콘을 말합니다. 이 아이콘의 이름은 그 모양이 수직으로 쌓인 케밥(고기나 야채 등을 꼬치에 꿴 음식)을 연상시키기 때문에 붙여진 것입니다. 케밥 메뉴 아이콘은 주로 웹사이트나 애플리케이션에서 추가 옵션, 설정, 더 많은 메뉴 항목을 표시하는 데 사용됩니다.

미트볼 메뉴 아이콘 (Meatball menu)

일반적으로 세 개의 수직으로 배열된 작은 점들로 표현되는 아이콘을 의미합니다. 이 아이콘은 주로 웹사이트나 애플리케이션에서 추가 옵션, 설정, 더 많은 메뉴 항목을 표시하는 데 사용됩니다. 미트볼 메뉴 아이콘을 클릭하거나 탭하면, 관련된 서브메뉴나 추가적인 옵션들이 드롭다운 형태로 나타날 수 있습니다.

탭(Tabs)

탭(Tabs)은 여러 작업이나 문서를 단일 창 안에서 별도의 패널로 분할하여 표시하는 UI 요소입니다. 각 탭은 일반적으로 관련된 작업이나 내용을 표시하며, 사용자는 필요에 따라 각 탭 간에 전환할 수 있습니다.

탭은 주로 웹 브라우저, 텍스트 편집기, 파일 탐색기, 응용 프로그램 등에서 사용됩니다. 각 탭은 각각의 내용을 표시하며, 사용자는 다양한 작업을 효율적으로 관리하고 전환할 수 있습니다.

예를 들어, 웹 브라우저에서 여러 웹 페이지를 탐색하는 경우, 각 웹 페이지는 별도의 탭에 표시됩니다. 이렇게 함으로써 여러 웹 페이지를 동시에 열어둘 수 있으며, 필요할 때 각 탭 간에 전환하여 내용을 확인하거나 작업을 수행할 수 있습니다.

탭은 작업 효율성을 높이고, 창을 최소화하거나 여러 창을 관리하는 번거로움을 줄여주어 사용자에게 편의성을 제공합니다.

링크(Link)

링크는 웹페이지에서 다른 웹 페이지, 파일, 이미지, 또는 위치로 연결하는 참조를 가리키는 요소를 말합니다. 이것은 웹에서 특히 중요한 개념이며, 인터넷에서 정보를 탐색하고 연결하는 데 사용됩니다.

링크는 보통 텍스트, 이미지, 기타 요소에 할당될 수 있으며, 클릭하면 해당 링크가 지정한 위치로 이동하거나 다른 작업을 수행할 수 있습니다.

예를 들어, 웹 페이지의 글자나 이미지를 클릭하면 해당 링크가 가리키는 웹 페이지로 이동하거나, 파일을 다운로드하거나, 다른 동작을 수행할 수 있습니다. 이처럼 링크는 웹 페이지 간의 내비게이션을 용이하게 하고, 정보를 공유하고 연결하여 웹 네트워크를 형성하는 데 중요한 역할을 합니다.


/* 기본 링크 스타일 */
a {
  color: black; /* 링크 텍스트 색상 */
  text-decoration: none; /* 밑줄 제거 */
}

/* 링크에 호버(마우스를 가져다 대었을 때) 스타일 적용 */
a:hover {
  color: blue; /* 호버 시 텍스트 색상 변경 */
  text-decoration: underline; /* 밑줄 추가 */
}

5.2 Informational components

5.2.1 툴팁(Tooltip)

컴퓨터 그래픽 사용자 인터페이스와 웹 디자인에서 사용되는 용어로, 사용자가 마우스 포인터나 특정 항목 위로 마우스를 올리면 임시로 표시되는 작은 텍스트 상자를 의미합니다. 이 텍스트 상자는 보통 추가 정보나 설명을 제공하기 위해 사용됩니다.



<div class ="tooltip">책
    <span class ="tooltip_text">
       자세한 내용은 클릭한 후 상세페이지에서 확인하세요.
    </span>
</div>


.tooltip{
        position: relative;
	  display: block;
      }

.tooltip .tooltip_text{
        visibility: hidden;
	  width: 120px;
        text-align: center;
        border-radius: 6px;
        padding: 0px;
        background-color: black;
        color: white;
        position: absolute;
        z-index: 1;
      }

.tooltip:hover .tooltip_text{
        visibility: visible;
      }

5.2.2 모달 (Modal)

모달은 사용자 인터페이스 디자인에서 주로 사용되는 용어로, 주로 사용자의 주의를 특정 정보나 선택 사항에 집중시키기 위해 사용하는 대화상자나 오버레이 창을 구현할 때 사용합니다. 즉, 같은 브라우저 내부에서 상위 레이어를 띄우는 방식입니다.

모달은 활성화되면, 배경의 기능이 일시적으로 비활성화되거나 흐려지게 되며, 이때 사용자는 Modal 창 외의 다른 활동을 할 수 없습니다. 그리고 모달(Modal)은 중요한 정보 제공, 경고, 추가적인 입력 요청 등의 경우에 사용됩니다.

웹사이트나 앱에서 로그인 창, 알림, 설정 등의 화면이 별도의 팝업 창이나 오버레이 형식으로 나타날 때 이를 Modal이라고 부릅니다.

5.2.3 메시지 박스 (message box)

메시지 박스라는 공식적인 기능이나 구성요소는 없습니다. 그러나 많은 웹개발자가 CSS를 사용하여 메시지 박스를 디자인하고 구현합니다. 이러한 메시지 박스는 일반적으로 사용자에게 알림, 오류, 경고, 정보 등을 전달하기 위해 사용됩니다.

5.3 사용자 입력 영역 input

UI 디자인에서 사용자에게 정보를 받아오기 위한 사용자 입력 영역은 주로 input을 활용합니다. input은 사용자에게 데이터를 입력받는 곳에 사용되는 HTML 태그입니다.

input에는 다양한 type이 있고 원하는 데이터의 type이 명확한 경우 적절한 type을 지정해 줌으로써 우리가 코드를 작성하고 다시 볼 때 type을 보고 어떤 input이었는지 알 수 있게 되어 가독성도 좋아집니다.

사용자에게는 브라우저의 아이디나 이메일 등을 저장하는 사용자 편의를 위한 기능이 있고, 모바일에서 데이터를 입력할 때 type에 따른 적절한 키패드 UI가 나오게 됩니다.

적절한 type을 사용하여 우리의 코드 가독성과 사용자의 편의성을 위해 input 태그를 자세하게 알아보겠습니다.

5.3.1 input의 type 종류

input type = “text” : text는 일반적인 텍스트를 입력할 수 있는 유형이 생성됩니다. 아래는 IOS에서 보이는 input type = “text”의 UI입니다.

예시) input type = “text” 요소가 브라우저에 렌더링 된 모습의 예시입니다.

예시) IOS에서 보이는 input type = “text”의 UI입니다

input type = “number” : number는 숫자만 입력할 수 있는 유형이 생성됩니다.

예시) input type = “number” 요소가 브라우저에 렌더링 된 모습의 예시입니다.

키보드의 위, 아래 화살표나 마우스로 클릭하여 값을 늘리거나 줄일 수 있는 스테퍼 화살표가 제공됩니다.

스테퍼의 초깃값은 1이고, step 속성으로 늘이거나 줄일 수 있는 값의 기준을 정할 수 있습니다.

예시) IOS에서 보이는 input type = “number”의 UI입니다.

input type = “password” : 비밀번호 입력을 위한 유형입니다. 입력하게 되는 데이터는 마스킹 기호로 바뀌어 입력됩니다.

예시) input type = “password” 요소가 브라우저에 렌더링 된 모습의 예시입니다.

IOS의 경우 password 키패드를 캡쳐하게 되면 키패드가 보이지 않게 보안이 적용된 캡쳐가 됩니다.

예시) IOS에서 보이는 input type = “password”의 UI입니다.

input type = “tel” : 전화번호 입력을 위한 유형입니다.

예시) IOS에서 보이는 input type = “tel”의 UI입니다.

input type = “radio” : radio는 사용자에게 필수로 하나의 데이터를 입력받아야 하는 경우 사용합니다. 예시로는 회원가입 시 성별을 선택해야 할 때가 있습니다.

radio 버튼의 내용은 radio 버튼의 id와 <label for =”“> 를 일치시켜 연결합니다.

각 radio 버튼은 같은 name으로 지정하여 radio 그룹을 설정합니다.


<fieldset>
      <legend>radio 버튼은 한 가지만 선택할 수 있습니다</legend>
      <div>
        <input
          type="radio"
          id="radio_one"
          name="radiogroup"
        />
        <label for="radio_one">radio_one</label>
      </div>
      <div>
        <input
          type="radio"
          id="radio_two"
          name="radiogroup"
        />
        <label for="radio_two">radio_two</label>
      </div>
      <div>
        <input
          type="radio"
          id="radio_three"
          name="radiogroup"
        />
        <label for="radio_three">radio_three</label>
      </div>
   </fieldset>

예시) input type = “radio” 요소가 브라우저에 렌더링 된 모습의 예시입니다.

input type = “checkbox” : checkbox는 중복으로 선택이 가능하여 사용자에게 여러 데이터를 받아야 할 때 사용합니다.

예시로는 회원가입을 할 때 필수로 선택해야 하는 이용약관과 필수가 아닌 개인정보 수집 및 허용이 있습니다.

radio는 같은 항목을 클릭하여 선택 해제가 안 되지만 checkbox는 해제할 수 있습니다.

예시) input type = “checkbox” 요소가 브라우저에 렌더링 된 모습의 예시입니다.

input type = “button” : button의 형식인 input 요소입니다. button은 클릭하여도 특별한 기능이 없습니다.JavaScript의 이벤트 핸들러로 기능을 연결할 때 사용합니다.

input type = “button”은 value가 없으면 text가 없는 빈 버튼이 생성됩니다.

예시)input type = “button”의 value 속성값이 지정되지 않았을 때 예시입니다.

input type = ”submit” : 사용자가 폼에서 작성한 데이터를 서버에게 전송할 때 사용되는 버튼입니다.예시로는 로그인을 위한 아이디, 비밀번호를 작성하고 로그인 버튼을 누를 때 로그인 버튼이 submit 역할을 수행합니다.

value 속성에 값이 지정되지 않으면 “제출” 텍스트가 표시됩니다.

예시) input type:”submit”의 value 속성값이 지정되지 않았을 때 예시입니다.

input type = ”reset” : 사용자가 폼에서 작성한 데이터를 원래의 빈 값으로 초기화하는 버튼입니다.

value 속성에 값이 지정되지 않으면 “초기화” 텍스트가 기본값입니다.

예시) input type= “reset”의 value 속성값이 지정되지 않았을 때 예시입니다.

input type = “image” : 이미지를 input type = “submit” 과 같은 기능으로 사용할 수 있는 유형입니다.

이미지의 경로가 정해지지 않거나 사용하던 이미지가 유실되었을 때는 대체 이미지로 바뀌게 됩니다.


<input type= "image" src="./img/이미지.png” />

src 속성으로 경로를 지정하여 이미지를 선택할 수 있습니다.

예시) 이미지의 경로가 정해지지 않거나 사용하던 이미지가 유실되었을 때입니다.

💡

<input type = “submit ,reset , button”> VS <button></button>

앞서 나열한 submit, reset, button은 <button> 태그의 type에도 있습니다. 이 둘은 어떤 것이 다를까요? 수행하는 기능은 동일합니다.

그렇지만 button 태그의 사용을 권유합니다. button 태그의 경우 여는 태그와 닫는 태그가 있어 이미지를 삽입하는 것이 가능하여 스타일링 하기가 더 자유롭습니다.

input 태그는 닫는 태그가 없어 Text를 삽입하려면 value=””에 Text를 넣어 버튼의 내용을 표시하게 됩니다.

input type = ”search” : 사용자가 검색하기 위해 사용되는 유형입니다. search 항목에 입력하게 되면 오른쪽 끝에 reset을 위한 X 모양 아이콘이 포함되어 있습니다.모바일 키보드는 input type = ”text”와 같습니다

예시) input type = “search” 요소가 브라우저에 렌더링 된 모습과 x 모양 아이콘 예시입니다.

input type = ”email” : 사용자가 email을 입력하는 항목입니다.

예시) IOS에서 보이는 input type = ”email” 의 UI입니다.

input type = ”url” : 사용자가 웹 주소를 입력하는 항목입니다.

예시) IOS에서 보이는 input type = ”url” 의 UI입니다.

input type = ”file” : 사용자가 파일을 업로드 할 수 있는 입력 필드입니다.

예시) input type = “file” 필드에 파일이 선택되지 않았을 때 예시입니다.

input type = ”date” : 날짜를 입력하는 항목으로 클릭하면 날짜를 선택할 수 있는 위젯이 나옵니다.

이 위젯은 연도, 월, 일을 선택 할 수 있고, 브라우저마다 디자인이 다릅니다.

예시) input type= ”date”요소가 브라우저에 렌더링 된 모습의 예시입니다.

예시) IOS에서 보이는 input type= “date” 의 UI입니다.

input type = ”datetime-local” : date와 같이 날짜를 입력하고 추가로 오전, 오후와 시, 분을 입력할 수 있는 항목입니다.

예시) input type= ”datetime-local” 요소가 브라우저에 렌더링 된 모습의 예시입니다.

예시) IOS에서 보이는 input type = ”datetime-local” 의 UI입니다.

input type = ”month” : 연도와 월의 날짜만 입력할 수 있는 항목입니다.

예시) input type= ”month”요소가 브라우저에 렌더링 된 모습의 예시입니다.

예시) IOS에서 보이는 input type = ”month”의 UI입니다.

input type = ”time” : 오전, 오후와 시, 분을 입력할 수 있는 항목입니다.

예시) input type= ”time”요소가 브라우저에 렌더링 된 모습의 예시입니다.

예시) IOS에서 보이는 input type = ”time”의 UI입니다.

input type = ”color” : 색상을 선택할 수 있는 위젯이 나옵니다.

스포이드 모양의 아이콘을 클릭하면 다른 요소의 색상을 알 수 있고 선택도 가능합니다.

예시) input type= “color”를 클릭하기 전과 후 이미지입니다.

예시) IOS에서 보이는 input type = ”color”의 UI입니다.

input type = ”range” : 볼륨 조절이나 밝기 조절 등에서 많이 본 슬라이더가 나타납니다. 정확한 값이 필요하지 않은 경우에 사용됩니다.

min과 max로 슬라이더의 최소값과 최대값을 지정할 수 있고 step으로 슬라이더의 간격을 지정할 수 있습니다.

value는 초기에 설정될 슬라이더의 위치값을 설정할 수 있습니다.

예시) input type = “range”의 슬라이더 예시입니다.

input type = ”hidden” : 이 항목은 사용자에게 보이지 않는 항목입니다. 이 항목은 사용자가 form의 입력 사항을 모두 입력하고 제출할 때 포함되어야 하는 다른 값들을 개발자가 포함하기 위해 사용되는 항목입니다.

5.3.2 input의 공통 속성

readonly : text를 입력할 수 있는 input에 이 속성을 준다면 클릭은 가능하지만, text 입력을 할 수 없습니다.

required : 필수로 해당 항목을 입력해야 Form 양식의 제출이 가능합니다.

placeholder : 사용자가 입력해야 할 내용에 대해 힌트를 표시해 주는 기능입니다.

예시) placeholder에 “ID를 입력해 주세요”를 입력했을 때 이미지입니다.

autocomplete : 로그인할 때 자동완성으로 빠르게 로그인했던 경험이 있을 겁니다. 이 속성은 text를 입력할 수 있는 input의 자동완성을 허용합니다.

속성값은 on과 off로 기능 활성화/비활성화할 수 있습니다.

value : text를 입력할 수 있는 input에 value를 지정하면 지정한 text가 초기값으로 포함됩니다.

button:type의 value는 button의 text가 설정됩니다.

value의 값은 서버에게 같이 전달되어 서버는 전달받은 항목이 어떤 value를 가졌는지

확인 할 수 있습니다.

name : 항목에 고유 이름을 설정해 줍니다. 이 name은 radio 예시와 같이 각각의 입력 필드를 같은 name을 지정해 주어 그룹을 지어줄 때 사용됩니다.

size : input 항목의 크기를 숫자로 조정 가능합니다

disabled : 속성을 준 항목이 비활성화 상태가 됩니다. 또한 Form 양식을 제출하여도 disabled 해당 속성은 제출되지 않습니다.

autofocus : 페이지 렌더링 후 autofocus 가 적용된 input 요소에 마우스 클릭 없이 바로 입력이 가능하게 focus가 이동합니다.

maxlength : 적용한 항목의 최대 글자 수를 정해주는 기능입니다.

minlength : 적용한 항목의 최소 글자 수를 정해주는 기능입니다.

min : number에서 사용되며 10을 입력한다면 10보다 작은 값은 넣을 수 없습니다.

max : number에서 사용되며 20을 입력한다면 20보다 큰 값은 넣을 수 없습니다.

step : number의 스테퍼 화살표로 움직일 숫자의 크기를 지정하는 속성입니다.

checked : checkbox와 radio에 사용할 수 있는 속성으로 페이지가 최초 렌더링이 되었을 때 체크가 되어있게 합니다.

accept : file에서 사용되는 속성입니다. 이 속성은 사용자가 파일을 업로드 할 때 파일의 확장자를 지정해 줍니다. 쉼표로 구분해 주어 여러 개를 지정할 수도 있습니다.

multiple : file에서 사용되는 속성입니다. 사용자가 파일을 업로드할 때 여러 파일을 한 번에 업로드할 때 사용됩니다.