[HTML, CSS] 레이아웃의 이해 - 네비게이션 구성, 입력 양식 태그
레이아웃의 이해 - 네비게이션 구성
line-height: 가지고 있는 박스의 높이 값이 존재할 때, 박스의 높이 값과 동일하게
부여를 해 주면 글자가 상하선상 중심 배치가 됨.
line-height: 30px; /*행간 - 줄간격의 높이. 글자가 한줄일 떄! 높이와 동일하게 부여시 글자 중심 배치*/
/*a 자식요소로 존재할 때 글자 스타일 a태그에 직접 부여*/
hover: 반응 선택자(마우스를 올렸을 때)
li:hover a{
color: coral; /* 안에 있는 (띄어쓰기 = 후손선택자)*/
}
입력 양식 태그
input type="서식의 종류"
form 태그 : 하나의 입력 양식을 묶어주기 위해 사용
<form>다양한 입력 양식 태그</form>
실질적으로 사용자가 입력한 값, 양식이 서버로 보내지기 위한 구역, 단락을
구분짓기 위해
<form method=""> 데이터의 전달양식 선택
get : url에 데이터를 넣어 전달
post: 데이터를 별도로 전달 << 이걸로 좀 더 많이 사용
action - 데이터의 전달위치 지정
<form action="input.jsp"> < 서버 스크립트 주소 지정, 양식과 서버간의 연결
데이터의 전달위치 지정
서식들은 기본적으로 글자처럼 옆으로 나열되는 인라인 형식이기 때문에 div로 박스로 감싸면서 진행
<label> 태그: 서식 앞에 붙는 타이틀, 인라인 형식
1. 텍스트 입력 창
<input type="text"> 글자가 받아지는 서식창
2. 비밀번호, 패스워드 입력
<input type="password"> 암호화된 표기
<input type="date">
<!--년, 월, 일 달력-->
3.전화번호, 미리보기 양식
<label>휴대전화</label>
<input type="tel">
<!--모바일에서 확인: 숫자 키보드로 전환-->
placeholder="000-0000-0000" << 미리보기 양식
4. 둘 중 하나만 선택하는 체크박스
<label>성별</label>
<input type="radio" name="aa"> 남
<input type="radio" name="aa"> 여
<!--항목에 대한 선택이 한 개만 이루어져야 할 때 사용, 하나만 체크되도록 할 때에는 동일한 name 지정-->
5. 여러 개 선택하는 체크박스
<label>취미</label>
<input type="checkbox"> 독서
<input type="checkbox"> 음악감상
<input type="checkbox"> 영화
<input type="checkbox"> 요리
<input type="checkbox" checked="checked"> 없음
6. 이메일
<label>이메일</label>
<input type="email" />
<!--양식에 맞지 않으면 경고 표시-->
7. 색상
<div>
<label>좋아하는 색상</label>
<input type="color">
<!--색상을 고를 수 있는 양식, 익스플로러에 지원 x-->
</div>
8. 나이, 숫자
<div>
<label>나이</label>
<input type="number" min="1" max="100" step="10">
<!--min: 시작 max: 최대값 step: 올라가는 단계 -->
</div>
9. 홈페이지, url 링크 입력
<div>
<label>홈페이지 주소</label>
<input type="url" value="http://">
<!-- url 입력 시 앞쪽 http:// 입력 필수 --> value를 입력하면 앞에 입력된 상태로 등장
</div>
10. 메뉴 화면을 펼쳐서 원하는 속성을 선택 <select> <option>
<div>
<label>직업</label>
<select>
<option>직업 선택</option>
<option>학생</option>
<option>회사원</option>
<option>전문직</option>
</select>
</div>
11. 장문의 글을 입력하는 텍스트 박스
<div>
<label>자기소개서</label>
<textarea cols="50" rows="10"></textarea>
<!--cols: 글자의 개수에 대한 부분 rows: 글자의 줄 수에 대한 부분. 장문의 글을 입력받고자 할 때 사용-->
</div>
12. 버튼
<button>확인</button>
버튼을 누르면 입력 양식에 맞지 않는 서식에 대해 경고창이 뜸.
www.evernote.com/l/AlcB-eZQYKxI3KP4rRtQ4UPXM635jroqp4o/
레이아웃의 이해 - 네비게이션 구성, 입력 양식 태그
레이아웃의 이해 - 네비게이션 구성 line-height: 가지고 있는 박스의 높이 값이 존재할 때, 박스의 높이 값과 동일하게 부여를 해 주면 글자가 상하선상 중심 배치가 됨. line-height: 30px; /*행간 - 줄간
www.evernote.com