SsunDev하세요 안녕입니다.
얼마전에 이어폰 한쪽을 잃어버렸습니다.
출근길에 2호선에서 내리는데 사람이 너무많아서 못내리다 낑낑대며 내리다가 닫히는 기차문에 부딪혀서 오른쪽이 사라져버렸습니다.
오늘 같은 브랜드의 신상을 샀는데 구형 소리가 더 내스타일이어서 너무 서터레스받습니다. 후..
음악만이 나의 유일한 마약인데... 후..
거두절미하고 오늘 html 끝장을 보러 가시죠!
저번에 인풋 테그에서 남은거 간단하게 짚고 넘어가겠습니다.
6.number
7.file
8.date
9.email
10.image
11.range
가 남았었는데요?
언제나 마찬가지로 html_importantFianl.html 하고 파일을 만들고
향상된 html 뼈대에 form 테그와 button까지 만들어보겠습니다!
이런식으로 타입을 파일로 하고 올려주면
이렇게 파일을 업로드해달라는 버튼이생긴다.
파일 선택 버튼을눌러서 파일을 선택하고 [팀 버튼]을 눌러주면?
데이터가 넘어가는걸 볼 수 있다.
파일 업로드의경우 나중에 스크립트와 같이 설명할게 있어서 지금은 중요도에서 뺐다.
그 밖에 파일일 경우에
accept, multiple, files, value, capture 등의 속성을 지정해 줄 수 있다. 대략 다중파일 업로드가능? 특정형식의 파일만 업로드! 등등의 기능들 이지만 크게 중요하지않아 넘어간다!!!!!
다음은 type="image"입니다.
정말 사용할 일이 없... 을것 같긴한데 하여튼 <button type="submit">과 같은효과입니다
src에 지정한 경로의 그림을 불러와서 클릭되게 하여 버튼 submit 역할을 하도록 합니다.
alt는 이미지가 없을 때 나오는 문구이구요
1.징징징징징22222를 기입하고 2.징징이그림을 누르면 3.주소에 데이터가잘 전송이되네요 그리고 클릭한 그림의 x y 좌표도 나오는군욧?
요즘 페이지들은 쌘스 있어서 그림으로 클릭을 유도하도록 만들... 기도 할 지도 모르겠습니다.
type="range" 입니다.
바형 막대기를 당겨서 버튼을 누르면 퍼센테이지가 전송이 됩니다.
설문조사 같은 페이지를 만들 때 혹은 별점같은걸 만들 때 좋을것 같군요?
그밖에 number는 숫자만 기입된다거나 date등의 날짜만 기입되는 타입등이 있는데
거~의 대부분 input type="text"로 사용하지 잘 안씁니다.
javaScript 라는 기술을 사용하여 숫자만 기입되거나 날짜만 기입되도록 하는 효과를 입혀서 사용합니다.
이렇게 input 테그를 끝마치고
이번엔
<select></select>테그에 대해서 알아보도록 하겠습니다.
<ol><ul>의 <li>나
<table>의 <tr><td>처럼
<select> 테그는 <option> 이라는 테그내부 테그가 필요합니다.
이게 기본 뼈대입니다. select 코드 에 name이 붙고 option 에 value가 붙었죠?
select 테그가 가장 잘 어울리도록 안에 정보들을 채워보겠습니다.
이렇게 체워보고 바로 ALT + B!!
정말 많이 봤죠?
전 피시방에서 게임 로그인할때마다 아이디 비밀번호찾기를 몇번씩하면서 핸드폰번호를 몇번이나 기입하는지 모르겠습니다.
이대로 버튼을 눌러보면?
이렇게 name과 value가 주소에 잘 넘어가는걸 볼 수 있습니다!
그런데 시작부터 SKT가 있을게 아니라 통신사를 선택해주세요 라는 이름이 선택되어 있으면 좋겠죠?
그럴땐 이렇게 디폴트값의 option을 넣어주고 selected를 선언해주면 됩니다!
이런식으로 selected를 기입해주시면 됩니다!
쉽죠?
<input> 과 <select> 는 정말 많이 사용됩니다!
그 다음은 <textarea></textarea> 입니다.
textarea는 input type="text"와 비슷합니다
다만 input type="text"의 경우 짧은 글에 어울리고 textarea는 긴 글의 경우에 적합합니다.
그래서 보통 게시판등을 만들 때 제목등은 input type="text"로 사용하고 본문은 textarea로 많이 사용합니다.
다만 주의하실 점은
textarea 의경우 테그 안을 이런식으로 엔터를 쳐서 띄워주면
이런식으로 공백을 인식해버립니다.
두번째로 textarea의경우 데이터 양이 많을때 우측에 스크롤탭이 생기게 됩니다.
이정도 특징만 알고계시면 input type="text"와 쓰임세는 비슷합니다.
그다음 <fieldset>, <legend> 라는 코드가 있는데..
음.. 정말 거어어어의 사용 안하니까 이런게 존재 하는구나 정도만 아시고.. 아니 모르셔도 됩니다.
간단히 설명만 드리자면 그냥 지금까지 배운 테그들을 감싸는 테두리를 만들어 줘서 거기에 제목을 붙여주는 코드입니다. 정말 사용 안하게되실거고 효과도 없으니 존재정도만 알아두시면 됩니다.
마지막으로는
<a></a> 테그입니다.
이렇게 <a></a> 테그를 써주고 안에 글자를 써주면 그 글자에 하이퍼링크가 걸리게 됩니다.
href=""에 가고자 하는 페이지의 주소경로를 지정해주겠습니다.
바로 alt+B!!!
글자에 밑줄이 생겼군요? 그럼 글자를 클릭해볼까요?
이렇게 우리가 제에에에일 처음 만든 첫번째 페이지가 나왔습니다!
a 테그에는 target="" 이라는 속성을 넣어줄 수 있습니다. 이 target 속성에는 두가지를 기입해 줄 수 있는데
_self 와 _blank 입니다.
target="_self" 는 링크를 클릭했을 때 현재 페이지에서 경로의 페이지로 이동합니다.
target="_blank" 는 링크를 클릭했을 때 새창이 열리면서 페이지를 이동합니다.
이 target 속성을 기입하지 않는경우 기본값은 target="_self"입니다.
이렇게 HTML 이라는 기술을 끝마치겠습니다! 그 동안 배웠던 코드를 다시한번 쭉 정리해보시고 간단한 실습 후에 문제 풀이로 넘어가 보도록 하겠습니다! 그래야 머리에 오래 남겠죠? ㅎㅎ
HTML 그래도 끝나서 너무 뿌듯합니다!
CSS도 잘 따라와 주실꺼죠!? ㅎㅎ 댓글 남겨주시면 감사드리겠습니다!
SsunDev는 언제나 여러분의 관심을 기다립니다!
'1.비전공에서 취업까지!![HTML,CSS]' 카테고리의 다른 글
| 비전공에서 취업까지!! [12화] CSS 첫 도약! 난 미적 감각이 정말 없는데... -입니다.- (0) | 2023.02.08 |
|---|---|
| 비전공에서 취업까지!! [11화] front 실기 40% 필기40% 태도점수20%!! -입니다.- (0) | 2023.02.06 |
| 비전공에서 취업까지!! [9화] front 햇빛 이 선명하게 나뭇잎을 핥고있었다 를 정자로 여기에 기재하시오 -입니다.- (0) | 2023.01.31 |
| 비전공에서 취업까지!! [8화] front 자폭버튼을 눌렀습니다 5초뒤 폭팔합니다!!! -입니다.- (0) | 2023.01.27 |
| 비전공에서 취업까지!! [7화] front 앞으로 정말 계속 쓸 코드인데... -입니다.- (2) | 2023.01.25 |
