HTML/CSS 강의 5일차 : form만들기, li(리스트)기초

input type은 텍스트 필드인 [text][password]

체크 할 수 있는 [radio]버튼은 하나만 선택 가능하고 [checkbox]는 여러개 선택 가능함

데이터 보내주는 버튼인 [submit]

이미지 버튼[image]

파일을첨부 할 수 있는 [file]

 

p로 감싼 이유는 p가 블록요소이기 때문에 밑으로 떨어지게 만드려고

input은 반드시 부모 태그인 [fieldset] 를 먼저 써줘야함

<form>
 <fieldset>
  <legend>폼요소제목</legend>
    <p>
    아이디<input type="text" id="user_id" name="id" size="30" maxlength="12" placeholder="아이디" autofocus autocomplete="off" >            
    </p>
    <p>
    패스워드<input type="password" id="user_pw" name="user_pw" size="30" maxlength="12" placeholder="패스워드입력" autocomplete="off" >            
    </p>
    <p>
    하나만 선택 할 수 있는 라디오 버튼<input type="radio" name="라디오버튼" checked>
    </p>
    <p>
    여러개 선택 할 수 있는 체크박스<input type="checkbox" name="체크박스">
    </p>
    <p>
    데이터 보내주는 버튼<input type="submit" value="데이터버튼">
    </p>
    <p>
    <button>일반 버튼</button>
    </p>
    <p>
    이미지 버튼<input type="image" src="./이미지 경로" alt="확인">
    </p>
    <p>
    file 첨부<input type="file">
    </p>
 </fieldset>
</form>

 

 

 

드롭다운에는 [select]에 자식요소인 [option]이 있다.

 

<select size="3">
  <option>드롭다운1</option>
  <option>드롭다운2</option>
  <option>드롭다운3</option>
</select>

html

 

 

텍스트필드 크기를 다 같은 클래스를 줬지만 연락처 필드만 크기가 달라서 연락처 필드에만 중복클래스를 줘서 크기를 다르게 만들 수 있음

html)[txt_box w200]

css).w200

 

 

 

 

 

[ul]순서없는 리스트

[li]순서 있는 리스트 (잘 사용하지 않음)

[dl]정의내릴 때 쓰는 리스트

<ul>
  <li>ul의 자식요소인 li</li>
  <li>리스트</li>
  <li>리스트</li>
</ul>

 

근데 ul은 세로나열이 원칙이기 때문에 가로나열로 바꾸려면 [flot]스타일을 주면됨

 

 

마지막 li 요소만 스타일을 다르게 주고싶다면 [:last-child]스타일을 적용하면 된다

li:last child{
	margin:0px;
    }