Notice
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
관리 메뉴

Jade_o.o

[css] 선택자 종합 실습 - 건의사항 작성란 본문

CSS

[css] 선택자 종합 실습 - 건의사항 작성란

by jade 2024. 1. 12. 12:21

기본 선택자, 복합 선택자, 가상 클래스 선택자, 가상 요소 선택자, 속성 선택자를 활용하여 

건의사항 작성란 구현

(+) 마우스 올리거나 클릭 시 스타일 기입됨

 

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>선택자 종합실습</title>
    <style>
      form {
        width: 400px;
      }
      h3:hover{
        background-color: black;
        color: white;
      }

      textarea {
        width: 100%;
      }
      textarea:focus{
        background-color: #f2d1d1;
      }
      /* checked */
      #red:checked + label {
        background-color: red;
        color: white; 
      }

    #blue:checked + label {
        background-color: blue;
        color: white; 
      }

    #yellow:checked + label {
        background-color: yellow;
        color: black; 
      }

      button {
        float: right;
        padding: 5px 15px;
        background-color: #f96666;
        color: white;
        font-size: 17px;
        border-radius: 10px;
        border: none;
      }
      button:active{
        color:#f96666;
        background-color: gray;
      }

 
    </style>
  </head>
  <body>
    <h3>건의 사항을 적어주세요!</h3>
    <form>
      <textarea cols="70" rows="10">건의사항 작성해주세요</textarea>
      <!-- <label for="red">
          <input type="checkbox" name="one" id="red" > 빨강
      </label> -->
      <input type="checkbox" id="red"/>
      <label for="red">빨강</label>
      <input type="checkbox" id="blue"/>
      <label for="blue">파랑</label>
      <input type="checkbox" id="yellow"/>
      <label for="yellow">노랑</label>
      <button>제출</button>

    </form>
  </body>
</html>

 

저작자표시 비영리 변경금지

'CSS' 카테고리의 다른 글

[css] attr 실습3 - position : relative/absolute/fixed  (0) 2024.01.12
[css] attr 실습2 - border 테두리 그리기  (0) 2024.01.12
[css] attr 실습1 - inline-block 네모칸 속 색깔 다른 작은 네모 넣기  (0) 2024.01.12
[css] selector 실습5 - 속성 선택자  (0) 2024.01.12
[css] selector 실습4 - 줄무늬 모양 만들기, before,after  (0) 2024.01.12
'CSS' Related Articles more