2회차 강의

1. Label

ex) 아이디 비밀번호 정보 입력등등

<label> </label> 로 사용

1.기본적인거

이름

<label for="name">이름</label>
<input type="text" placeholder="이름을 입력하세요." id="name">

-for 이랑 id를 연결해서 사용하기
-placeholer는 설명같은느낌?

2.조건부여

이름

<label for="name">이름</label>
<input type="text" placeholder="이름을 입력하세요." id="name" required minlength="2" maxlength="8">

-required로 요구조건 부여 
-minlength 최소글자 수
-maxlength 최대글자 수

3.이메일 , 비밀번호 , 숫자

이메일

비밀번호

숫자

<label for="mail">이메일</label>
<input type="email" placeholder="이메일을 입력하세요." id="mail" required>
<label for="pw">비밀번호</label>
<input type="password" placeholder="최소 6글자,최대 12글자" id="pw" required minlength="10" maxlength="15">
<label for="num">숫자</label>
<input type="number" id="num" placeholder="숫자만 입력" min="10" max="40" step="5">

-mail은 @값을 요구조건으로 들어감
-pw는 알아서 ***처럼 나옴
-num은 숫자만 입력 가능 / min 은 숫자의최소치 , max는 최대치, step은 증가단위

4.파일업로드

파일업로드

<label for="upload">파일업로드</label>
<input type="file" id="upload" accept="image/png, image/jpg, image/gif">

-파일 업로드 하는거
-accept로 파일형식 확장자 설정

5.form으로 묶기 (회원가입 등)

이름
이메일
비밀번호
숫자
파일업로드
제출

 <form method="post">
<label for="name">이름</label>
<input type="text" placeholder="이름을 입력하세요." id="name" required minlength="2" maxlength="8"></br>
<label for="mail">이메일</label>
<input type="email" placeholder="이메일을 입력하세요." id="mail" required></br>
<label for="pw">비밀번호</label>
<input type="password" placeholder="최소 6글자,최대 12글자" id="pw" required minlength="10" maxlength="15"></br>
<label for="num">숫자</label>
<input type="number" id="num" placeholder="숫자만 입력" min="10" max="40" step="5"></br>
<label for="upload">파일업로드</label>
<input type="file" id="upload" accept="image/png, image/jpg, image/gif"></br>
<button type="submit">제출</button>
</form>

-전체를 form으로 감싸고, 전에 배운 button으로 제출버튼 만들기
-중간중간</br>은 무시하기( 줄바꿀려고 적어놓음 )

6.CheckBox (다중선택)

한국

일본

중국

<label for="n1">한국</label>
<input type="checkbox" id="n1" name="country" value="한국">
<label for="n2">일본</label>
<input type="checkbox" id="n2" name="country" value="일본">
<label for="n3">중국</label>
<input type="checkbox" id="n3" name="country" value="중국">


-다중선택가능
-name값이랑 value값으로 서버에 보내고 그러고 한다는데 솔직히 잘이해안됨,
쨋든 둘다필요하다함

7.radio (하나만 선택)

한국

일본

중국

<label for="n1">한국</label>
<input type="radio" id="n1" name="country" value="한국" checked>
<label for="n2">일본</label>
<input type="radio" id="n2" name="country" value="일본">
<label for="n3">중국</label>
<input type="radio" id="n3" name="country" value="중국">

-위에꺼랑 다르게 하나만 선택할땐 checkbox 대신 radio사용
-checked 해놓은 항목은 선택된상태로 시작

8.Content ( 고객센터 or 말쓰는곳 만드는거 )

문의내용

<label for="content">문의내용</label>
<textarea id="content" cols="40" rows="8"></textarea>

-cols 랑 row 로 빈네모박스 크기조절

9.Select ( 항목중에 한개선택하는거 )

직업을 선택해 주세요. 학생 회사원 기타

  <select name="job">
	<option selected disabled>직업을 선택해 주세요.</option>
	<option value="학생">학생</option>
	<option value="회사원">회사원</option>
	<option value="기타">기타</option>
	</select>
    
    -selected 로 미리 선택된값 만드는거,
    -disabled 로 선택불가값 만드는거
    

10. table 표그리기(기본형)

상품 정보

