[html, css] form 태그, 선택자

form 태그

 

버튼 양식

<button> 태그 혹은 <input> 태그

<h3>버튼 태그 사용</h3>
<button type="button" onclick="alert('클릭-1 사용')">클릭-1</button>
<h3>Input 태그 사용</h3>
<input type="button" onclick="alert('클릭-2 사용')" value="클릭-2">
<h3>Image 버튼 사용</h3>
<button type="button" onclick="alert('클릭-3 사용')"><img src="./image/duke.png" alt="못생긴 캐릭터"></button>

 

 

선택 목록

펼쳐지는 목록에서 한 가지만 선택하도록 함

<h3>관심 있는 학습 주제 한 가지를 선택하세요</h3>
<select name="subjects">
<option value="1" selected>HTML5</option>
<option value="2">CSS3</option>
<option value="3">Javascript</option>
<option value="4">Jquery</option>
</select><br><br>

 

<optgroup> 태그: 여러 항목을 그룹으로 묶음

<label for="">전공 분야를 선택하세요.
<select name="major" id="">
   <optgroup label="computer">
       <option value="">Software</option>
       <option value="">Robot</option>
       <option value="">System</option>
   </optgroup>
   <optgroup label="language">
       <option value="" selected>Korean</option>
       <option value="">English</option>
       <option value="">Chinese</option>
       <option value="">Japanese</option>
    </optgroup>
    <optgroup label="business">
       <option value="">Service</option>
       <option value="">Education</option>
       <option value="">Communication</option>
       <option value="">Marketing</option>
    </optgroup>
</select>
</label><br>

 

<datalist>태그: 텍스트 입력시 자동완성 기능 제공

                <h3>선택사항을 직접 입력하세요.</h3>
                <label for="">전공 분야를 입력하세요.
                    <input type="text" list="majorlist" name="major">
                    <datalist id="majorlist">
                        <option value="Software">소프트웨어</option>
                        <option value="Robot">로봇</option>
                        <option value="System">시스템</option>
                        <option value="Service">서비스</option>
                        <option value="Education">교육</option>
                    </datalist>
                </label>

 

<input type = "date"> 입력 폼

type 속성값

month: 년-월 단위 날짜 입력

week: 년-주 단위 날짜 입력

time: 시간만 입력

datetime: 년-월-일-시간 단위로 입력

 

                <h3>오늘 날짜 입력</h3>
                Today: <input type="date" name="Today">
                <h3>프로젝트 수행 기간</h3>
                From: <input type="date" name="from" min="2023-11-08" max="2023-12-31">
                To: <input type="date" name="to" min="2024-01-01" max="2024-06-30">
                <br><br>

                <h3>생일(년/월) 입력</h3>
                생일: <input type="month" name="birth">
                <h3>주간 계획(년/주) 입력</h3>
                주간 계획: <input type="week" name="weekend">
                <br><br>

                <h3>현재 시간 입력</h3>
                Time: <input type="time" name="now">
                <h3>생일(년도, 월, 일, 시간) 입력</h3>
                Birthday: <input type="datetime-local" name="bdaytime">

 

 

 

 

공간 분할 태그

1. <div> 태그: 블록 형식

2. <span> 태그: 인라인 형식

 

 

 

 

 

 

CSS

1. CSS 기본 사용법

div   {  width:    960px  ;   }

선택자 속성 콜론 속성값-단위 세미콜론

 

중괄호 내부를 여러 줄로 쓰고 들여쓰기를 해야 접을 수 있다.

 

CSS 작성 방법(적용 우선순위)

①인라인 스타일 시트

②내부 스타일 시트

③외부 스타일 시트

 

전체 선택자

 

타입 선택자

 

클래스 선택자, 아이디 선택자

 

속성 선택자

 

 

 

 

가상 선택자

1)이벤트 가상 클래스 선택자