본문 바로가기

CSS Form 요소 및 @ 규칙

액트 2020. 3. 24.
반응형

Form 요소

form 요소

CSS를 이용하면 사용자의 입력을 받는 input 요소에도 다양한 스타일을 설정할 수 있습니다.

 

input 요소의 크기 설정

width 속성을 이용하여 input 요소의 크기를 설정할 수 있습니다.

<style>

    input { width: 100%; padding: 10px 20px; margin: 5px 0; box-sizing: border-box; }

</style>

input 요소의 크기 설정

 

input 요소의 테두리 설정

border 속성을 이용하여 input 요소의 테두리(border) 색상과 두께를 바꿀 수 있습니다.

또한, border-radius 속성을 이용하여 input 요소의 모서리를 둥글게 만들 수도 있습니다.

<style>

    input[type="text"] { border: solid 2px #D2691E; border-radius: 8px; }

    input[type="password"] { border: none; border-bottom: solid 2px #D2691E; }

</style>
<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>CSS Forms</title>
	<style>
		input {
			width: 100%;
			padding: 10px 20px;
			margin: 5px 0;
			box-sizing: border-box;
		}
		input[type="text"] {
			border: solid 2px #D2691E;
			border-radius: 8px;
		}
		input[type="password"] {
			border: none;
			border-bottom: solid 2px #D2691E;
		}
	</style>
</head>

<body>

	<h1>input 요소에 테두리 적용</h1>
	<form>
		사용자 : <br>
		<input type="text" name="username"><br>
		비밀번호 : <br>
		<input type="password" name="password">
	</form>

</body>

</html>

input 요소의 테두리 설정

 

input 요소에 배경색 적용

background-color 속성을 이용하여 input 요소의 배경색을 설정할 수 있습니다.

또한, color 속성을 이용하여 input 요소의 텍스트 색상를 변경할 수도 있습니다.

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>CSS Forms</title>
	<style>
		input {
			width: 100%;
			padding: 10px 20px;
			margin: 5px 0;
			box-sizing: border-box;
			border: none;
			background-color: #FFF8DC;
			color: olive;
		}
	</style>
</head>

<body>

	<h1>input 요소에 배경색 적용</h1>
	<form>
		사용자 : <br>
		<input type="text" name="username"><br>
		비밀번호 : <br>
		<input type="password" name="password">
	</form>

</body>

</html>

input 요소에 배경색 적용

 

포커스를 가지고 있는 input 요소의 스타일 적용

:focus 선택자를 이용하여 해당 input 요소가 포커스(focus)를 가지고 있을 때의 스타일을 별도로 설정할 수 있습니다.

<style>

    input[type="text"] { border: solid 2px #FFE4B5; -webkit-transition: 0.5s; transition: 0.5s; }

    input[type="text"]:focus { border: solid 2px #D2691E; }

    input[type="password"] { border: solid 1px black; }

    input[type="password"]:focus { background-color: #E0FFFF; }

</style>
<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>CSS Forms</title>
	<style>
		input {
			width: 100%;
			padding: 10px 20px;
			margin: 5px 0;
			box-sizing: border-box;
		}
		input[type="text"] {
			border: solid 2px #FFE4B5;
			-webkit-transition: 0.5s;
			transition: 0.5s;
			outline: none;
		}
		input[type="text"]:focus { border: solid 2px #D2691E; }
		input[type="password"] { border: solid 1px black; }
		input[type="password"]:focus { background-color: #E0FFFF; }
	</style>
</head>

<body>

	<h1>포커스가 있는 input 요소의 스타일 설정</h1>
	<form>
		사용자 : <br>
		<input type="text" name="username"><br>
		비밀번호 : <br>
		<input type="password" name="password">
	</form>

</body>

</html>

포커스를 가지고 있는 input 요소의 스타일 적용

 

input 요소에 아이콘(icon)이나 이미지 삽입

background-image 속성을 이용하여 input 요소에 아이콘(icon)이나 이미지를 삽입할 수 있습니다.

또한, background-position 속성을 이용하여 삽입한 아이콘이나 이미지가 나타날 위치를 설정할 수도 있습니다.

<style>

    input {

        background-image: url("img_search_icon.png");

        background-position: 5px 4px;

        background-repeat: no-repeat;

    }

</style>

input 요소에 아이콘(icon)이나 이미지 삽입

 

textarea 요소의 크기 조절

resize 속성을 이용하여 textarea 요소의 크기를 조절할 수 있습니다.

resize 속성을 설정하면 해당 textarea 요소의 오른쪽 아래 부분에 마우스로 잡을 수 있는 핸들이 생깁니다.

사용자가 그 핸들을 마우스로 클릭하여 조절하면 textarea 요소의 크기를 마음대로 조절할 수 있게 됩니다.

※ resize 속성은 익스플로러에서 지원하지 않습니다.

CSS에서 사용할 수 있는 resize 속성값은 다음과 같습니다.

속성값 설명
none 해당 요소의 크기를 조절할 수 없음. (기본설정)
both 사용자가 해당 요소의 높이와 너비를 모두 조절할 수 있음.
horizontal 사용자가 해당 요소의 너비만을 조절할 수 있음.
vertical 사용자가 해당 요소의 높이만을 조절할 수 있음. 
<style>

    textarea { width: 100%; height: 200px; box-sizing: border-box; resize: both; }

</style>


<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>CSS Forms</title>
	<style>
		textarea {
			width: 100%;
			height: 200px;
			padding: 10px;
			box-sizing: border-box;
			border: solid 2px #1E90FF;
			border-radius: 5px;
			font-size: 16px;
			resize: both;
		}
	</style>
</head>

<body>

	<h1>textarea 요소에 스타일 적용</h1>
	<form>
		<textarea>여기에 텍스트를 입력합니다!</textarea>
	</form>

</body>

</html>

textarea 요소의 크기 조절

 

select 요소에 스타일 적용

CSS를 이용하면 select 요소에도 여러 가지 스타일을 적용할 수 있습니다.

select 요소에 스타일 적용

 

@규칙

 

@규칙(at-rule)

CSS에서는 W3C에서 규정하고 있는 몇몇 규칙들을 사용할 수 있습니다.

그 중에서도 많이 사용되는 대표적인 규칙은 다음과 같습니다.

 

@import 규칙

@import 규칙은 다른 스타일 시트에서 스타일 규칙을 가져올 수 있는 규칙입니다.

이 규칙은 스타일 시트에 사용되는 문자 인코딩을 지정하는 @charset 규칙을 제외하고 모든 다른 규칙보다 앞서 명시되어야 합니다.

 

보통 HTML 문서에는 다음과 같이 여러 개의 <link>태그를 사용하여 스타일 시트를 추가합니다.

HTML 문서

<head>

    <title>@import 규칙</title>

    <link rel="stylesheet" href="firstStyleSheet.css">

    <link rel="stylesheet" href="secondStyleSheet.css">

    ...

    <link rel="stylesheet" href="hundredStyleSheet.css">

</head>

하지만 이렇게 추가하는 CSS 파일의 개수가 늘어날수록 웹 서버의 부하도 같이 커지게 됩니다.

따라서 HTML 문서에는 일정 개수의 CSS 파일만을 추가하고, 추가된 CSS 파일에서 @import 규칙을 이용해 또 다른 CSS 파일을 추가하는 방법을 사용합니다.

HTML 문서

<head>

    <title>@import 규칙</title>

    <link rel="stylesheet" href="firstStyleSheet.css">

    <link rel="stylesheet" href="secondStyleSheet.css">

</head>

firstStyleSheet.css 문서

@import url("thirdStyleSheet.css");

@import "fourthStyleSheet.css";

...

@import 규칙을 사용해도 추가하는 CSS 파일의 개수가 늘어나면 여전히 웹 서버의 부하는 커질 수밖에 없습니다.

따라서 웹 서버의 부하를 줄이기 위해 작성한 CSS 파일들을 적절히 분산해서 추가하는 방법이 필요해집니다.

 

@import 규칙을 이용하면 미디어 쿼리(media query)의 조건에 따라 필요한 CSS 파일만을 선별적으로 불러올 수 있습니다.

 

다음 예제는 프린트할 때에는 firstStyleSheet.css 파일을 불러오고, 스크린이 가로 방향으로 설정되어 있을 때는 secondStyleSheet.css 파일을 불러오는 예제입니다.

예제

<head>

    <title>@import 규칙</title>

    @import url("firstStyleSheet.css") print;

    @import "secondStyleSheet.css" screen and (orientation:landscape);

</head>

 

 

@font-face 규칙

@font-face 규칙은 웹 폰트(web font)를 정의할 때 사용하는 규칙입니다.

웹 폰트(web font)는 사용자의 컴퓨터에 설치되어 있지 않은 글꼴(font)을 웹 브라우저가 사용할 수 있게 해줍니다.

 

우선 웹 폰트를 서버에 올려놓고, CSS 파일에 @font-face 규칙을 사용하여 웹 폰트를 정의하고 추가합니다.

그러면 해당 웹 페이지에 접속하는 모든 웹 브라우저는 자동으로 서버에서 웹 폰트를 내려받아 해당 글꼴을 표시하게 됩니다.

<style>

    @font-face {

        font-family: "myWebFont";

        src: local("NanumGothic"), url("NanumGothic.eot"), url("NanumGothic.ttf"), url("NanumGothic.woff");

    }

    * { font-family: "myWebFont"; }

</style>

@font-face 규칙에 대한 더 자세한 사항은 추후 설명 드리도록 하겠습니다.

@media 규칙

CSS2에서는 @media 규칙을 통해 서로 다른 미디어 타입(media type)을 위한 맞춤식 스타일 시트를 지원합니다.

다음 예제는 HTML 문서가 스크린에 표현될 때와 프린트할 때 서로 다른 스타일을 적용해 주는 예제입니다.

<style>

    body { background-color: darkorange; }

    @media screen {

        body { background-color: black; color: white; }

    }

    @media print {

        body { background-color: white; color: black; }

    }

</style>

@media 규칙에 대한 더 자세한 사항은 추후 설명 드리도록 하겠습니다.

 

 

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

'IT > Web' 카테고리의 다른 글

CSS3 선형 그래디언트(gradient)  (0) 2020.03.26
CSS3 모듈 - 밴더 프리픽스  (0) 2020.03.26
CSS 툴팁(tooltip) 효과  (0) 2020.03.20
CSS 드롭다운(dropdown) 매뉴 설정  (0) 2020.03.20
CSS 네비게이션 바(navigation bar) 링크, 수직, 수평  (0) 2020.03.20

관련글

댓글

티스토리툴바