안녕하세요 길잃은 문돌이 입니다. 오늘은 비전공자 코딩독학 #8에 이어서, 또다시 html 기초편, html 기본편을 학습해보도록하죠. 아니, 제가 학습하는거죠. 단순한 기술 블로그가 되기 보다는 제가 학습하는 것들을 조금 기록하고 싶다는 생각에 시작한것이기 때문에, 강의를 들으면 충분히 이해할 수 있는 부분이고, 더 심도깊은 내용을 알기 위해서는 다른 기술 블로그들을 보시는게 좋습니다.
https://lostedhelloworld.tistory.com/23
비전공자 IT 코딩독학 #8 : HTML 기초 2편 기본태그 및 구조
안녕하세요 길잃은 문돌이입니다. 오늘은 저번의 비전공자 IT 코딩독학 #7 이후의 몇가지 제가 오늘 배운 것들을 하나하나 작성하고자 합니다. 오늘 기본적으로 HTML기초 2편에는 1편의 연장선으
lostedhelloworld.tistory.com
목차
1. Table(표) 이해하기
테이블의 구조 , td/ tr/ colspan 등등
2.form 태그 이해하기
input, radio,option등등
비전공자 IT 코딩독학 HTML 3편 (table, form 이용하기)
1. table 태그의 이해와 실행
Table이란 표를 나타내는 태그이며, 간단한 실습을 한다면
<html>
<body>
이름 성별 주소
최진혁 남 청주
</body>
</html>
→ 이렇게 코딩을 하면, "이름 성별 주소 최진혁 남 청주" 한줄로 나온다
1) 표에 데이터를 입력하기.
표를 각각의 데이터를 입히기 위해서, <td> 태그를 이용한다.
<html>
<body>
<td>이름</td> <td>성별</td> <td>주소</td>
......
</body>
</html>
→ 이렇게 해도 "이름 성별 주소 최진혁 남 청주" 한줄로 나온다.
2) 행과 열 나누기
행을 기준으로 <tr>이라는 태그로 묶어준다.
<tr>이란, table row의 의미로 표의 행을 의미한다.
<html>
<body>
<table>
<tr>
<td>이름</td> <td>성별</td> <td>주소</td>
</tr>
<tr>
......
</tr>
</table>
</body>
</html>
→ 이렇게 <tr>태그를 넣고 마지막으로 이 태그가 테이블이라는것을 알려주기 위해서 <table> 태그로 감싸면
이름 성별 주소
최진혁 남 청주
열, 행으로 나눠지게 된다.
3)테이블 형태로 구분짓기
css를 통해서 꾸밀 수 있는데, html을 통해서 한다면,
<table boarder = "2"> 로
boarder라는 속성을 이용한다면,
| 이름 | 성별 | 주소 |
| 최진혁 | 남 | 청주 |
의 형태로 나온다.
즉, 기본 구조는
<body>
<table>
<tr>
<td>
</tr>
</table>
</body>
순으로 하게 되면 테이블의 형태가 나온다.
*테이블의 의미론적 태그
| 이름 | 성별 | 주소 |
의 경우는 테이블의 값이 아닌, 이름이기 때문에, <thead>로 분류가 되며,
<thead>에서의 값은 , 단순한 데이터가 아니기에 <th>로 구분하게 된다면, 진하게 표시되며, 첫번째 행을 의미한다.
태그는 정보를 정의하는 역할이기 때문에 웹페이지를 조금 더 가치있게 만들기 위해서는 문서를 구조화 하고 잘 표현해야한다.
| 길잃은문돌이 | 남 | 부산 |
테이블에서 본문(데이터)에 해당하는 것은 <tbody>로 분류 되며,
3줄 4줄 이상일때는,
마지막 줄은 <tfoot> 으로 분류하여 나눌 수 있다.
4) 테이블의 병합 방법
| 이름 | 성별 | 주소 | 회비 |
| 문돌이 | 남 | 부산 | 1000 |
| 문순이 | 여 | 500 | |
| 합계 | 1500 | ||
이런식으로 병합을 원한다면, 병합을 원하는 첫번째 부분 문돌이가 있는 <tr>에서 <td rowspan= "2">부산</td>를 넣으면 된다.
→rowspan = "2" 이라는것은 행 2개를 병합한다.
이와 같이 <td colspan = "3">합계</td>로 넣는다.
→ colspan= "3" 이라는 것은 열 3개를 병합하는 것이다.
-----------------------------------------
2. form태그의 구조와 이해
사용자가 입력한 정보를 서비스 제공하는 서버에 전송하고, 입력하거나 클릭, 선택하여 서버와 통신을 하기 위함이다.
1) form 태그 내 하위 태그
<input>
사용자로 부터 정보를 입력 받을 수 있는 태그
속성 :
<input type="text">
일반적 텍스트 상자가 생김.
<input type = "password">
텍스트 상자가 생기는데, 패스워드의 입력으로 보안을 위해서 *로 표시
<input type = "submit">
"제출"이라는 클릭 할 수 있는 버튼이 생김
type 이외의 속성
value = ""
기본값을 만든다
ex ) <input type= "text" name="id" vaule="아이디를 입력하세요">
2) form 태그 의 구조
<form action = " 서버 명 ">
아이디 : <input type = "text">
비밀번호 <input type = "password">
</form>
form 의 속성의 action은 사용자가 입력한 정보를 어디로 보낼지를 주소를 작성 하는데
맹점은 어떠한 이름으로 전송이 될지 애매하다. 이런걸 타파하기 위해서,
아이디정보 (text 속성)
비밀번호 정보(password 속성)
주소정보(text 속성)
>> 아이디와 주소의 속성이 같기에 어떠한 정보가 어떠한 정보인지 모르기 때문에
name이라는 속성을 하나 더 준다.
<input type = "text" name ="id">
<input type = "text" name= "address">
<input type = "text" name= "" >
가 기본이라는걸 생각하자!
text와 관련된 내용
여러줄을 입력하고 싶은 입력줄을 생성하고 싶을때,
<textarea> 태그
(input 속성이 아님!)
속성:
cols, rows
ex) <textarea cols="50" rows="2"> 기본값 </textarea>
3) 콤보박스 이용해보기(option 태그)
<option> </option>
option 태그를 사용하되, select 태그로 묶는다.
<select>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<select name="color"> 로 지정해야지
서버로 전송할때 지정되어서 저장된다.
<select name= "color">와 <option value= "red"> 를 하게 되면
서버에 전송될때 color = red로 전송이 되기에
콤보박스의 기본구조는
<select name= "">
<option value= ""> xxx </option>
이 기본 구조이다.
select의 속성에는 multiple이 있는데,
<select name = "" multiple>을 하게 되면 콤보박스 모두 나타나게 되고, 복수 개의 선택할 수 있다.
4) 라디오 버튼 , 체크 박스를 이용하기
<input type = "radio>
<input type = "radio>
<< 이러한 버튼이 나오는데, 여러개의 라디오 버튼은 동시에 눌러지게 세팅이 되는데,
<input type = "radio" name= "color">
<input type = "radio" name= "color">
와 같이 동시에 name의 속성을 둔다면, 하나의 버튼만을 클릭하게끔 되어있다.
성별 같은 경우 남 , 여 같은 성별을 가질 수 없기에, name= "gender"로 묶는게 좋다.
또한, 전송을 할때 정보를 주기 위해서
<input type = "radio" name= "color" value="red">
<input type = "radio" name= "color" value= "blue">
가 기본 구조이다.
체크 박스의 경우,
라디오 버튼과 같이
<input type = "checkbox" name= "size" value = 95>
<input type = "checkbox" name= "size" vaule = 100>
<< 이러한 네모난 형태가 나온다.
여러개의 선택이 가능하게 된다.
또한, checked 속성을 통해서 라디오버튼과 체크박스가 기본적으로 클릭이 되어있게끔 설정이 가능하다.
5) 버튼 구현해보기
제출하는 버튼은 다르다는것을 알아야한다.
<input type = "submit">
<< 이러한 버튼 모양이 나오는데,
<input type = "submit" value ="메롱">
<< 이렇게 버튼의 이름을 바꿀 수 있다.
<input type = "button">
<< 일반적인 버튼은 UI만 따온다는 것!
*value = 로써, 버튼 안에 글자를 넣을 수 있다.
<input type ="reset">
<< reset은 초기화 버튼을 생성 가능!
6) hidden 태그의 의미와 실행
서버로 전송을 해야하는데 , UI가 필요없거나 몰래 서버로 전송해야하는 경우
<input type = "hidden" >이다.
텍스트 필드가 아닌, 버튼이 아닌, 보이지 않는 상태에서 보내는 역할을 한다.
7) 레이블 태그의 이해
ID : <input type = "text" name = "ID" > 에서
<label> ID </label> : <input type ="text" name= "ID"
1번째 방법: label의 속성 중 for 를 사용해서 레이블의 정보를 줄 수 있다.
<label for = "Id_txt"> ID</label>:
<input id= "id_txt" type = "text" name= "id">
가 된다면,
ID :
가 될 텐데,
앞에 나와있는 ID가 label로 둘러 쌓여있고, 속성중 for가 id_txt로 되어있고,
텍스트 상자 또한 id가 id_txt 가 되어있기 때문에 ID를 클릭만 해도 레이블이 텍스트상자 ID와 같기 때문에 키보드 커서가 텍스트 박스로 간다.
2번째 방법:
<label>ID:
<input id= "id_txt" type = "text" name= "id">
</label>
2번째 방법을 써도 레이블 ID를 클릭해도 키보드 커서가 텍스트 상자로 옮겨진다.
8) method 속성의 이해 (form태그 내 삽입)
지금까지 서버로 전송하는 방법은 get을 사용한것이다.
이제는 get과 post를 설명 하는 내용이며, 서버쪽 기술의 이해가 조금 필요하다.
<form action= " www.메롱.php">
<input type="text" name = "id">
<input type ="submit">
</form>
을 클릭 하게 되면,
ww1. 메롱.php?id= xxxx로 보내게 된다.
get으로 하는 방식이
ww1.메롱 .php?id= xxx 처럼 id와 비밀번호가 노출이 된다.
post로 서버로 전송을 하게 되면,
ww1.메롱.php 의 그대로 url이 아닌, 데이터를 숨겨서 전송하게 된다
그 방법은
<form action ="www.메롱.php" method = " " >
method 에는 get방식 또는 post 방식으로 나눠져있다.
9) 파일 업로드 (input 태그의 속성)
<form action= "www. 메롱 .php">
<input type="file">
<< 이렇게 파일 업로드 형태가 생긴다.
선택한 파일을 보내기 위해서는
<input type="submit"> 이 필요하며,
<form action ="www. 메롱.php" method= "post" enctype = "multipart/form-data">로 해야한다.
여기서 enctype="multipart/form-data" 는 약속을 한 것이기 떄문에 그냥 알자!
파일 뿐 아니라 다른 아이디랑 ID와 패스워드를 함께 받고 싶다면
<input type="text name="id">
<input type="password name="pwd">
를 함께 코드에 넣으면 된다
즉,
<form action="www.메롱. php" method="post enctype="multipart/form-data">
<input type="text" name="id">
<input type="password" name="pwd">
<input type="file" name="portfolio">
</form>
으로 하면, 메롱 php에 id, pwd , portfolio의 정보가 함께 간다.
오늘 하루 태그에 대해서 조금 공부를 했는데 아직 제대로 사용해본 적도 없고, 서버와 통신하는 부분 method 속성과 action속성의 경우 조금 어렵긴 해도 추후에 알고 나면 더 넓게 보이지 않을까 싶다.
'문돌이의 Hello, World! > 리얼 컴맹의 왈가왈부' 카테고리의 다른 글
| 비전공자 IT 코딩독학 #11 : CSS 기초 1편 선택자의 종류 (0) | 2022.07.10 |
|---|---|
| 비전공자 IT 코딩독학 #10 : HTML 기초 4편 HTML5 속성 (0) | 2022.07.08 |
| 비전공자 IT 코딩독학 #8 : HTML 기초 2편 기본태그 및 구조 (0) | 2022.07.04 |
| 인생의 목적 / 나만의 가치관과 삶의 모토 정의하기 (0) | 2022.07.02 |
| 비전공자 IT 코딩독학 #7 : HTML 기초 1편 기본 태그 (0) | 2022.06.30 |