동영상 강좌는 유튜브 채널 '웹학교'를 이용하시기 바랍니다.
CSS를 사용하여 HTML 양식의 모양을 크게 향상시킬 수 있습니다.
<div>
<form action="/action_page.php">
<label for="okname">성명</label>
<input type="text" id="okname" name="성명" placeholder="이름..">
<label for="oktel">연락처</label>
<input type="text" id="oktel" name="연락처" placeholder="010-..">
<label for="country">국가</label>
<select id="country" name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
<input type="submit" value="Submit">
</form>
</div>
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
div {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
입력 필드 스타일 지정하기
width 속성을 사용하여 입력 필드의 너비를 결정합니다.
특정 입력 유형에만 스타일을 지정하려는 경우 속성 선택자를 사용할 수 있습니다.
입력 필드 여백
padding 속성을 사용하여 텍스트 필드 내에 공백을 추가합니다.
** 입력 필드가 많을 때 margin을 주어 필드밖의 공간을 추가할 수도 있습니다.
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
box-sizing 속성을 border-box로 설정했습니다.
이렇게 하면 패딩과 테두리가 요소의 전체 너비와 높이에 포함됩니다.
테두리가 있는 입력 필드
border 속성을 사용하여 테두리 크기와 색상을 변경하고 border-radius 속성을 사용하여 둥근 모서리를 추가하십시오.
input[type=text] {
border: 2px solid red;
border-radius: 4px;
}
아래쪽 테두리 만 원하는 경우 border-bottom 속성을 사용하십시오.
input[type=text] {
border: none;
border-bottom: 2px solid red;
}
입력 필드 색 반영하기
background-color 속성을 사용하여 배경색을 입력에 추가하고 color 속성을 사용하여 텍스트 색상을 변경합니다.
input[type=text] {
background-color: #3CBC8D;
color: white;
}
Focused 입력 필드
기본적으로 일부 브라우저는 포커스를 클릭하면 입력 주위에 파란색 외곽선을 추가합니다.
outline : none을 추가하여 이 동작을 제거 할 수 있습니다. 입력에 연결합니다.
:focus 선택기를 사용하여 포커스가 올 때 입력 필드를 사용하여 무언가를 하십시오.
input[type=text]:focus {
background-color: lightblue;
}
input[type=text]:focus {
border: 3px solid #555;
}
아이콘 / 이미지가 있는 입력필드
입력 안에 아이콘이 있으면 background-image 속성을 사용하고 background-position 속성으로 배치합니다.
또한 아이콘의 공간을 확보하기 위해 큰 왼쪽 패딩을 추가합니다.
input[type=text] {
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
}
애니메이션 검색 입력 필드
이 예제에서는 CSS transition 속성을 사용하여 검색 입력이 포커스를 얻을 때 애니메이션의 너비를 애니메이션으로 표시합니다.
transition 속성에 대한 자세한 내용은 CSS 전환 장에서 나중에 배우게 됩니다.
input[type=text] {
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
텍스트 영역(Textareas) 스타일 지정
resize 속성을 사용하여 텍스트 영역의 크기가 조절되지 않도록 하십시오 (오른쪽 하단의 "grabber"비활성화).
textarea {
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
}
선택 메뉴 스타일
select {
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}
입력 버튼 스타일
input[type=button], input[type=submit], input[type=reset] {
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
** 전체 너비 버튼의 경우 width: 100% 사용
반응형 양식(Form)
화면이 너비가 600 픽셀보다 작으면 두 열을 서로 겹치지 않게 쌓습니다.
<div class="container">
<form action="/action_page.php">
<div class="row">
<div class="col-25">
<label for="okname">성명</label>
</div>
<div class="col-75">
<input type="text" id="okname" name="okname" placeholder="홍길..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="oktel">연락처</label>
</div>
<div class="col-75">
<input type="text" id="oktel" name="oktel" placeholder="010-..">
</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">Australia</option>
<option value="canada">Canada</option>
<option value="usa">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>
<div class="row">
<input type="submit" value="Submit">
</div>
</form>
</div>
* {
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: #4CAF50;
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;
}
@media screen and (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
등록된 댓글이 없습니다.