상품	색상	가격
맥북 프로 16인치	그레이	3000원
아이패드 프로 12인치	레드	1000원
아이패드 프로 12인치	블루	1000원

 <table>
	<caption>상품 정보</caption>
	<thead>
		<tr>	
			<th>상품</th>
			<th>색상</th>
			<th>가격</th>
		</tr>
	</thead>
<tbody>
		<tr>
			<td>맥북 프로 16인치</td>
			<td>그레이</td>
			<td>3000원</td>
		</tr>
		<tr>
			<td>아이패드 프로 12인치</td>
			<td>레드</td>
			<td>1000원</td>
		</tr>
		<tr>
			<td>아이패드 프로 12인치</td>
			<td>블루</td>
			<td>1000원</td>
		</tr>
	</tbody>
</table>
-먼가 병합하는 부분이 수업내용에 더있는데 여기서 하니까 오류가뜸,,

표 병합

상품 정보

상품	색상	가격
맥북 프로 16인치	그레이	3000원
아이패드 프로 12인치	레드	1000원
블루	1000원
총 가격	5000원

 <table>
<caption>상품 정보</caption>
<thead>
	<tr>					
       <th>상품</th>
		<th>색상</th>
		<th>가격</th>
	</tr>
</thead>
	<tbody>
		<tr>
			<td>맥북 프로 16인치</td>
			<td>그레이</td>
			<td>3000원</td>
		</tr>
		<tr>
			<td rowspan="2">아이패드 프로 12인치</td>
			<td>레드</td>
			<td>1000원</td>
		</tr>
		<tr>
			<td>블루</td>
			<td>1000원</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td colspan="2">총 가격</td>
			<td>5000원</td>
		</tr>
	</tfoot>
</table>
-rowsapn은 위에 보이다싶이 위아래병합
-colspan은 좌우
-위에 예시로 보이는 표가 깨지는 이유는 모르겠음...흠

홈페이지

상단 본문 하단 ( 3가지로 구성 )

상단

• 메뉴1
• 메뉴2
• 메뉴3

<header>
<h1>
 	<a href="#">
		<img>
	</a>
<nav>
   		<ul>
	   		<li><a href="#">메뉴1</a></li>
	 		<li><a href="#">메뉴2</a></li>
			<li><a href="#">메뉴3</a></li>
		</ul>
	</nav>
</header>
  -머리부분
  

본문

Service

Portfolio

Article title

aosdbnasiodnaisobiosbviov

  <main role="main">

	<section>
		<h2>Service</h2>
	</section>
	<section>
		<h2>Portfolio</h2>
	</section>


<article>
	<h2>Article title</h2>
	<p>aosdbnasiodnaisobiosbviov</p>

</article>


</main>
  -main총 본문 
  -section으로 구분가능 
  -article은 쉽게생각하면 기사 신문등
  

하단, 그외

  	<aside></aside> -본문에 안드가는 사이드
	<footer></footer> - 사업자번호 주소 이런 짜잘한 그런거 드가는거
	<div></div>   - 임의 작은 구역들(ex>네이버 부동산 도면)
  	<form></form> - 사용자한테 정보를 받아내는거(label,input이랑 함께사용)

항상 크로스브라우징 생각하고 명령어 검색해보기

caniuse

w3school 태그리스트

w3school

여기까지가 1시간33분 까지의 내용

  -----------------------------------------------------

  

2.학습내용중 어려웠던 점

  현재로썬 velog에 내가 배웠던걸 포스트하는 마크다운이랑 hmtl이 섞이고 
  가끔씩 오류뜨고 힘들다. 문법을 작성할때 칸띄우기 띄어쓰기 하는게 아직까지 복잡하다
  

3. 해결방법

  구글링하면 velog 마크다운 사용법이 나오긴하는데 아직까지 미숙하고,
  hmtl도 같이 보면서 약간씩 헷갈린다.
 
  

4. 소감

  가장크게 느낀부분은 엄청 복잡할줄 알았는데 간단하고, 간단할줄 알았는데 
  엄청복잡하단 느낌이 공존하는중, ㅋㅋㅋㅋ 배우기 어렵게만 느껴지는것은 
  아니여서 먼가 재미를 붙이는중인듯