※블로그 내용은 저 '개인'의 기준으로 더 필요하다고 생각되는, 또는 한번 더 짚어보는 의미로 직접 필기한 것입니다. 수희 혼자 볼라고 쓴 블로그
1.웹어플리케이션이란>
★수희꺼 vscode 열어보기
css 태그를 중첩적으로 선택 사용.
부트스트랩 = 임티 넣는 곳 vscode 참조. 자바스크립트
2. form태그>
정보를 제출할때 씀 ★수희꺼 vscode 열어보기
소통의 가장 기본적인 태그. 로그인 등 했음.
3.form태그의 action과 method속성>
★수희꺼 vscode 열어보기
- 액션:어디로 요청을 보내야 되는가? (ex: action="./result.html")
- 메소드: 폼태그 제출시, 어떠한 방식으로 폼태그정보를 전달하는지?
메소드 종류: get / post / put / delete (ex: method="get") - get 메소드: url, ? , &, name=사용자가 입력한 값.서버에 의해 데이터 수집.
- post 메소드: 데이터 전달됨.
4.사용자 입력 받는 input태그와 버튼>
★수희꺼 vscode 열어보기
-
input에는 type과 name 속성이 있어야 함.
-
name 속성은 폼태그를 통해서 인풋이 제출 되었을때, 인풋태그 담겨진 값을
확인하는 구분자로써, 사용되기 때문에 웹사이트 구조에 따라 필요하지 않을수있다.
일반적으로는 name은 정보를 담고 있는 역할을 하기 때문에 필수적인 속성이다. -
input 태그는 타입이라는 속성을 통해서 어떠한 값을 주느냐에 따라
여러가지 형태로 사용자의 값을 받을수 있다. (가장 기본적 형태는 text임)
value속성에 사용자가 입력한 값이 할당됨.
placeholder 속성은 예를들어 id를 입력해 주세요라고 input에 미리써놓기 가능.
예시:<input type="password" name="" placeholder="pw를 써"> -
input type종류는 text, password, email, button, submit 등 다양하다.
<input type="submit" value="로그인" />슬래시 / 하기.
<button type="submit">로그인</button>/버튼 닫는태그 넣기.
정답은 없지만, 여러방식이 있다.
5.사용자 입력을 받는 input태그와 버튼>
★수희꺼 vscode 열어보기
선택 옵션 인풋.
멀티플 넣으면 스크롤 생김.컨트롤클릭 다중선택 가능
```<select name="color" multiple>
<option value="red">빨간색</option> 밸류값 넣어야 url에 red로감.
<option value="blue">파란색</option>
<option value="yellow">노란색</option>
<option value="green">초록색</option>
</select>
<input type="submit" value="제출">```ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
※영상볼땐 메모장 필기만 하고, 코드는 영상 끝나고 한꺼번에 쳐
6.다중선택 위한 checkbox와 단일선택을 위한 radio>
★수희꺼 vscode 열어보기
7.태그를 설명해주는 label태그>
★수희꺼 vscode 열어보기
for속성 혹은 태그로 감싸진걸로 2가지 표현 가능.
8.긴 문장을 입력받는 textarea태그>
★수희꺼 vscode 열어보기
resize:none; 줘야 사용자가 텍스트박스 크기조절 못함.
9.사용자 몰래 값을 전달하는 input태그의 hidden속성>
마지막 form태그. 상단의 검색 기능, 동일한 폼이 여러개 있거나 혹은 이폼을 제출하면서 서버가 알아야하는 정보가 있다면 히든으로 정보를 부가적으로 전달 해 줄수 있다. 히든으로 웹사이트 분석할때 사용, 검색 많이 되는걸로 ui를 만들어 줄 수 있다. 유지 보수
10.이모티콘 같은 문자는 svg태그>
<input type="button" value="button"> 는 밸류 속성통해 값 전달,
<button>버튼</button>는 다른 태그가 들어가도 전부 동작.
버튼 태그에 이미지가 들어가도 된다. 이모티콘이라든지?
벡터는 안깨지고 비트맵은 해상도가 깨진다.
임티는 ★부트스트랩★ 사이트가 짱. 각 임티의 svg태그 복붙.
11.i태그의 재활용 fontwesome,bootstrap>
유용한 사이트 소개.
css 등은 ★폰트어썸★사이트가 짱 ㅋ
폰트 어섬 사이트에서 자바스크립 css 파일 다운 받을수 있다.
링크로 코드 쓰면 사이트 망하면 사라질수 있음.
헤드 태그 안에 <link rel="stylesheet" href="css 등의 url주소"> 불러온다음
바디 태그 안에 임티는 i태그로 불러옴.
<i class="임티 css불러온 이름"></i>
12.head 태그를 구성하는 요소들>
- css 파일들을
<Link>로 - 스타일 태그
- title 태그
- meta태그 웹사이트 정보를 담고 있음. 다양한 사용법 있다.
일반적 설명 , 어떤 키보드, 누가 만들었는지, 언어 등 코드로 설명 - favicon : ico 파비콘 링크로 만듬.
13~15. 인스타그램 회원갑 레이아웃>
★클론코딩 인스타그램 폴더
reset css 검색. https://abcdqbbq.tistory.com/9
css 초기화 되는 거 맨위에꺼 드래그 해서 reset.css에 복붙 했음
max-width는 가로길이의 최대값. (min-width 최소값)
i태그로 페북 아이콘 넣음.
16.유효성 검사>
맞는 양식에 넣었는지 확인
type 속성에 이메일인지 패스워드 인지 넣구,
-
input 속성중에 required 속성은 value 부여 안해도 됨.
제출하려 할때 필수로 적게함.
★required minlength="8" 비밀번호 최소 8글자 이상 쓰게함. -
자바스크립트 사용을 권장하고 간단한건 html으로도 가능..
