UI / UX 웹 퍼블리셔 & 프론트엔드 [6] - UI 태그
과정명에도 명시된, UI는 User Interface의 약자이다.
그러면 Interface는 무엇일까?
[위키백과]
인터페이스는 서로 다른 두 개의 시스템, 장치 사이에서 정보나 신호를 주고받는 경우의 접점이나 경계면을 뜻한다.
사전적인 의미로는 쉽게 이해가 되지 않지만
풀어 설명하자면, 서로 다른 것들이 소통하기 위해 도움을 주는 시스템 또는 환경을 의미한다.
우리와 같은 User가 컴퓨터로 작업할 때 사용하는 하드웨어, OS 혹은 소프트웨어들이 전부 인터페이스인 것이다.
이것을 보다 쉽고 가시성 좋게 하는 작업을 UI 작업이라고 한다.
우리가 요즘 사이트를 들어가 보면 로그인 없는 사이트는 보기 힘들 것이다.
이러한 웹 구성을 위한 첫걸음이 이번 UI 태그를 활용한 실습이다.
<input> 태그
: 사용자가 입력하기 위해 사용하는 기능을 구현
type="" 속성
: 입력할 타입을 지정하는 속성
** text : 문자를 입력하는 칸
** password : 비밀번호를 입력하는 칸 (입력 시, 가려주는 기능)
** button : 버튼이 나타난다
** value : 각 칸에 들어갈 내용을 입력한다.
** radio : 단일 선택이 가능한 칸(라디오 박스)
** checkbox : 다중 선택이 가능한 칸 (체크박스)
→ 뒤에 checked 속성 사용하면 자동 체크가 된다.
** size : 최초 입력 할 수 있는 글자 수를 지정(이후엔 마지막 글자가 밀려 바뀌게 된다)
→ text와 password에 사용 가능
** maxlength : 최대 입력 가능 수
→ text, password, textarea에 사용 가능
<textarea> 태그
: 흔히 게시판 혹은 글을 작성할 때 사용하는 칸
** cols : 가로 길이를 뜻하며 한 줄에 표시할 글자 수를 뜻한다 (이후, 글자는 아래줄로 이동)
** rows : 세로 길이를 뜻하며 최대 표시할 글자 공간을 뜻한다 (이후, 스크롤바 생성)
○ 응용문제
: 체크 박스와 라디오 박스를 생성하는데 라디오 박스가 중복체크되지 않도록 생성하여라.
<input type="checkbox">동의함 <input type="checkbox">동의안함<br>
<input type="radio" name="a">동의함 <input type="radio" name="a"> 동의안함<br>
→ radio를 생성할 때는 name 속성을 사용하여 동일한 값을 부여해야 단일 선택이 된다.
