폼과 탭메뉴를 구현하다가 input과 a태그를 활용하면 기능의 뼈대도 구축할 수 있는 거구나..! 하고 매력을 느꼈다. 응용에 따라 다양하게 활용할 수 있는 코딩 세계 〰️〰️ 앞으로 착착 잘 활용하고 싶어서 개념부터 정리해본다. 기능 연결고리 input-label 그리고 anchor 레쓰기릿!
<form>
은 사용자로부터 정보를 받아 서버에 전송하는 태그이다.
안에는 한개 이상의 element( input
, label
, button
, textarea
)가 포함될 수 있다.
자주쓰는 요소는 이런 것들이 있다.
input type="" | 설명 | 예시 |
---|---|---|
text | 텍스트를 입력받는 가장 기본적인 input형태 | |
password | 패스워드를 입력받는 input형태 | |
number | 숫자를 입력받는 input형태 | |
date | 날짜 입력 컨트롤. 활성화 시 날짜를 선택할 수 있는 달력이 열림 | |
file | 파일 입력 컨트롤. accept으로 특정 파일 유형 지정이 가능 | |
button | value를 레이블로 사용하는 푸시 버튼. <button> 과 같음 | |
checkbox | 단일 값을 선택하거나 선택 해제할 수 있는 체크박스 | |
radio | 같은 name 값을 지정하면 여러개의 선택중에 하나의 값을 선택함 |
더 자세한 요소를 알고싶다면 참고 - input 입력 요소 이 글을 참고하시길
placeholder="문구"
: input란에 문구를 지정
minlength="숫자"
maxlength="숫자"
: 최소, 최대 입력 글자 제한
required
: 필수 입력 항목
disabled
: 입력할 수 없게 제한ex) <input type="text" placeholder="입력하세요" maxlength="5" required>
💡 입력시 생기는 진한 선을 없애고자 한다면 스타일시트에서outline: none;
을 주면 없어진다.
사용자 인터페이스 항목의 설명을 나타내는 태그.
<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 스타일 커스텀
그리고 label
과 radio
의 특징을 이용해 js를 이용하지 않고 css 만으로도 탭 슬라이드를 구현할 수 있었다. ( * 가상클래스 :checked
와 형제선택자 ~
를 활용해 포지션 값을 조정함 ) 신통방통🙊
<a>
태그 , 외부 페이지를 링크할 때도 쓰지만 같은 페이지 내에서 이동할 때도 쓴다.
페이지 내 특정 태그에 id
를 적용하고 <a herf="#id이름">
을 설정하면, 눌렀을 때 해당 태그로 이동하게 된다.
예시 1 ) a태그를 눌렀을 때 해당 섹션으로 스크롤링
대신 이렇게 부드럽게 스크롤이 되려면 CSS에서 html {scroll-behavior: smooth;}
지정을 해 주어야 한다. 익플에선 안됨!
예시 2) a태그를 눌렀을 때 해당 구역 보여줌
<li>
에 각각 다른 id를 부여 visiblity: hidden;
, <a>
로 해당 id 연결해 가상클래스 :target
에 visibility: visible;
을 주어 탭하면 보이게 설정했다. 클릭 되었을 때의 버튼 스타일은 제이쿼리로 바뀌게 지정했지만.. 순수 CSS로도 기능을 구현할 수 있다는 걸 알게되었다. 신통방통🙊
가상클래스를 안다면 더욱더 다양하게 CSS를 적용해 볼 수 있을 것 같다.
코딩을 파면 팔 수록 내가 알고있는 건 빙산의 일각에 불과하다는 느낌..
그러나 하면서 알게되는 거니까 두려워말고 더 많은 것들을 연습해보고 차곡차곡 내 것으로 만들어야지☺