Form 요소
: 사용자의 입력을 받는 input 요소에도 다양한 스타일을 설정할 수 있다
> input 요소의 크기 설정
- width 속성을 이용하여 input 요소의 크기 설정 가능
<style>
input { width: 100%; padding: 10px 20px; margin: 5px 0; box-sizing: border-box; }
</style>
> input 요소의 테두리 설정
- border 속성을 이용하여 input 요소의 테두리 색상, 두께를 바꿀 수 있다
- 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>
> input 요소에 배경색 적용
- background-color 속성을 이용하여 input 요소의 배경색을 설정할 수 있다
- color 속성을 이용하여 input 요소의 텍스트 색상 변경 가능
<style>
input { background-color: #FFF8DC; color: olive; }
</style>
> 포커스를 가지고 있는 input 요소의 스타일 적용
- focus 선택자를 이용하여 해당 input 요소가 focus를 가지고 있을 때의 스타일을 별도로 설정할 수 있다
> input 요소에 icon이나 이미지 삽입
- background-image 속성을 이용하여 input 요소에 아이콘, 이미지를 삽입 가능
- background-position 속성을 이용하여 삽입한 아이콘, 이미지가 나타날 위치 설정 가능
> textarea 요소의 크기 조절
- resize 속성을 이용하여 textarea 요소의 크기 조절 가능
- resize 속성을 설정하면 해당 textarea 요소의 오른쪽 아래 부분에 핸들이 생겨 해당 요소의 크기를 조절할 수 있다
- resize 속성값
속성값 | 설명 |
none | 해당 요소 크기를 조절 불가능 (기본 설정) |
both | 높이와 너비 모두 조절 가능 |
horizontal | 너비만을 조절 가능 |
vertical | 높이만을 조절 가능 |
> select 요소에도 여러 가지 스타일을 적용할 수 있다
@규칙 (at-rule)
: W3C에서 규정하고 있는 몇몇 규칙들을 사용할 수 있다
다음은 많이 사용되는 대표적인 규칙들이다
> @import 규칙
- 다른 스타일 시트에서 스타일 규칙을 가져올 수 있는 규칙
- 이 규칙은 문자 인코딩을 지정하는 @charset 규칙을 제외하고 모든 다른 규칙보다 앞서 명시되어야 한다
- 보통 HTML 문서에는 여러 개의 <link> 태그를 사용하여 스타일 시트를 추가하지만, 이 방법은 추가하는 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";
...
- 위 방법을 사용해도 추가하는 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 규칙
- 웹 폰트(web font)를 정의할 때 사용하는 규칙
- 웹 폰트는 사용자의 컴퓨터에 정의되어 있지 않은 글꼴을 웹 브라우저가 사용할 수 있도록 해준다
- 웹 폰트를 서버에 올려놓고 @font-face 규칙을 사용하면, 해당 웹 페이지에 접속하는 모든 웹 브라우저는 서버에서 웹 폰트를 내려받아 해당 글꼴을 표시할 수 있다
<style>
@font-face {
font-family: "myWebFont";
src: local("NanumGothic"), url("NanumGothic.eot"), url("NanumGothic.ttf"), url("NanumGothic.woff");
}
* { font-family: "myWebFont"; }
</style>
> @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>
[참고] http://tcpschool.com/css/intro
'Web > HTML & CSS' 카테고리의 다른 글
[CSS] CSS3 (2) : 그림자 효과, 배경, 테두리, 텍스트, 웹 글꼴 (0) | 2021.07.07 |
---|---|
[CSS] CSS3 (1) : CSS3 모듈, 벤더 프리픽스, 색, 그래디언트 (0) | 2021.07.07 |
[CSS] CSS 고급 (1) : 내비게이션 바, 드롭다운, 툴팁 (0) | 2021.07.05 |
[CSS] CSS 선택자 : 선택자, 의사 클래스, 의사 요소, 속성 선택자 (0) | 2021.07.05 |
[CSS] CSS 위치 속성 : 디스플레이, 포지션, 플로트, 정렬 (0) | 2021.07.05 |