CSS textarea, select menu, input button etc

CSS Styling Textareas

팁: resize 속성을 사용하여 텍스트 영역의 크기가 조정되지 않도록 한다(오른쪽 하단 모서리의 "그래버" 사용 안 함):

<!DOCTYPE html>
<html>
<head>
<style>
textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  font-size: 16px;
  resize: none;
}
</style>
</head>
<body>

<h2>Styling textarea</h2>

<p><strong>Tip:</strong> 크기 조정 속성을 사용하여 텍스트 영역의 크기 조정을 방지합니다(오른쪽 하단 모서리에서 "그래버" 사용 안 함):</p>

<form>
  <textarea>Some text...</textarea>
</form>

</body>
</html>

위의 코드를 실행한 결과는 아래 그림과 같다.

CSS Styling Select Menu

<!DOCTYPE html>
<html>
<head>
<style>
select {
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 4px;
  background-color: #f1f1f1;
}
</style>
</head>
<body>

<h2>Styling a select menu</h2>

<form>
  <select id="country" name="country">
  <option value="au">서울</option>
  <option value="ca">대구</option>
  <option value="usa">제주</option>
  </select>
</form>

</body>
</html>

위의 코드를 실행한 결과는 아래 그림과 같다.

CSS input button

<!DOCTYPE html>
<html>
<head>
<style>
input[type=button], input[type=submit], input[type=reset] {
  background-color: #04AA6D;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}
</style>
</head>
<body>

<h2>Styling form buttons</h2>

<input type="button" value="버튼">
<input type="reset" value="리셋">
<input type="submit" value="제출">

</body>
</html>

위의 코드를 실행한 결과는 아래 그림과 같다.

CSS Responsive Form

브라우저 창 크기를 조정하여 효과를 확인한다. 화면의 너비가 600px 미만일 때 두 열을 서로 옆이 아닌 위에 쌓는다.

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}

input[type=submit] {
  background-color: #04AA6D;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}

input[type=submit]:hover {
  background-color: #45a049;
}

.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}

.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}

/* Clear floats after the columns */
.row::after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}
</style>
</head>
<body>

<h2>Responsive Form</h2>
<p>브라우저 창의 크기를 조정하여 효과를 확인합니다. 화면의 너비가 600px 미만일 때 두 열을 서로 옆이 아닌 겹쳐서 쌓습니다.</p>

<div class="container">
  <form action="/action_page.php">
  <div class="row">
    <div class="col-25">
      <label for="fname">이름</label>
    </div>
    <div class="col-75">
      <input type="text" id="fname" name="firstname" placeholder="당신의 이름은..">
    </div>
  </div>
  <div class="row">
    <div class="col-25">
      <label for="lname">성</label>
    </div>
    <div class="col-75">
      <input type="text" id="lname" name="lastname" placeholder="당신의 성은...">
    </div>
  </div>
  <div class="row">
    <div class="col-25">
      <label for="country">국가</label>
    </div>
    <div class="col-75">
      <select id="country" name="country">
        <option value="australia">대한민국</option>
        <option value="canada">캐나다</option>
        <option value="usa">프랑스</option>
      </select>
    </div>
  </div>
  <div class="row">
    <div class="col-25">
      <label for="subject">주제</label>
    </div>
    <div class="col-75">
      <textarea id="subject" name="subject" placeholder="주제를 기록하세요.." style="height:200px"></textarea>
    </div>
  </div>
  <br>
  <div class="row">
    <input type="submit" value="제출">
  </div>
  </form>
</div>

</body>
</html>

위의 코드를 실행하면 아래 그림과 같다.

위의 코드에서 브라우저 창의 크기를 줄이면 아래 그림과 같은 결과가 표시된다.

지금까지 다양한 Form에 대해 CSS에서 스타일을 실습해 보았다.

가장 흔하게 사용하는 input 요소, textarea 요소, select menu, input button 그리고 responsive form에 대한 실습을 살펴보았다.

꼭 손으로 눈으로 머리로 익히며 실습하기를 바란다.

모두 화이팅입니다.!!!

출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.

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

'HTML > CSS문법' 카테고리의 다른 글

CSS Counter (0)	2023.09.10
CSS Website Layout (0)	2023.09.09
CSS Form - input (0)	2023.09.07
CSS Attribute Selector(속성 선택자) (0)	2023.09.06
CSS image sprites (0)	2023.09.05

enjoyCoding

CSS textarea, select menu, input button etc

CSS Styling Textareas

CSS Styling Select Menu

CSS input button

CSS Responsive Form

'HTML > CSS문법' 카테고리의 다른 글

댓글

티스토리툴바

CSS textarea, select menu, input button etc

CSS Styling Textareas

CSS Styling Select Menu

CSS input button

CSS Responsive Form

'HTML > CSS문법' 카테고리의 다른 글

관련글

댓글

티스토리툴바