CSS 색
- 색상 이름으로 표현
<style>
.green { color: green; }
</style>- RGB 색상 값으로 표현
<style>
.green { color: rgb(0,128,0); }
</style>- 16진수 색상 값으로 표현
<style>
.green { color: #008000; }
</style>CSS 배경
- background-color : 해당 HTML 요소의 배경색을 설정
<style>
body { background-color: lightblue; }
</style>- background-image : 해당 HTML 요소의 배경 이미지를 설정
<style>
body { background-image: url("사진 파일 경로/이름.png"); }
</style>- background-repeat : 배경 이미지는 기본 설정으로 수평과 수직 방향으로 모두 반복되어 나타납니다. 하지만 이 속성을 사용하면 배경 이미지를 한 방향으로만 반복되도록 설정할 수 있습니다.(repeat - x (수평), repeat - y(수직), no-repeat(반복 x))
<style>
body { background-image: url("경로/이름.png"); background-repeat: repeat-x; }
</style>- background-position : 반복되지 않는 배경 이미지의 상대 위치(relative position)를 설정합니다.
<style>
body {
background-image: url("/examples/images/img_man.png");
background-repeat: no-repeat;
background-position: top right;
}
</style>background-position 에서 사용할 수 있는 postion 조합
1. left top
2. left center
3. left bottom
4. right top
5. right center
6. right bottom
7. center top
8. center center
9. center bottom
또한 position 정보 말고도 퍼센트(%)나 픽셀(px)을 사용하여 상대 위치를 직접 명시할 수 있습니다. 이때 상대 위치를 결정하는 기준은 해당 요소의 왼쪽 상단 입니다.
- background-attachment : 위치가 설정된 배경 이미지를 해당 위치에 고정시킨다. 고정된 배경 이미지는 스크롤과 무관하게 화면의 위치에서 이동하지 않습니다.
<style>
body {
background-image: url("/examples/images/img_man.png");
background-repeat: no-repeat;
background-position: left bottom;
background-attachment: fixed;
}
</style>CSS 텍스트
- color : 텍스트의 색상을 설정합니다. 기본 색상은 검은색입니다. <body> 태그에 명시된 color 속성 값은 웹 페이지 내의 모든 텍스트 요소에 적용이 됩니다. 하지만 각 요소 별로 선언된 color 속성값이 있다면 해당 값이 우선 적용됩니다.
<style>
body { color: red; }
p { color: maroon; }
</style>body에 설정된 text 컬러는 red 이지만 p의 요소 에서 maroon으로 설정 했기 때문에 body에서 모든 텏트는 red 이지만 <p>는 maroon 색으로 표현됩니다.
- direction : 텍스트가 써지는 방향을 설정합니다. 기본적으로는 -> 방향(ltr)으로 쓰이지만 direction 속성이 right-to-left(rtl)로 설정되면 <- 방향으로 써집니다.
<style>
.rightToLeft { direction: rtl; }
</style>- letter-spacing : 텍스트 내에서 글자 사이의 간격을 설정합니다.
<style>
.decLetterSpacing { letter-spacing: -3px; }
.incLetterSpacing { letter-spacing: 10px; }
</style>- word-spacing : 텍스트 내에서 단어 사이의 간격을 설정합니다. 문자 간격이 아닌 단어 간의 간격을 기준으로 설정합니다.
<style>
.decWordSpacing { word-spacing: -3px; }
.incWordSpacing { word-spacing: 10px; }
</style>- text-indent : 단락의 첫 줄에 들여쓰기를 할지 안 할지를 설정합니다. 웹 페이지에서 단락은 기본적으로 들여쓰기 설정이 되어있지 않습니다.
<style>
.paraIndent { text-indent: 30px; }
</style>- text-align : 텍스트의 수평 방향 정렬을 설정합니다. text-direction 속성과는 상관없이 우선 적용 됩니다.
<style>
h2 { text-align: left; }
h3 { text-align: right; }
h4 { text-align: center; }
</style>- text-decoration : 텍스트에 여러 가지 효과를 설정하거나 제거하는데 사용합니다.
<style>
h2 { text-decoration: overline; }
h3 { text-decoration: line-through; }
h4 { text-decoration: underline; }
a { text-decoration: none; }
</style>- text-transform : 텍스트에 포함된 영문자에 대한 대소문자를 설정합니다. 텍스트에 포함된 모든 영문자를 대문자나 소문자로 변경할 수 있고 첫 문자만도 대문자로 변경이 가능합니다.
<style>
h2 { text-transform: uppercase; }
h3 { text-transform: lowercase; }
h4 { text-transform: capitalize; }
</style>- line-height : 텍스트의 높이를 지정합니다. 텍스트 수직 정렬에도 응용되어 사용된다.
<style>
.narrowLineHeight { line-height: 0.8; }
.wideLineHeight { line-height: 1.8; }
</style>- text-shadow : 텍스트에 간단한 그림자 효과를 설정합니다.
<style>
h2 { text-shadow: 2px 1px #3399CC; }
</style>- px : 수평
- px : 수직
- color : 그림자 색
[출처] TCPSchool
'웹 > CSS' 카테고리의 다른 글
| CSS 박스 모델 (Box Model) Margin, Padding, border (0) | 2023.06.29 |
|---|---|
| CSS - 계단식 ( Cascade ) (0) | 2023.06.28 |
| CSS - 속성(3) (0) | 2023.06.27 |
| CSS - 속성(2) (0) | 2023.06.26 |
| CSS (0) | 2023.06.26 |