멋쟁이 사자처럼_1030

jojo·2021년 10월 30일
0

멋쟁이사자처럼

목록 보기
2/39
post-thumbnail

멋쟁이 사자처럼 "프론트엔드 스쿨" 2일차

스터디

몇몇분들과 스터디를 시작했다.
이미지에 나와있는 것을 그대로 구현하는건데
input 태그를 3일 전에 공부해서 쉬울줄 알았다.


특히 정도를 나타내는 바(?)를 만드는 것 때문에 당황했다..!

<input type="range">

이렇게는 생각을 했는데 도대체 밑에 눈금을 어떻게 나타내는건지..!

구글링,,구글링,,,

<input type="range" list="tickmarks">
<datalist id="tickmarks">
<option value="0"></option>
<option value="10"></option>
<option value="20"></option>
<option value="30"></option>
<option value="40"></option>
<option value="50"></option>
<option value="60"></option>
<option value="70"></option>
<option value="80"></option>
<option value="90"></option>
<option value="100"></option>
</datalist>

밑에 표시는 tickmarks라고 하는 거였다..




submit버튼에 안에 내용물 바꾸려면 value값을 명시해줘야한다는 것을 알았다.

<input type="submit" value="제출하기">

그리고 input에서 type에 따라 value의 용도도 다르다는 것도!
button, submit은 버튼 내의 내용을 바꾸는 것.
password, text는 입력 필드의 초기값 설정 등..!


그치만 써봐야 체감될 것 같다.


password 상자 안에 텍스트를 넣는 방법은 'placeholder'를 쓴다.
placeholder는 사전적인 의미는 "빠져 있는 다른 것을 대신하는 기호나 텍스트의 일부"인데
입력할 값에 대한 예시를 주거나, 힌트를 주는 기능이라고 한다.

<input type="password" placeholder="비밀번호를 입력하세요.">



접해보지 못했던 단어도 많지만 그래도 영어로 찾는 버릇을 들여보려고 한다...
많이 접해야 뭘로 검색할지 빨리 생각나겠지..?
이 스터디 말고 모각코도 한번 들어가봐야겠다..!

profile
2021.11~

0개의 댓글