코드라이언 수업 6일 내용.
생화코딩 HTML/CSS 수업과 여러 css 수업을 들으면서 익숙해져 있다고 생각했지만 아직도 처음 접하거나 두리뭉실하게 알고 있는 것들이 많다.
열심히 TIL 포스팅하자.벌써 이틀이나 밀렸어....
정신차리자 소현아 ㅠㅠ
- HTML Layout 관련
- footer에는 <nav>태그를 쓰지 않는다.
- <main>요소는 한번만 쓰는 것이 좋고, <body>당므으로 가장 포괄적인 태그로 볼 수 있다.
- 위젯(마이페이지, 장바구니 등)은 <article>로 쓸 수 있다. 단독적으로 쓰이고 다른 콘텐츠가 대체할 수 없는 콘텐츠일 경우 <article>을 쓰는게 좋다. <body>안에 <article>은 하나만.
- <ul><li>태그는 목록이 적어도 3개 이상일 때 쓰는 것이 좋다.
- <footer>에도 heading이 필요하다.
- <small> - 저작권이나 법률 관련 작은 문구를 나타낼 때 쓰임.
- HTML Form 관련
폼은 정보를 입력하는 영역입니다. 로그인 화면에서 아이디와 비밀번호를 입력하는 것, 회원 가입할 때 정보를 입력하는 양식 등은 모두 폼을 이용합니다. 폼에 입력을 하고 제출(submit)하게 되면 데이터는 서버로 전송되고, 전송한 데이터는 웹 서버가 처리하며, 처리 후 로그인 결과 화면 같은 다른 웹 페이지를 클라이언트에 전송합니다.
- Input type중 Radio와 Checkbox의 차이
<fieldset class="like">
다음 문자 중에 왠지 마음에 드는 것을 하나 고르세요.
<p>
<label><input type="radio" name="company" value="naver" required>네</label>
<label><input type="radio" name="company" value="kakao">카</label>
<label><input type="radio" name="company" value="line">라</label>
<label><input type="radio" name="company" value="coupang">쿠</label>
<label><input type="radio" name="company" value="baemin">배</label>
</p>
</fieldset>
- Label - input 태그를 설명하는 텍스트이지만 시각장애인을 위하여 semantic한 요소로 꼭 사용하도록 하자.
블라블라
<input type = ""~~~>
<label>
혹은
<label for="blah">블라블라</label>
<input type="text"~~ id="blah"> 식으로 label 요소를 쓸 수 있다. (label for="~"에는 input type의 id="~"값이 들어간다.)
label요소를 사용하면 사용자에게 클릭할 수 있는 영역이 더 넓어진다.
- <select>요소는 드롭다운 리스트 박스를 생성한다.
이때 선택 옵션은 <option>태그를 사용한다. 즉, <select>와 <option>은 항상 같이 사용된다!
서버에는<option value="iphone">아이폰</option>선택 시, value("iphone")값이 전송된다.
<option value="iphone" selected>아이폰</option>
=> "selected"는 자동적으로 아이폰이 선택되어져 있는 상태가 보여지게 한다.
위의 select에서 "선택" 값도 option 값으로 들어간 것이다.
하지만 Required 설정된 상태에서 Value를 공란으로 해두면 "선택"은 option이 selected된 것으로 치지 않는다.
"Size"속성을 통해 드랍다운 리스트에서 한번에 보여줄 수 있는 option 개수를 지정할 수 있다.
- <button>
<button type="submit">은 사용자가 작성한 양식이 서버로 전송되게 한다. 반드시 type선언 해 주자.
<button>태그 type을 설정해주지 않으면 <button type="submit">과 같음.(기본값) - <Input type="button">과 <button>중 뭘 써야할까?
스타일을 추가나 여러가지 자식 태그를 추가하고 싶다면 <button>을 쓰는 것이 좋다.
<input>은 닫는 태그가 없기 때문에 value, 텍스트 값 밖에 지정할 수 없지만 <button>은 여러가지 자식 요소와
::before / ::after 와 같은 가상 요소를 사용할 수 있다.
더 예쁜 버튼을 만들고 싶다면 <button>태그를 쓰는게 좋다!
- <Datalist>란? <select>와 <input type="text">를 섞은 것과 같다.
<select>와 다르게 사용자에게 좀 더 자유를 준다!
사용자가에게 <option>값으로 선택지도 주지만 사용자가 원하는 값도 자유롭게 작성 할 수 있게 한다.
<label for="solasystem">원하는 행성을 선택하세요 : </label>
<input type="text" id="solasystem" list="planets" name="planets">
<datalist id="planets">
<option value="수성">수성</option>
<option value="금성">금성</option>
<option value="지구">지구</option>
<option value="화성">화성</option>
</datalist>
- <Fieldset>이란? - 폼 컨트롤 들을 그룹화해주는 semantic한 요소. 섹션별로 나눠줄 때 쓰인다. <section> 혹은 <div>와 같은 태그들과 비슷하다고 볼 수 있겠다.
- <legend>(전설..?)이란? => fieldset 그룹의 caption즉, 제목을 넣어주는 semantic 요소.
반드시 <fieldset>의 첫번째 자식으로 사용하기.
<form action="">
<fieldset>
<legend>개인정보</legend>
<label for="myName">이름</label>
<input type="text" name="name" id="myName">
<label for="myTel">전화번호</label>
<input type="tel" name="tel" id="myTel">
<label for="myEmail">이메일</label>
<input type="email" name="email" id="myEmail">
</fieldset>
- 사용자가 입력한 Form 양식 내용들을 한번에 Reset(지우기) 하려면?
<button type="reset">양식 지우기</button><button type="reset">을 이용하자.
'땀내 품긴 개발 노-트 > HTML, CSS' 카테고리의 다른 글
| [코드라이언] Reset CSS와 선택자(Selector) 그리고 상자(Box) -Day 8- (0) | 2022.04.17 |
|---|---|
| [코드라이언] 테이블 만들기(Tabular Data) -Day7- (3) | 2022.04.12 |
| [코드라이언] All Day CSS -Day5- (4) | 2022.04.05 |
| [코드라이언] HTML/CSS -Day-3 (Text Level과 img srcset) (3) | 2022.03.31 |
| HTML Living Standard-No more versions... (2) | 2022.03.30 |