[CSS] - <input type=" ">에 효과 주기, 둥근 테두리 만들기

○ <input type=" ">에 효과 주기, 둥근 테두리 만들기

※ id 접근 시에는 # 사용, class 접근 시에는 . 사용한다 <input type="text"> #contact-form input[type='text'] {     border-radius:5px; // 테두리 둥글게 5px 값을 준다 } <input type="submit" value="가입"> #contact-form input[type='submit']{      border-radius: 5px; } #contact-form input[type='submit']:hover{ // :hover 는 input type 버튼의 마우스 댔을 때 효과     cursor:pointer;  // 커서를 올리면 마우스 모양이 나오게 설정한다 } // index.html <link rel="stylesheet" href="css/style.css" type="text/css"> // CSS 참조하여 사용하기 위해 <form id="contact-form"> <header id="content-header"> <h3>회원가입</h3> </header> <div> <label>Name*</label> <input type="text"> </div> <div> <label>Email*</label> <input type="email"> </div> <div> <label>Company</label> <input type="text"> </div> <div>         <label>Phone</label>         <input type="text"> </div> <div> <em>* 필요한 정보</em> <input type="submit" value="가입"> </div> <div class="clearfix"></div> <div class="content-footer">         <p>우리는 가입자의 정보를 무단으로 사용하지 않습니다.</p> </div> </form> // style.css #content-header h3 {     font-size: 24px;     font-weight: bold;     padding-bottom: 20px } #contact-form {     padding:10px 15px 15px 15px; // 패딩 설정, 시계방향(위 오른 아래 왼)     border:4px solid #4ea0d8;  // 테두리(경계) 설정     border-radius: 10px;  // 테두리 둥굴게 } #contact-form div {     margin-bottom:20px; } #contact-form label {     display:inline-block; // inline-block 설정     width:100px;     font-weight: bold; } #contact-form input[type='text'], #contact-form input[type='email']{ // input type 접근 !!!     border:#ccc 1px solid;     border-radius:5px;     height: 25px;     width:65%; } #contact-form input[type='submit']{ // input type 접근 !!!     padding: 12px 18px;     color:#fff;     background: #fa6e3e;     border:0;     border-radius: 5px;     float:right;     display:block; } #contact-form input[type='submit']:hover{ // input type 버튼의 효과(마우스 댔을 때)     background: #d55427;     cursor:pointer;  // 커서를 올리면 마우스 모양이 나오게 설정 } #contact-form .content-footer p{  // 클래스 접근 시 . 사용, id 접근 시 # 사용     font-style: italic;     text-align: center;     color: #666;     font-size: 80%; }