![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/blxhia/btrlS0EQ6zo/66DSCe8KlNntf8EUnouXlK/img.png)
안녕하세요 동기 여러분! 오늘은 필수 입력란을 만드는 방법에 대해 알아봅시다. Requiring an Input 회원 가입 같은 거 할 때 반드시 적어야 하는 필수 사항들이 있습니다. 아이디, 비밀번호, 이메일, 이름 등등이 있는데요, 적지 않고 가입을 누르면 적으라고 경고문이 뜨게 됩니다. 오늘은 그것을 만드는 방법을 배워 봅시다! 생김새 성명을 입력해주십시오. 아무것도 입력 하지 않고 제출을 하면 이렇게 오류가 뜨면서 화면이 넘어가지 않습니다. 코드 설명 main.html 파일에 post 방식으로 내용을 보내겠다. 성명을 입력해주십시오. 빈칸에 대한 설명 줄바꿈 label의 for 값과 input의 id의 값은 짝을 지어주기 위해 통일, name은 식별을 위해 name으로 적어주고 빈칸에 여기 입력해..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/cYHYRB/btrlKgAW6Ub/1mTJIruQiWdibho80XM3r0/img.png)
안녕하세요 동기 여러분! 오늘은 How a form works부터 지금까지 우리가 알아본 모든 것을 보내는 버튼을 만드는 방법에 대해 알아봅시다. Submit Form Form을 보내는 버튼을 만들어봅시다! 생김새 고객님의 서비스 경험을 적어주세요! 저번 시간에 배운 Textarea태그 밑에 넣은 한 줄이 오늘 우리가 알아보는 버튼 코드입니다. input 태그 안에 type은 submit으로 정해주고 value는 버튼 안에 넣을 말을 써주시면 됩니다. 다음은 실행 화면입니다. 어때요 정말 쉽죠? 오늘의 느낌 HTML도 거의 다 끝나 갑니다! 아자 아자
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/z31v7/btrlDXJ9uZJ/l6sOvjGnryi2hvV6llVj51/img.png)
에ㅔㅔㅔㅔ이 하유두인 브로?(캐나다 친구들이랑 하던 인사) 동기 여러분! 오늘은 Textarea를 넣는 방법에 대해 알아봅시다. Textarea element 문자 구역(Textarea)은 뭘까요? 보통 어떤 회사의 제품 리뷰를 보내거나 의견을 보낼 때 이런 칸이 있죠? 자세한 설명 부탁드립니다. 가 있는 칸이 바로 문자 구역(Textarea)입니다. 코드를 뜯어보면 아래와 같습니다. 우리가 알아볼 내용은 밑줄 친 부분입니다! 코드 설명 문자 구역(textarea)의 태그 id는 혹시 태그와 같이 쓰게 된다면 연결하기 위해 사용될 수 있습니다 name는 식별을 위해 id와 같은 값을 적어주면 좋습니다. rows는 가로 크기 cols는 columns의 줄임말로 세로 크기입니다. placeholder는 문자..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/dbrRJv/btrlFJQ7BAP/gJgLea4n9sNRwBUKWYKWC1/img.png)
안녕하세요 동기 여러분! 오늘은 데이터 리스트 넣는 방법에 대해 알아봅시다! Datalist Input 인터넷 서비스를 이용하려 할 때, 제일 먼저 해야 하는 일은 회원가입을 하는 것일 겁니다. 다음 사진의 지마켓 회원가입 화면에 이메일을 작성하는 부분이 데이터 리스트로 만들어져 있습니다. 이것을 만드는 방법을 알아봅시다! 생김새 코드 설명 의 list의 값과 의 id의 값은 같아야 합니다. (for와 id가 같아야 하는 다른 인풋들과는 다르죠?) 지금까지 배운 value의 값들은 사용자들에게는 보이지 않는 값이었지만 여기서는 value의 값이 사용자에게 보여 집니다. (위의 사진에 naver.com, daum.net, hotmail.com 등등이 value 값에 해당함) 그렇다면 여기서 의문이 생깁니다..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/bnT329/btrlEm90ICL/ptBGkTBv7vhRJ3mLLgVnWk/img.png)
안녕하세요 동기 여러분! 오늘은 라디오 버튼 넣는 방법에 대해 알아봅시다! Radio Button Input 사용자에게 여러 가지의 옵션을 주고 하나 고르게 하고 싶을 때 쓰는 방법입니다. 생김새 1. 1963년 국내에 첫 출시하여 대한민국의 모든 인스턴트 라면의 원조이며 햄맛을 국물 베이스로 사용하고 있는 이 라면은 무엇인가? 1. 신라면 2. 진라면 3. 안성탕면 4. 수타면 5. 삼양라면 위의 코드를 출력하면 이렇게 라디오 버튼을 가지고 있는 문항들이 생겨납니다. 코드 분석 이전과 마찬가지로 의 for의 값과 의 값은 같아야 합니다. name은 "answer"로 모두 같게 설정을 해주는데 이유는 그룹화하기 위함입니다. 값은 식별이 용이하게 label의 내용과 연관있는 단어나 문장을 써서 넣어줍니다...
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/dwr1z1/btrlCY1TF2t/kTOBauKMx5LckfwM8zWmTK/img.png)
안녕하세요 동기 여러분! 오늘은 체크박스 만드는 방법에 대해 알아봅시다! Checkbox Input 이제 우리는 감이 옵니다. 감이 와! type="checkbox"를 하면 나오겠지 뭐 ㅋㅋㅋㅋ 사용자에게 여러 가지의 옵션을 전달받고 싶은 경우 체크박스를 사용해주면 됩니다. 생김새 좋아하는 라면에 체크 하시오! 신라면 진라면 매운맛 너구리 불닭 볶음면 안성탕면 label의 for와 input의 id는 역시나 같아야 합니다. name은 ramen으로 모두 통일 하였는데 이는 모든 체크박스를 그룹화한 것입니다. (name을 아무렇게나 정한다면 나중에 form을 받아서 데이터를 정리할 때 뭐가 뭔지 헷갈려서 일이 진행이 안됨) value는 체크박스 각각과 값(한글로 된 부분)으로 연결이 되어 있는데, 체크박스..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/R4Wzb/btrlCoFIEZG/2GZPMuNWQLeo1hWhLji1wK/img.png)
안녕하세요 동기 여러분! 오늘은 사용자가 범위를 조절하여 입력한 내용을 받아내는 아주 귀엽고 깜찍한 방법에 대해 알아봅시다! Range Input 제한된 숫자를 선택하도록 사용자를 유도하는 방법에는 number 보다는 range 가 탁월한 선택일 것입니다. 생김새 넌 잘생겼니? Yes 모르겠는데 No 또 또 또 역시 이전과 마찬가지로 의 for의 값과 의 값은 같아야 합니다. type="range"를 해주어야하고 최소(min)와 최대(max) 값을 설정해줄 수 있습니다. 여기서 step은 마우스나 키보드로 범위를 설정할 때 얼마만큼 가게 할지 선택하는 것입니다. 위의 코드를 실행해보면 이런 화면이 나타나는데 마우스 또는 키보드로 두 칸 움직여보면 두칸 움직였더니 못생겨지는 대참사가 발생합니다... 새로운..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/dKv4kg/btrlvCstKd2/XuEtk7J6nJabmXVoHh0B21/img.png)
안녕하세요 동기 여러분! 오늘은 숫자만 넣을 수 있는 빈칸을 만드는 법에 대해 알아봅시다! Number Input 속성에 type="text"를 지난 시간까지 알아보았는데, 여기에 "number"를 넣는다면 어떤 일이 벌어질까요? 그렇게 된다면, 숫자만 사용할 수 있는 빈칸이 만들어지는데 이 빈칸에는 마이너스(-), 플러스(+), 점(.)도 사용이 가능합니다. 그리고 type 옆에 step 속성을 넣으면 다음과 같은 화살표 버튼이 만들어집니다. 생김새 마 니 몇살이고? 이전에 했던 방법과 마찬가지로 의 for와 의 id는 같은 값을 가져야 합니다. step="1"은 화살표를 누를 때 마다 더해지거나 빼지는 숫자를 의미합니다. (step="3"이면 숫자가 3씩 더해지거나 빼 짐) 응? 그게 다예요... ㅋ..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/dT0cDQ/btrloeSQCIe/d6BqVK6rj7HEaJPgfN9ukk/img.png)
안녕하세요 동기 여러분~~~ 감기 조심하세요~~~ 오늘은 패스워드를 넣는 칸을 만들어 보도록 하겠습니다. Password Input 비밀번호! 생김새 너의 비밀번호는 무엇인고? 에 type을 "password"로만 바꾸어주면 된다. 그럼 비밀번호를 타이핑할 때 다음과 같은 화면이 나온다. 물론 을 안에 넣어 버려서 코드를 짧게 쓸 수도 있다. 너의 비밀번호는 무엇인고? 또다시 물론 form이 보내어질 때 userpassword="사용자가 적은 비밀번호"가 보내어지게 된다! 오늘의 느낌 오늘의 느낌은 Adding a Label 편에 올려두었다ㅋㅋㅋㅋㅋㅋ 궁금하지 않으신가
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/Cfxhs/btrlsieHmo6/OzNuMKeW5FfctiSWusISx0/img.png)
안녕하세요 동기 여러분! 오늘은 라벨(Label 뤠이블)을 넣는 방법에 알아봅시닼ㅋㅋ Adding a Label 라벨(Label)이 무엇인가 하니 인풋 빈칸 옆에 부연 설명을 해주는 친구입니다. 예를 들어, 야후 로그인 창을 켜보면 아이디를 적어 놓는 빈칸 위에 "사용자 이름, 이메일 또는 무선 기기"라고 설명이 쓰여 있는 게 보이시나요? 얘가 바로 라벨(Label)입니다. 생김새 너의 아이디는 무엇인고? 이 코드를 실행하면, 이런 창이 뜨게 됩니다. 과 이 연관되게 작동시키기 위해서 은 id 속성이 필요합니다. 그런 다음 의 id 값을 의 for 값과 같게 만들어 주어야합니다. 위의 설명이 귀찮다면, 중첩을 시켜 한방에 해결하는 방법도 있습니다. 너의 아이디는 무엇인고? 태그 안에 을 넣어 버림으로써 ..
- Total
- Today
- Yesterday
- 동기코딩
- if문
- 반복문
- 메서드
- Object
- Array
- Python
- for문
- html table
- HTML 기본
- em
- 타입 좁히기
- html
- 실수
- javascript
- 파이썬
- Typescript
- css position
- 함수
- 프로그래머스
- padding
- CSS 포지션
- 객체
- method
- Type
- 타입스크립트
- Margin
- function
- CSS
- 자바스크립트
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 |