입력양식 태그 정리

입력양식은 사용자에게 입력받는 공간을 의미합니다.

입력양식 태그는 대표적으로 회원가입 양식이 있습니다.

1 입력양식은 form 태그를 사용한다.

그 입력양식 안에는 input 태그를 사용한다.

*label 의 for은 input의 id 로 받는다.

1.1 form 태그의 속성

1.2 input 태그의 type 속성값

label 태그:

label는 input 태그를 설명하는 데 사용합니다.

label 태그는 어떠한 input 태그를 설명하고 있는지 표시해줘야 합니다. input 태그에 id 속성을 입력하고 label 태그에 for 속성을 입력합니다.

label태그 안의 내용은 input 태그에 자동으로 초점이 맞추어 집니다.

1.3 html5 추가된 type 속성값

속성

*name 속성

 모든 것에 이 이름(name)속성을 정해줘야함, color, size address, id, password)

*value (가치있는 값) 기본적으로 적혀있는 글자라고도 할 수 있음. (textarea는 그냥 태그 안에 입력하면 됨.)

*placeholder 뒤에 흐린글씨로 나오는 태그이다. (placeholder="id를 입력해주세요")

2 input 태그가 아닌 입력양식이 2개 있다. textarea 태그와 select 태그이다.

textarea 태그

: 여러줄의 글자를 입력할 수 있는 태그입니다.

안에 미리 글자를 입력하고 싶으면 textarea 태그 안에 글자를 입력한다.

2.1  textarea 태그의 속성

select태그

:여러 개의 목록에서 몇가지를 선택할 수 있는 입력 양식 요소입니다.

여러개의 목록을 선택하고 싶을 때는 selct태그의 multiple 속성을 사용하삼 (dropdownlist라고도 부름)

2.2  select 태그

*selct 태그: 데스크탑에서는 안예쁘므로 잘 안씀.

감성적 정리 :

아침에 겨우 와서 마라톤처럼 공부함.

해내고자 하는 것 송곳처럼 파고들지 못하는 습성..으로 인해

이것저것 실험하다 결국 목표량 끝마치지 못함.

동영상에 다 나와있다. 잘 보고 정리하는게 중요하다는 것 깨닫

한 것:

메인페이지 디자인까지 겨우 완성.

서브라임으로 마우스오버했을때 스탑효과 하고 태그 안닫아서 아침부터 화면 깨져나와 1교시 날림

가상요소로 헤더 햄버거 메뉴 만듦

before로 span을 세개써서 nth-child(2)와 3 등 만들어줌. width height만 있음 영역이 잡히는구나

플레이, 글씨, pagination 조절함 디자인적 height 맞춤

오후 2시부턴 하단 조정하다 시간다감.

내 방식대로 html에 img로 넣고 할 수 있을거라 생각해서 열심히 해봄

포토샵으로 이미지 사이즈 다 같이 맞춰주고, 이미지 자체에 width 값주고,(근데 width,height가 조금씩 달라 모양이좀 이상하긴함, 이럴땐 bg로 넣어서 bgsize 조정하는게 나았으려나) 서로 마진값으로 사이 늘려주고, 했음.

샘은 20%로 깔끔히 하라는데 잘 모르겠음. 이것도 겨우 했음. 모바일 화면 사이즈 그대로 pc도 크기 같아도 상관없다해서.. img 퍼센트로 나타내지 않음.

카페, 7시

상세페이지 조금 작업하는데 img랑 글 있을때 수직정렬하다 시간날림.

샘이 테이블에서만 수직정렬하는 거라심.

이럴땐 이미지 poa 쓰면 코딩이 쉬워짐.

오후10시~11시 모던 웹 폼태그랑 시멘틱 태그 등 정리좀 하려했더니 표 수정하기가 왤케 힘드냐

어차피 대충 아니까 동영상 보고 샘 사이트 참고해야겠다.

열동

집와서 html5 (responsive) 동영상1 봄

공부 정리 : (

아웃라이너는 체계적이다.

책의 차례역할와 같다. 구조 파악 하기 매우 좋다 !

반응형 사이트는
웹표준 만들때와 다르다. (웹표준은 width, height 값잡고 영역잡고 했음)

쉽게 짜기위해 먼저시멘틱 태그로 레이아웃을 짠다.

먼저 header pc화면 짜고 타블렛, 모바일화면 짜면된다.->이후 nav, main,... 마찬가지로

그러나, 시멘틱태그는 ex8에서 안먹기때문에 html5shiv

섹션이 의미가 있기위해선 제목을 제공해야 합니다.

예시 보기
한눈에 구조파악

content: ''; w h 넣고 poa left right 넣어주기

벼룩잡으려다 초가삼간 태운다.

자바 하나 안되서 이후 공부 망침

내 방식이 왜 아닌지 이해못하고 선생님이 하란대로 하다가 왜 안되는지 계속 생각하다 공부망침

한것 :

오전 (30분

):ncs 1.3, 4일 것 정리.

조별 메인 3번째 만에 진짜 나와서 그거 코딩 작업함

결론:

하는것에 집중하고, 차분히, 신속히 ㄱㄱ하자

form 태그 정리
>
select > option
textarea
 textarea > cols
 textarea > rows

input> type   {크기는 width, height로 줌)
type> radio
type> checkbox(여러개 선택)
type> submit(제출)

input>name
 모든 것에 정해줘야함, color, size address, id, password)

input >value (화면에 나오는 기본메시지)
input > type > button (버튼 모양과 클릭만할수 있고 자바로 뭔가 할때 이용)
input > type > reset ( 입력정보초기화)

LABEL   

계획행동양식 (생각하는방법) 체계적인..
1. 스스로 생각해보기
2. 다른 팀이 했던 사례를 찾아보는 것, 내 생각과 달라도 실제이므로 즉각적 이해와 받아들임 필
3. 정리 (전문지식이 없는 사람한테 설명해준다고 생각하고)
그 이후 또 다른 문제가 발생했을 경우,
4. 상황에 따른 문제해결방법 1~3사이에 추가해서 1~3루프 반복...

PROTOTYPE
기능, 컨텐츠 볼륨(컨텐츠 빠져도 구현할 수 있는 공간), 디자인