728x90
반응형

 

Form

  
method  
   
   
속성 선택자
<!DOCTYPE html>
<html>
<head>
    <title>속성 선택자</title>
    <style>
        /* title속성 중에서 flower라는 '~'단독 문자열이 있는(공백으로 구분) 요소만 선택
        flowers, my-flower, flower-tree 같이 무언가 연결된 문자열은 해당 안됨.
        [title~="flower"] or [title~=flower] */
        [title~="flower"] {border: 5px solid red;}

        /* top라는 문자열이 '|'맨 앞에 있으면서 단독으로 있거나 -(하이픈, 대시)로 나뉘어져 있는 요소만 선택.
        topContent, content-top과 같은 문자열은 해당 안 됨. */
        [class|=top] {background: lavender;}

        /* top라는 문자열로 '^'시작되는 모든 요소 */
        [id^="top"] {background: skyblue;}

        /* class명이 test라는 문자열로 '$'끝나는 모든 요소 */
        [class$="test"] {background: red;}

        /* class명의 일부에 test라는 문자열이 '*'포함된 모든 요소 */
        [class*="te"] {color: green;}
    </style>
</head>
<body>
    <h1>CSS [attribute~="value"] Selector</h1>
    <img src="../img/klematis.jpg" title="lematis flowers" width="150" height="113">
    <img src="../img/img_flwr.gif" title="my flower" width="224" height="162">
    <img src="../img/img_tree.png" title="flower-tree" width="200" height="358">

    <h2>CSS [attribute|="value"] Selector</h2>
    <h1 class="top-header">h1태그: class="top-header"</h1>
    <p class="top-text">p태그: class="top-text"</p>
    <p class="topcontent">p태그: class="topcontent"</p>

    <h2>CSS [attribute^="value"] Selector</h2>
    <h1 id="top-header">h1태그: id="top-header"</h1>
    <p id="top-text">p태그: id="top-text"</p>
    <p id="topcontent">p태그: id="topcontent"</p>

    <h2>CSS [attribute$="value"] Selector</h2>
    <div class="first_test">div태그: class="first_test"</div>
    <div class="second">div태그: class="second"</div>
    <div class="my-test">div태그: class="my-test"</div>
    <p class="mytest">p태그: class="mytest"</p>
    
</body>
</html>​

 

asf
<!DOCTYPE html>
<html>
  <head>
    <title>form속성</title>
    <style>
      form {
        border: 1px solid #555;
        border-radius: 5px;
        padding: 10px;
      }

      input.ipst {
        padding: 12px 20px;
        margin: 8px 0;
        border: 1px solid #555;
        outline: none;
      }

      input.ipst:focus {
        background-color: lightblue;
      }

      input.ipst1 {
        padding: 12px 20px;
        margin: 8px 0;
        border: 1px solid #ccc;
        outline: none;
      }

      input.ipst1:focus {
        border: 3px solid #555;
      }
      
    </style>
  </head>
  <body>
    <form action="12background1.html">
        <h1>input요소를 클릭하세요. -배경색변경</h1>
        <input type="search" id="selsearch" class="ipst" name="selsearch" placeholder="검색어를 입력하세요">
        <input type="text" id="uId" class="ipst" name="uId" placeholder="아이디를 입력하세요">
        <input type="password" id="uPass" class="ipst" name="uPass" placeholder="비밀번호를 입력하세요"><br>
        <input type="submit" class="ipst" value="로그인">
    </form><br>

    <form>
        <h1>input요소를 클릭하세요. -테두리색변경</h1>
        <input type="search" id="selsearch1" class="ipst1" name="selsearch1" placeholder="검색어를 입력하세요">
        <input type="text" id="uId1" class="ipst1" name="uId1" placeholder="아이디를 입력하세요">
        <input type="password" id="uPass1" class="ipst1" name="uPass1" placeholder="비밀번호를 입력하세요."><br>

        <input type="submit" class="ipst" value="로그인">
    </form>
  </body>
</html>​

 

form selector - icon
<!DOCTYPE html>
<html>
<head>
    <title>form속성2</title>
    <style>
        input[type=search] {
            width:80%;
            /* box-sizing: border-box */
            border: 2px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
            background-color: white;
            background-image: url('../img/searchicon.png');
            /* background-position:left top|10px 10px| 25% 75% 등으로 기술 가능 */
            background-position: 10px 10px;
            background-repeat: no-repeat;
            padding: 12px 20px 12px 40px;
        }

        /* input[type=submit] {
            border:none;
            width: 100px;
            padding: 14px 20px;
            background-color: rgb(3,154,255);
            color: white;
            border-radius: 5px;
            cursor: pointer;
        }*/
    </style>
</head>
<body>
    <p>Input요소에 아이콘 넣기:</p>
    <div>box-sizing: 테스트</div>
    <form>
        <!-- <input type="text" name="search" placeholder="검색 단어를 입력해주세요."><br> -->
        <input type="search" name="search" placeholder="검색 단어를 입력해주세요."><br>
        <input type="submit" value="검색">
        <input type="button" value="input일반버튼">
        <button type="button">일반버튼</button>
        <button type="submit">검색</button>
        <button>검색</button> <!--form내 button type 미기술시 submit자동 적용-->
    </form>
</body>
</html>​

 

ㅁㄴㄹ
<!DOCTYPE html>
<html>
<head>
    <title>form속성</title>
    <style>
        textarea{
            width:80%;
            height: 150px;
            padding: 12px 20px;
            /* 오타 기술시 기술된 부분이하 적용안됨 */
            /* box-sizing: border-box; */
            border: 2px solid #ccc;
            border-radius: 4px;
            background-color: #f8f8f8;
            /* font-size: 16px; */
            resize:none;
            /* outline: none; */
        }
        textarea:focus{ /*disabled시 적용안됨*/
            background-color: white;
            outline:  solid red;
            color: blue;
        }
    </style>
</head>
<body>
    <p>textarea창 사이즈 고정하기</p>
    <form>
        <textarea placeholder="이 곳에 텍스트를 입력하세요." disabled>초기값 입력
        엔터시 앞에 공간 생김
body라인에 입력해야 해당 위치에 입력됨
<br>적용 안 됨
        </textarea>
    </form>
</body>
</html>​
728x90
반응형
저작자표시 비영리 변경금지

'[CSS]' 카테고리의 다른 글

[CSS] Float  (0) 2024.02.21
[CSS] css, display  (0) 2024.02.21
[CSS] 가상엘리먼트(::)선택자  (0) 2024.02.20
[CSS] hover 가상클래스( : ) 선택자  (0) 2024.02.20
[CSS] hover 가상클래스( : ) 선택자  (0) 2024.02.20

+ Recent posts

티스토리툴바