[HTML] 기능 연결 고리 input, label, a

또나·2023년 4월 21일
0
post-thumbnail

폼과 탭메뉴를 구현하다가 input과 a태그를 활용하면 기능의 뼈대도 구축할 수 있는 거구나..! 하고 매력을 느꼈다. 응용에 따라 다양하게 활용할 수 있는 코딩 세계 〰️〰️ 앞으로 착착 잘 활용하고 싶어서 개념부터 정리해본다. 기능 연결고리 input-label 그리고 anchor 레쓰기릿!




1. form - input

<form> 은 사용자로부터 정보를 받아 서버에 전송하는 태그이다.
안에는 한개 이상의 element( input, label, button, textarea )가 포함될 수 있다.
자주쓰는 요소는 이런 것들이 있다.

input type=""설명예시
text텍스트를 입력받는 가장 기본적인 input형태
password패스워드를 입력받는 input형태
number숫자를 입력받는 input형태
date날짜 입력 컨트롤. 활성화 시 날짜를 선택할 수 있는 달력이 열림
file파일 입력 컨트롤. accept으로 특정 파일 유형 지정이 가능
buttonvalue를 레이블로 사용하는 푸시 버튼. <button>과 같음
checkbox단일 값을 선택하거나 선택 해제할 수 있는 체크박스
radio같은 name 값을 지정하면 여러개의 선택중에 하나의 값을 선택함

더 자세한 요소를 알고싶다면 참고 - input 입력 요소 이 글을 참고하시길

placeholder="문구" : input란에 문구를 지정
minlength="숫자" maxlength="숫자" : 최소, 최대 입력 글자 제한
required : 필수 입력 항목
disabled : 입력할 수 없게 제한

ex) <input type="text" placeholder="입력하세요" maxlength="5" required>



💡 입력시 생기는 진한 선을 없애고자 한다면 스타일시트에서 outline: none; 을 주면 없어진다.




2. label

사용자 인터페이스 항목의 설명을 나타내는 태그.
<input>과 함께 연결되어 특정 폼 양식에 이름을 붙여주는 용도로 사용한다.
연결은 <label>의 for 속성값을 <input>의 id 속성과 동일하게 지정하면 된다.

input - label 기능 연결을 시키면 텍스트를 클릭해도 입력을 받음
TEXTBOX CHECKBOX

<label for="textbox">TEXTBOX</label><input type="text" id="textbox">
<label for="checkbox">CHECKBOX</label><input type="checkbox" id="checkbox">

즉, label을 input의 버튼처럼 활용할 수 있는데 응용하면 input을 숨기고 label을 디자인해서 기본 체크박스 대신 다양하게 꾸며 사용하는 것도 가능하다.
참고 - checkbox 스타일 커스텀

그리고 labelradio의 특징을 이용해 js를 이용하지 않고 css 만으로도 탭 슬라이드를 구현할 수 있었다. ( * 가상클래스 :checked 와 형제선택자 ~ 를 활용해 포지션 값을 조정함 ) 신통방통🙊




3. anchor

<a>태그 , 외부 페이지를 링크할 때도 쓰지만 같은 페이지 내에서 이동할 때도 쓴다.
페이지 내 특정 태그에 id 를 적용하고 <a herf="#id이름"> 을 설정하면, 눌렀을 때 해당 태그로 이동하게 된다.

예시 1 ) a태그를 눌렀을 때 해당 섹션으로 스크롤링

대신 이렇게 부드럽게 스크롤이 되려면 CSS에서 html {scroll-behavior: smooth;} 지정을 해 주어야 한다. 익플에선 안됨!

예시 2) a태그를 눌렀을 때 해당 구역 보여줌

<li> 에 각각 다른 id를 부여 visiblity: hidden; , <a>로 해당 id 연결해 가상클래스 :targetvisibility: visible;을 주어 탭하면 보이게 설정했다. 클릭 되었을 때의 버튼 스타일은 제이쿼리로 바뀌게 지정했지만.. 순수 CSS로도 기능을 구현할 수 있다는 걸 알게되었다. 신통방통🙊




💭 review

가상클래스를 안다면 더욱더 다양하게 CSS를 적용해 볼 수 있을 것 같다.
코딩을 파면 팔 수록 내가 알고있는 건 빙산의 일각에 불과하다는 느낌..
그러나 하면서 알게되는 거니까 두려워말고 더 많은 것들을 연습해보고 차곡차곡 내 것으로 만들어야지☺

profile
공부 기록장

0개의 댓글