비전공에서 취업까지!! [9화] front 햇빛 이 선명하게 나뭇잎을 핥고있었다 를 정자로 여기에 기재하시오 -입니다.-
안녕하세요 SsunDev입니랄?
드디어 html도 끝이 보입니다. 생각보다 html은 그렇게 내용이 많지않아서 금방 끝나네요!
말로하면 금방 넘어갈 내용 일텐데도 텍스트로 내용을 전달하다보니 생각보다 어렵더라구요 ㅋㅋ
스프링 들어갈 때 쯔음을 생각하면 아득합니다.
그래도 한걸음 한걸음 자 나아가 봅시다!!
역시나 힘차게 html_important06과 함께 향상된 html뼈대를 박고 시작!!!
추가로 어제 만들었던 <form> 테그에 action 부분에 #을 기입해주겠습니다 그럼 현재페이지라는 뜻입니다.
따라서 submit을 통해 데이터를 전송하면 현제페이지로 받게됩니다.
두번째로 method에는 get을 기입해주겠습니다. method에는 post와 get 두가지가 있다고 했었죠?
어려우니 포스트는 데이터를 바디영역에 숨겨서 보내준다,
겟은 주소에 데이터를 넣어서 같이 보내준다 다 보이니 보안에는 안좋다 라고 알려드렸습니다. 이건 외우시는게 좋습니다.
오늘은 <form></form> 테그 안에 데이터를 기입할곳을 만들어 보겠습니다.
바로 <input> 테그입니다 인풋 테그는 닫는테그가 없습니다.
인풋테그 안에 type이라는 속성에 사용할 속성들부터 알아보겠습니다.
(button,checkbox,color,date,datetime-local,
email,file,hidden,image,month,number,password,radio,range,reset,search,submit,tel,text,time,url,week)가 있습니다.
....
소오오올직하게 저도 첨본것도 있고 저중에 몇개밖에 쓰지 않습니다.
한번씩 넣어서 확인해보시되 저는 가장 중요하게 쓰이는것만 쪽집게강의로 쏙쏙 뽑아다 알려드리겠습니다.
-----1티어-------
1.text
2.checkbox
3.radio
4.password
5.hidden
------2티어-------
6.number
7.file
8.date
9.email
10.image
11.range
정도만 숙지하시면 되겠습니다. 나머지는 잘 쓰이지 않습니다. 물론 쓰려면 다 쓸수 있지만요!
이에 앞서 테스트를 해보기 위해서
<input type="" name="" value=""> 하고 속성들을 기입해보겠습니다.
앞으로 Key : Value 라는걸 아셔야합니다. key는 데이터의 이름이고 value는 그 데이터의 값입니다.
말이 좀 어렵죠? 어렵게 생각할것 없고 예시를 보면 아 하고 알게됩니다.
무기=한손검
이 때 무기가 키값이고 한손검이 벨류입니다 이 무기란 key의 value 에는 도끼도 올 수 있고 망치가 올 수도 있겠죠?
또
명품=YSL 이것도 키와 값입니다
명품이란 이름으로 YSL이라는 데이터가 들어간 겁니다.
이렇듯 프로그래밍 언어에서는 키와 값으로 이루어진 데이터를 많이 사용합니다. 앞으로 주구장창 개발하는 내내 사용할테니 이해해두시면 좋습니다
(하다보면 이해됨 이해 안되면...... 아냐 이해해야할거야 넌 반드시 그래야만해 암 그렇고 말고 예쓰 유 알)
자 그럼 다시 <input> 테그로 돌아와서
안에 적어준 name=" "에 기입해준 값이 키값이 되고 value=" "값은 데이터가 됩니다.
하나하나 배워봅시다!
먼저 1번으로 기입한 text부터 기입해봅시다
버튼 위에 <input> 테그에 name에 favorite_food 라고 하고 value는 비워두었습니다.
name은 키가되고 value는 값이됩니다. value를 비워두면 화면에서 기입한 데이터가 값이 됩니다.
자 그럼 바로 ALT + B!
이렇게 글을 쓸 수 있는 텍스트 박스와 벤자민 버튼이 만들어졌습니다!
한번 각자 좋아하는 음식을 기입하고 벤자민 버튼을 눌러볼까요?
이렇게 기입한 데이터가 키와 값으로 주소를 통해 전송되었습니다.
favoite_food = 크림순대국밥
자 다들 잘 전송되었나요?
나중에 저 주소를 받아서 저 주소에 적힌 데이터들을 가지고 화면을 만들어주게 된답니다!
이렇게 get방식으로 보내주게되면 주소의 html_important06.html 뒤에 ? 로 시작하여 키=값,으로 데이터를 보내주게됩니다. 만약 전송할 데이터가 여러개라면, ?키=값&키=값&키=값으로 &로 구분하여 보내주게됩니다. (글로 쓰니 어렵네..)
***중요합니다***
주소?키=값&키=값 입니다.(따라 읽어보면 쉽습니다 주소 물음표 키는 甲 and 키는 값!!)
예시)www.ssundev.com?id=SsunDev&password=kimchi&mbti=intp&현재체중=파워후
이런식입니다 이해 되셨죠?
다시 돌아와서 name=""에는 키가 들어가고 value=""에는 값이 들어간다! 만약 이 value=""에 데이터를 넣어본다면 어떻게될까요?
ALT + B!
이렇게 값이 미리 들어가 있는걸 볼 수 있습니다! 어때요 참 쉽죠?
그런데 아이디를 기입해주세요 처럼 데이터에는 영향을 주지 않고 미리 안내해주는 글을 쓰려면 어떻게 하면 좋을까요?
이런식으로 써야할 데이터를 미리 안내해주는 글귀를 넣어주면 좋겠죠?
그럴 때 placeholder="" 라는 속성을 넣어주면 됩니다. 안에 어서오세요등의 안내문구를 기입해주면 좋겠죠?
라고 value=""를 비워주고 placeholder를 기입해주면?
잘리긴 했지만 이렇게 value가 없을때 보여주는 안내문구가 잘 만들어졌습니다.
type="text" 는 문자를 기입하는곳입니다 그런데 placeholder 안내문구말고도 이 텍스트박스에 어떤걸 기입해야하는지 옆에 써주면 좋겠죠? 그럴때 <label></label>테그를 씁니다.
이렇게 라벨테그를 쓰면 됩니다.
ALT + B!!
이렇게 텍스트박스에 대한 라벨이 생성되었습니다!
그런데 텍스트박스가 아닌 라벨만 클릭해도
텍스트박스에 | 모양의 글자를 쓸수있는 막대기(커서)가 깜빡이면 좋겠죠?
label의 속성에 for="" 하고 종속시킬 데이터의 id값을 써줍니다.
그럼 제가 input 테그에 id="foodData" 라고 정의하고 라벨의 for에도 foodData라고 정의해보겠습니다.
이렇게 정의해주면 label테그는 foodData라는 id를 가진 테그를 위해 작동합니다.
이렇게 정의할경우 라벨영역을 클릭해도 텍스트박스부분에 |모양 커서가 깜빡이면서 글을 쓸 준비가 됩니다!
쉽죠? <label for="종속시킬 id">
그런데 문제는 이제부터입니다
id란 테그가 참 앞으로 너무너무중요하고 귀중하고 소중한 속성입니다.
id는 말 그대로 테그에 고유한 아이디를 붙여주는겁니다.
고유한 아이디... 따라서 한 파일에 같은 이름의 id가 두개이상 존재해선 안됩니다. 딱 한개만 써야합니다 딱 한개만!!!!
반대로 여러개 선언할 수 있는 class="" 란 속성이 있습니다.
class는 id와 달리 같은 이름을 여러군데 붙일 수 있습니다. id와 효과는 얼추 비슷합니다.
나중에 차차 css에서 알아가기로하고
id와 class가 있는데 id는 파일 내에서 고유한 이름을 붙여주는 한군데만 쓸수 있는 속성이고 class 는 여러군데에 같은 이름을 쓸 수 있다. 정도로 알아두시면 됩니다.
여기서 또 중요한게 이 id 와 class는 또 어떤 테그에도 다 붙일수 있는 특별한 속성입니다!
이제까지 배운 모든 테그에 속성으로 id와 class를 붙일 수가 있습니다! 참 어렵죠?
어디에도 붙일수 있는 속성! 하지만 id는 한개만 class는 여러개로!
특히 class="" 안에 여러가지 속성을 입력해 줄 수 있는데 띄어쓰기만 해주면 됩니다.
예를들어 class="redText width100 height300" 이런식으로 여러가지 클래스를 띄어쓰기를 동시에 기입해줄 수 있습니다.
css에서 마저 배워보겠습니다.
다시 input 테그로 돌아와서
<input type="text"> 를 배워보았습니다.
오늘은 중요한 정보가 많아서 정말 힘드네요
두번째 type="checkbox"를 배워보겠습니다.
이런식으로 줄바꿈을 위해 div테그로 감싸서
label 과 input테그를 써주고 키:값이 될 name, value를 정의해주고 for와 id를 정의해주겠습니다.
***id는 한 페이지당 하나만! 또 다시 주의!!***
바로 alt + B!!!
이렇게 다들 잘 나오죠?
이상태로 버튼을 눌러보면?
선택한 두 값이 key value 형식으로 잘 들어간걸 보실 수 있습니다!
체크박스는 이렇게 내가 체크한 값들의 키 벨류를 전송해주게 됩니다!
저 치킨 세마리를 다 체크하셔도 됩니다!!
또 체크박스일경우에 기본값으로 체크가 되어있게끔 만드는 속성이 있습니다.
이런식으로 checked를 박아주게되면
시작부터 체크가 된채로 존재하게됩니다! 이렇게 디폴트값을 선언해 줄 수 있습니다.
쉽죠?
그다음으로 배워볼건 type="radio"
입니다.
이렇게 만들어보겠습니다 형식은 다 비슷비슷하쥬?
바로 ALT + B!! 하고 선택하고 버튼 뙇!!!
여러개를 선택할수 없이 단 하나만 선택하도록 하는 타입이 바로 이 라디오 타입입니다 왜 이게 라디오 타입이냐? 하면
이렇게 옛날 라디오나 카세트테이프 상단의 버튼들이 하나를 누르면 나머지는 다시올라오고 하는 다중 선택이 불가능한 그런 속성때문에 라디오 라는타입이라는 이름이 붙은겁니다 (mz님덜은 이런거 본적 없죠? ㅎㅎ)
다음으로 알아볼 테그는 password입니다
이렇게 코드를 작성해보겠습니다.
바로 ALT+B!
아까 텍스트박스와 비슷한 입력창이 뜹니다. 다만 이젠 기입할때 ●로 감춰져서 기입되게 됩니다. 그럼 바로 버튼 클릭!!
이런식으로 passdword가 전송되게 됩니다. 그런데 get방식을 쓰면 이런식으로 누구나 볼 수 있으니 엄청난 위험에 노출되겠죠?? 이럴땐 post를 써야겠죠? 이해 이해되시겠죠? 아시겠어요? 후..
마지막으로 hidden입니다.
바로 ALT+B!!!
아무것도 없는걸 보실 수 있습니다 이대로 버튼을 눌러보면??
이렇게 숨겨진 포켓몬을 잡아버릴 수가 있습니다?
이 히든데이타는 아직은 이해하시기 어렵겠지만 설명드리자면
개발자만 파악해야하는 중요 데이터를 화면에 저장해뒀다가 데이터를 전송하거나 할 때 사용합니다.
오늘은 너무 많이 배웠네요 ㄷㄷ.... 어질어질 합니다.
분량 조절 실패로 한,두편 더 길어질것 같습니다.
이렇게 input테그에서 가장 많이 쓰이는 타입몇가지를 알아보았습니다
다음시간에 나머지는 훑고 넘어가는정도로 간단하게 알아보고 나머지 못배웠던 테그 몇개만 더 공부하면 정말 html이 끝날것 같습니다!!!
오늘은 정말 중요한 테그가 많이 나와서 앤딩에도 다시한번 짚고 넘어가겠습니다.
<input type="">
1.text = 문자를 기입받는속성
2.checkbox = 여러 데이터들을 다중선택을 통해 받는 속성
3.radio = 여러 데이터들중 단일선택을 통해 받는 속성
4.password = 기입받은 문자를 숨김처리해주는 속성
5.hidden = 화면에서 중요한 데이터를 숨겨서 넘겨주는 속성
6.key : value 키 벨류라는 데이터를 보내주는 양식
7.name = 키값 정의해주는 속성
8.value = value 데이터값
6.placeholder = 기입받을 데이터 안내메세지
7.checked = 선택됨
8.<label for=""></label> 라벨! 그리고 종속시킬 id적는 for
9.id="" 페이지당 단 하나만 존재해야하는 고유id값! 어느 테그에나 정의할 수 있음!!!***중요***
10.class="" 페이지에 여러개 존재해도되고 여러개 정의해도되는 속성값 어느 테그에나 정의할 수 있음!!!***중요***
11.get방식으로 보낼때 주소 읽는방법! 주소 다음 ? 다음 키=벨류 &로 구분 키=벨류
입니다.
다들 각자 한번씩 만들어보고 주석으로 생각이나 자신이 재 정의해서 코드사이사이에 적어두면 더 좋겠죠?
수고들 많으셨습니다!
지적하거나 훈수두고싶으신게 있다면 댓글 부탁드립니다! 기다리는중입니다.