☀️ [UIUX] 1216 HTML + CSS Coding, 코딩 중급 14
✏️ 2024. 12월 16일 / html + css 언어, 코딩 중급 14
⛄ 테이블 태그를 사용하여 표를 만들어봅시다!
<body> <table> <caption> 6월 단과 시간표 </caption> <colgroup> <col span="1" width="55px" /> <col span="1" width="50px" /> <col span="2" width="80px" /> <col span="1" width="80px" /> <col span="1" width="80px" /> <col span="2" width="80px" /> <col span="1" width="80px" /> <col span="1" width="80px" /> <col span="1" width="80px" /> <col span="1" width="80px" /> <col span="2" width="80px" /> </colgroup> <!-- 1번째 줄 --> <tr class="one"> <td rowspan="9">야간</td> <td>18:00</td> <td colspan="2" rowspan="5">수(상)</td> <td rowspan="5">미적분</td> <td></td> <td colspan="2" rowspan="4">수1 기초</td> <td rowspan="4">수(상)</td> <td rowspan="9">생명과학</td> <td rowspan="3">수2 기초</td> <td></td> <td colspan="2"></td> </tr> <!-- 2번째 줄 --> <tr class="two"> <td>18:30</td> <td></td> <td rowspan="7">영어고등</td> <td colspan="2"></td> </tr> <!-- 3번째 줄 --> <tr class="last"> <td>19:00</td> <td rowspan="7">생명과학</td> <td colspan="2"></td> </tr> <!-- 4번째 줄 --> <tr> <td>19:30</td> <td></td> <td colspan="2"></td> </tr> <!-- 5번째 줄 --> <tr> <td>20:00</td> <td colspan="2"></td> <td></td> <td></td> <td colspan="2"></td> </tr> <!-- 6번째 줄 --> <tr> <td>20:30</td> <td colspan="2"></td> <td colspan="2"></td> <td colspan="2"></td> <td></td> <td colspan="2"></td> </tr> <!-- 7번째 줄 --> <tr> <td>21:00</td> <td colspan="2"></td> <td></td> <td colspan="2"></td> <td></td> <td></td> <td colspan="2"></td> </tr> <!-- 8번째 줄 --> <tr> <td>21:30</td> <td colspan="2"></td> <td></td> <td colspan="2"></td> <td></td> <td></td> <td colspan="2"></td> </tr> <!-- 9번째 줄 --> <tr> <td>22:00</td> <td colspan="2"></td> <td></td> <td colspan="2"></td> <td></td> <td colspan="2"></td> <td colspan="2"></td> </tr> </table> </body>
⛄ 표의 css 속성에 대해 알아봅시다.
☁️ table-layout
컨텐츠에 맞게 셀 넓이를 지정할 수 있습니다.
셀의 width 값을 지정하면 해당 크기에 맞게 화면에 표시 됩니다.
하지만 영문일 경우 여백없이 길게 입력하면 셀의 width 값은 무시되고 영문 내용은 한 줄로 길게 표현됩니다.
만약 width 값을 고정하여 칸의 넓이를 적용하려면 table-layout 이라는 속성을 적용할 수 있습니다.
속성은 table 태그에 적용합니다.
table-layout을 적용하면 칸의 넓이가 고정되면서 길게 작성된 영문이 옆 칸을 뚫고 나갈 수 있습니다.
이때에는 word-break 속성을 지정하여 칸에 맞춰 영문이 아래로 내려오도록 할 수 있습니다.
해당 속성도 table 태그에 선언합니다.[속성값] - fix : 칸에 적용한 width 값을 고정합니다. 한 줄로 영문이 길게 들어가더라도 무시하지 않습니다. - auto : 기본값으로, 내용이 띄어쓰기 없이 영문 한 줄로 길게 들어가면 width 값을 무시합니다.☁️ word-break - break-all : 문자가 칸에 맞춰 아래로 내려옵니다. - keep-all : 문자가 칸을 벗어나더라도 유지합니다.
☁️ vertical-align
표를 작성하면 글자는 칸의 세로 중앙에 위치합니다.
만약 이 글자들의 정렬을 top/middle/bottom 위치로 보내고 싶다면 vertical-align 을 사용합니다.
(가로로 정렬하고 싶을 경우에는 text-align 을 사용합니다.)
해당 속성도 table 태그에 선언합니다.[속성값] - baseline : 셀의 글자 기준선에 맞춰 글자의 기준선을 맞춥니다. - top : 패딩이 있을 경우 패딩 영역을 제외한 칸의 윗쪽에 글자를 맞춥니다. - bottom : 패딩이 있을 경우 패딩 영역을 제외한 칸의 아래쪽에 글자를 맞춥니다. - middle : 기본값으로, 칸의 세로 중앙에 글자를 나타냅니다.
html<table> <caption> table-layout </caption> <tr> <td> lsdkjfhlsdkfjhsldfkjsdfhlskdfjsdhflskjfhsldfkjsdhflskdfjhsldfksjfhslkdfjhs </td> <td>내용1</td> </tr> <tr> <td>내용2</td> <td>내용3</td> </tr> </table> <table> <caption> vertical-align </caption> <tr> <td class="cell1">top</td> <td class="cell2">middle</td> <td class="cell3">bottom</td> </tr> </table>
css
⛄ 입력 양식 태그
☁️ form
여러 입력 양식을 하나로 묶어주는 태그 입니다.
예를 들어 로그인이나 회원가임, 배송지 입력과 같은 다양한 입력 양식들을 묶어서 서버로 보내는 태그 입니다.
form 태그에는 서버에 내용을 보내기 위해 다양한 속성들을 함께 사용합니다.
form 태그는 block 속성입니다.[속성] - name : 폼 양식의 이름을 지정합니다. 한 문서 안에 여러개의 form 태그가 있을 때, 폼들을 구분하기 위해 사용합니다. class 이름을 작성하듯이 지어주면 됩니다. - action : 입력 데이터들의 전달 위치를 지정합니다. 보통 서버 주소가 들어가고, 만약 서버가 준비되지 않았다면 임시경로(#)를 작성합니다. - method : 입력 데이터를 전달하는 방식 입니다. 1. get : 주소 표시 줄에 사용자가 입력한 내용이 그대로 표시됩니다. 256byte~4096byte까지의 데이터만 서버로 전송 할 수 있습니다. 보안에 취약하나, 서버로 전송하는 속도가 빠릅니다. 보통 광고성 수신 문자 같은 내용을 보낼 때 사용합니다. ★ 2. post : 대부분의 방식에 사용되며 사용자의 입력을 표준 입력으로 전송하여 입력 내용의 길이에 제한 받지 않고 사용자가 입력한 내용을 주소 표시줄에 노출하지 않습니다. [기본형] <form name="폼이름" action="서버주소" method="post" id="아이디 값"> 입력 양식들 </form>
☁️ label
폼 요소에 레이블(이름표)을 붙일 때 사용하는 태그입니다.
input 태그끼리 서로 구분하는 용도로 사용됩니다.
for 속성은 해당 폼 요소를 서버로 넘길 때 어떤 input과 세트인지 알려주는 역할을 합니다.
또한 브라우저에서 세트인 input을 구별할 때에도 사용합니다.
이때 for에 붙인 이름과 input에 있는 name 속성값이 동일해야 합니다.
label 태그는 inline 속성입니다.[기본형] 1. <label for="폼 요소이름"> 레이블 텍스트(폼요소 이름) <input type="값" name="폼 요소이름" /> </label> 2. <label for="폼 요소이름"> 레이블 텍스트(폼요소 이름) </label> <input type="값" name="폼 요소이름" />
☁️ fieldset, legend
form 양식을 만들 때 각 요소들을 그룹으로 묶어주는 fieldset 태그와 해당 영역의 이름을 붙여주는 legend 태그가 있습니다.
예를 들어 쇼핑몰 사이트의 주문서 양식을 만들 때 작성하는 폼에서
'사용자 정보'와 '배송지 정보'를 구분해 표시하면 입력하기 편하고 깔끔하게 정리할 수 있습니다.[기본형] <fieldset> <legend>사용자 정보</legend> </fieldset>
⛄ 다양한 input 태그
☁️ input
input 태그는 사용자의 정보를 입력 받기 위해 사용하는 태그로 type 속성에 의해 모양과 기능이 결정됩니다.
input 태그는 inline 속성을 가지며,
박스 형태의 type 들은 inline-block의 속성을 가집니다.[기본형] <input type='기능' name='폼요소의 이름(label과 연결)' id="아이디명" />
☁️ input의 type 속성값1. type='hidden' : 화면의 폼에서는 보이지 않지만, 사용자가 입력을 마치고 폼을 서버로 전송할 때 함께 전송되는 요소 입니다. 사용자가 알 필요는 없지만, 관리자가 알아야 하는 내용이 있을 경우에 사용합니다.2. type='text' : 가로로 짧은 글을 입력할 때 사용하는 입력창 입니다. 아이디, 이름, 주소와 같은 내용을 입력 받을 때 사용합니다.
3. type='password' ★ : 텍스트 필드와 모양은 같지만 사용자가 입력하면 특수문자로 출력됩니다. 단, 패스워드 필드가 비밀번호 양식이 맞는지 확인해주지는 않습니다. 단순히 글자를 특수기호로 변경해주는 역할만 합니다.
4. type='search' : 검색 필드를 만들 때 사용합니다. 예전에는 텍스트 필드를 사용했지만, html5에서 필드들이 세분화 되면서 검색어를 입력할 때 search를 사용할 수 있게 되었습니다. 검색 키워드를 입력하면 키워드를 지울 수 있도록 x 아이콘이 함께 표시됩니다.
5. type='url' : 사용자로부터 웹 주소를 입력 받을 때 사용합니다.6. type='email' ★ : 메일 주소를 입력할 경우 email 필드를 사용하면 실제 폼 양식이 동작했을 때 이메일 양식에 맞게 작성되었는지 브라우저 자체에서 체크한다.
7. type='tel' ★ : 사용자가 입력한 정보를 일반 텍스트가 아닌 전화번호로 인식하며 바로 전화번호를 입력할 수 있도록 숫자 키패드를 보여줍니다. pc 화면에서는 일반 텍스트 필드 형태로 보이지만, 모바일 환경에서는 숫자 키패드 형태로 자동 전환되며 전화를 걸 수 있도록 해줍니다.8. type="number" min="최소값" max="최대값" step="증감값" ★ : 숫자 생성 양식을 만들 때 사용합니다. min은 최소값을 말하고 max는 최대값을 말합니다. step은 증가하거나 감소하는 값으로 여기에 쓰인 숫자만큼 증가하거나 감소합니다.
9. type="range" min="최소값" max="최대값" step="증감값" : 슬라이드 막대를 움직여 값을 입력하는 창 입니다.
10. type='radio' name='폼 요소 이름' cheaked : 라디오 버튼은 짧은 항목에 대한 선택이 필요할 때 주로 활용되며 반드시 한가지 항목만 선택해야 할 때 사용합니다. 라디오 필드에서는 name 값이 같아야만 같은 그룹으로 인식하여 한가지만 선택하게 만들 수 있습니다. cheaked 속성을 사용하면 방문자의 편의를 위해 미리 항목에 체크된 상태를 보여줄 수 있습니다.
11. type='checkbox' checked ★ : 체크 박스는 여러 항목을 다중 선택할 때 주로 사용합니다. 라디오 박스와 마찬가지로 checked 속성을 이용하여 방문자의 편의를 높일 수 있습니다.
12. type='color' : 색상 선택 양식을 만듭니다. 선택 시 색상 선택 화면이 나타나고 색상을 선택할 수 있습니다.
13. type='date' ★ / type='month' / type='week' : 생년월일과 같이 년/월/일에 대한 정보를 달력을 통해 선택할 수 있습니다. month = 월과 연도를 선택할 수 있습니다. week = 연도와 주를 선택할 수 있습니다.14. type='time' / type='datetime' / type='datetime-local' ★ : 시간을 지정할 때 사용하는 타입입니다. 시간만 지정할 경우에는 time을 사용하고, 날짜와 시간을 함께 사용할 경우 datetime, datetime-local 을 사용합니다.
15. type='submit' / type='reset' : 사용자가 입력폼에 입력한 내용을 서버로 전송할 때 submit 을 이용할 수 있습니다. 사용자가 입력폼에 입력한 내용을 초기화 할 경우에는 reset 을 이용합니다. 두가지 모두 버튼 형태로 출력됩니다. 버튼 이름을 바꾸고 싶을 때에는 value 속성을 사용합니다.
16. type='file' accept='파일형식1, 파일형식2' multiple ★ : 사용자가 가지고 있는 특정 이미지나 파일들을 첨부할 때 사용한다. 만약 사용자가 첨부할 파일의 확장자를 제안하고 싶다면 accept 속성으로 파일을 제한 할 수 있고, multiple 파일을 사용하면 파일을 여러 개 첨부할 수 있다.
🗨️ 손으로 직접 공부한 내용을 바탕으로 작성한 글이랍니다 !
✖️
앞으로도 열심히 공부해서 많은 내용을 공유하겠습니다 :)
