본문 바로가기
학원 수업

11일차 - html 'select', 'input'

by Hiolet 2021. 10. 13.

수요일은 오전에 html 수업을 한다.

html 수업은 다른 수업이랑 다른게 선생님께서 퀘스트를 주신다!! 

선생님께서는 이메일로 받아서 하나씩 확인 해 주시고 부족한 부분을 알려주신다.

이 방법이 참 좋다고 생각하는데 몰라도 넘어갈 수 없고 어떻게든 하게 되기 때문이다.

내가 웹퍼블리셔를 준비하면서 html을 배울 때는 수업만 계속 해서 선생님과 학생 사이에 수업 내용에 대한 연결이 부족했다. 그래서 그 당시에 나는 어렵고 이해가 안 되면 넘어가는 경우가 많았다. 

 

나는 일을 하면서 대부분 터득한 언어이지만 수업을 듣다보면 까먹었거나 몰랐던 부분이 나와서 다시 기초를 쌓는다는 마음가짐으로 듣고 있다.

그리고 웹퍼블리셔는 앞단만 다루기 때문에 서버에 전송하는 부분은 몰라도 되지만

개발자는 그렇지 않기 때문에 html에서도 배워야 할게 많다.

 

그럼 초심자의 심경으로 html 수업 시작

 

select

 

select 태그에 name, option 태그에 value 라는 속성이 있다.

이 속성들로 인해 데이터가 서버로 전송이 되는데 

name속성은 변수, value속성은 변수 값이라고 생각하면 된다.

 

<select name="shopping">

     <option value="2sol">이솔</option>

</select>

서버에는 shopping에 담긴 2sol 데이터가 전송된다.

 

 

<optgroup label="그룹 이름"></optgroup>

비슷한 option끼리 그룹화

 

<optgroup label="동물실험 X">
     <option value="2sol">이솔</option>
     <option value="beplain">비플레인</option>
     <option value="herbloom">허블룸</option>
     <option value="areuareu">아르아르</option>
</optgroup>

 

 


 

input

 

<input type ="text" size="20">

글자 20자를 넣을 수 있다. input 박스 너비를 조절할 때 유용하다.

 

 

<input type ="file" name="이름" vlaue="파일 이름" accept="">

input 태그로 파일 첨부를 만들 수 있다.

accept 속성에서 파일의 종류를 MIME형식으로지정한다. 여러 종류는 .(쉼표)로 구분할 수 있다.

 

<input type="file" name="" value="" accect="">

 

 

 

객관식 선택 항목을 만들려면 type 속성을 radiocheckbox로 지정하면 된다.

 

<label for="◇◇"><input id="◇◇"></label>

radio, checkbox 모두 특정 포인트를 찍어야만 활성화가 되는데 해당 문자를 찍어도 된다면 이용자 입장에서는 훨씬 편하겠지!

lable 태그의 for 속성과 input 태그의 id 속성값이 서로 똑같아야 한다.

코드가 한 줄로 간단하다면 for와 id는 생략 가능하다.

 

<label for="chsns">

     <input type ="radio" name="sns" value="instagram" checked id="chsns">인스타그램

</label>

<label>

     <input type ="radio" name="sns" value="kakaostory" id="chsns">카카오스토리

</label>

 

*많이 선택되는 항목을 미리 체크해 두려면 checked를 쓰면 된다.

 

<label>

     <input type ="checkbox" name="lunch1" value="spaghetti">스파게티

</label>

<label>

     <input type ="checkbox" name="lunch2" value="burger">햄버거

</label>

<label>

     <input type ="checkbox" name="lunch3" value="soup">국밥

</label>

 

*checkbox는 1개의 name에 1개의 value값이 들어갈 수 있게 name값을 각각 다르게 줘야한다.

 


 

서버에 전송되야 하니까 속성값을 알아야 하는게 많다!

내가 html을 처음 배울 때 너무 성의없이 공부한 탓도 있어서 제대로 알려는 각오를 가지고 하는 중이다.

뭐가 허전하다 했더니 html 포스팅은 캡쳐 이미지가 없어도 되는구나

'학원 수업' 카테고리의 다른 글

12일차 - java 'break;'  (0) 2021.10.14
11일차 - SQL 'case문'  (0) 2021.10.14
10일차 - java ' 제어문 for(반복문)'  (0) 2021.10.12
9일차 - JAVA '제어문 if(조건문)'  (0) 2021.10.11
9일차 - SQL '연산하기'  (0) 2021.10.11