🔵 CSS - input

jea_i·2022년 2월 7일
목록 보기
14/19
<body>
    <h2>입력양식</h2>
    <p>
        사용자에게 입력받는 공간. 아이디/비번/체크박스/여러줄계시물/라디오버튼등
    </p>
    <ul>
        <li>
            <h4>form태그</h4>
            <p>
                입력양식 실제적기능은 form태그 안에서 작동.
                <br>단순표현과 관련된 기능만 사용할땐 없어도 됨.
                <br>form태그 사용여부는 백엔드개발자와 협의.
            </p>
        </li>
        <li>
            <h4>input태그</h4>
            <p>
                입력양식의 기본. type특성따라 다양한 양식지원.
            </p>
        </li>
        <li>
            <h4>textarea태그</h4>
            <p>
                문장처럼 여러줄 텍스트입력때 사용.
            </p>
        </li>
        <li>
            <h4>select태그</h4>
            <p>
                여러 선택항목중 한가지 선택위해 사용.
            </p>
        </li>
    </ul>
    <hr>
    <h3>input태그</h3>
    <p>
        기본적 입력양식으로 type특성으로 여러양식 사용가능.
        <br>type특성 기본값은 text한줄문장 입력양식 제공.
        <br>너비 높이 적용가능 inline-block요소/ inline level에 속함
    </p>
    <input>
    <input type="text">
    <ul>
        <li><input type="text" maxlength="10" placeholder="아이디"></li>
        <li><input type="password" maxlength="10" placeholder="비밀번호"></li>
        <li><input type="search" placeholder="검색"></li>
        <li>
            <input type="email" placeholder="이메일">
            모바일엔 @있는 키패드로 전환
        </li>
        <li>
            <input type="url" placeholder="도메인">
            모바일엔 확장도메인 있는 키패드로 전환
        </li>
        <li>
            <input type="tel" placeholder="전화번호">
            모바일엔 숫자키패드로 전환
        </li>
    </ul>
    <ul>
        <li>
            <input type="button" value="버튼양식">
        </li>
        <li>
            <input type="submit" value="확인">
        </li>
        <li>
            <input type="reset" value="취소">
        </li>
    </ul>
    <fieldset>
        <legend>radio버튼</legend>
        <input type="radio" name="mon" checked>:1/4분기
        <input type="radio" name="mon">:2/4분기
        <input type="radio" name="mon">:3/4분기
        <input type="radio" name="mon">:4/4분기
        <label>
            <input type="radio" name="gander">:남성
        </label>
        <label>
            <input type="radio" name="gander" checked>:여성
        </label>

        <input type="radio" name="month" id="min" checked><label for="min">:양력</label>
        <input type="radio" name="month" id="plu"><label for="plu">:음력</label>
    
    </fieldset>
    <fieldset>
        <legend>checkbox 버튼</legend>
        <input type="checkbox" name="bobby" id="c1"> <label for="">독서</label>
        <input type="checkbox" name="bobby" id="c2" checked> <label for="">음악감상</label>
        <input type="checkbox" name="bobby" id="c3"> <label for="">영화감상</label>
        <input type="checkbox" name="bobby" id="c4"> <label for="">자전거타기</label>
    </fieldset>
    <fieldset class="fst">
        <legend>checkbox모양바꾸기</legend>
        <input type="checkbox" name="test" id="t1">
        <label for="t1">
            <i class="fas fa-check-square"></i>
            <i class="far fa-square"></i>
            체크박스
        </label>

    </fieldset>
</body>

<style>
/* 클래스fst를 기준으로 자식 label 선택*/
.fst>label{}

#t1{
    display: none;
}

/* 아이디t1을 기준으로 label 선택. 기준요소 바로 다음에 위치한 요소선택*/
#t1+label{}
#t1:checked+label{
    color: #f00;
}
#t1+label>.fa-check-square{
    display: none;
}
#t1+:checked+label>.fa-check-square{
    display: inline;
}
#t1+:checked+label>.fa-square{
    display: none;
}

/* 클래스 fst자식 legend 기준으로 label 선택
기준요소 이후 요소들중 특정요소 선택*/
.fst>legend~label{}
</style>
jea_i
열정열정열정🔥
이전 포스트
🔵 CSS - main page

다음 포스트
🔵 CSS - input

CSS

🔵 CSS - main page

🔵 CSS - opengraph

0개의 댓글

관련 채용 정보
