CSS / color / 글자 색 정하는 속성
개요
color로 텍스트의 색을 정합니다.
- 상속 : Yes
- 애니메이션 : Yes
- 버전 : CSS Level 1
문법
color: color | initial | inherit
- color : 색을 정합니다.
- initial : 기본값으로 설정합니다.
- inherit : 부모 요소의 속성값을 상속받습니다.
예제
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
.jb-red {
color: red;
}
</style>
</head>
<body>
<h1 class="jb-red">Lorem ipsum dolor sit amet.</h1>
</body>
</html>
Related Posts
CSS / linear-gradient - 선형 그라데이션 효과 만들기
linear-gradient linear-gradient는 CSS3에서 추가된 것으로, 선형 그라데이션 효과를 만듭니다. 인터넷 익스플로러는 버전 10 이상에서 사용할 수 있습니다. 기본 문법 linear-gradient( direction, color1, color2, …, color3 ) direction에는 그라데이션 방향을 입력합니다. to bottom : 위에서 아래로 그라데이션을 만듭니다. (기본값) to top : 아래에서 위로 그라데이션을 만듭니다. to left : 오른쪽에서 왼쪽으로 그라데이션을 만듭니다. to right : 왼쪽에서 오른쪽으로 그라데이션을 ...
CSS / 마우스로 텍스트 드래그했을 때 배경색, 글자색 바꾸기
웹브라우저에서 텍스트를 마우스로 드래그하면 선택된 글자는 파란색 배경에 흰색을 바뀝니다. 이 색은 CSS로 바꿀 수 있습니다. 사용하는 선택자는 가상 요소 ::selection입니다. 다음은 텍스트를 선택했을 때 배경은 검은색으로, 글자는 노란색으로 만드는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ::selection { background-color: black; color: yellow; } </style> </head> <body> <h1>Lorem ipsum dolor sit amet</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. ...
CSS / caption-side / 표(table)의 캡션의 위치를 정하는 속성
개요 caption-side는 표(table)의 캡션의 위치를 정하는 속성이다. 기본값 : top 상속 : Yes 애니메이션 : No 버전 : CSS Level 2 문법 caption-side: top | bottom | initial | inherit top : 기본값으로, 표의 위에 캡션을 위치시킨다. bottom : 표의 아래에 캡션을 위치시킨다. initial : 기본값으로 설정한다. inherit : 부모 요소의 속성값을 상속 받는다. 예제 <!doctype html> <html lang="ko"> <head> ...
CSS / box-shadow / 박스에 그림자 효과 만드는 속성
개요 box-shadow는 선택한 요소에 그림자 효과를 만들어주는 속성이다. 기본값 : none 상속 : No 애니메이션 : Yes 버전 : CSS Level 3 글자에 그림자 효과를 주고 싶다면 text-shadow를 사용한다. 문법 box-shadow: none | x-position y-position blur spread color | inset | initial | inherit none : 그림자 효과를 없앤다. x-position : 가로 위치이다. 양수면 오른쪽에, 음수면 왼쪽에 그림자가 만들어진다. (필수) y-position ...
CSS / background-attachment / 배경 이미지의 스크롤 여부를 정하는 속성
개요 background-attachment로 배경 이미지의 스크롤 여부를 정합니다. 기본값 : scroll 상속 : No 애니메이션 : No 버전 : CSS Level 1 문법 background-attachment: scroll | fixed | local | initial | inherit scroll : 선택한 요소와 같이 움직입니다. 내용을 스크롤하면 배경 이미지는 스크롤되지 않습니다. fixed : 움직이지 않습니다. local : 선택한 요소와 같이 움직입니다. 내용을 스크롤하면 배경 이미지도 스크롤됩니다. initial : 기본값으로 ...
CSS / display 속성으로 표 만들기 - table, table-row, table-cell
display 속성값 중 표와 관련된 값들 display 속성값으로 table, table-row, table-cell 등을 사용해서 요소를 표(table)처럼 표현할 수 있습니다. 표처럼 보이기 위해 사용할 수 있는 속성값들은 다음과 같습니다. table : <table> 요소처럼 표현합니다. table-caption : <caption> 요소처럼 표현합니다. table-column-group : <colgroup> 요소처럼 표현합니다. table-header-group : <thead> 요소처럼 표현합니다. table-footer-group : <tfoot> 요소처럼 표현합니다. table-row-group : <tbody> 요소처럼 표현합니다. table-cell ...
개요 color로 텍스트의 색을 정합니다. 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1 문법 color: color | initial | inherit color : 색을 정합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...
개요 border는 테두리를 만드는 속성입니다. 위, 오른쪽, 아래, 왼쪽 선을 한 번에 정합니다. 기본값 : medium, none, color 상속 : No 애니메이션 : Yes 버전 : CSS Level 1 문법 border: border-width border-style border-color | initial | inherit border-width : 선의 두께를 정합니다. 기본값은 medium입니다. border-style : 선의 모양을 정합니다. 기본값은 none입니다. border-color : 선의 색을 정합니다. 기본값은 꾸미려는 요소의 ...
CSS / white-space / 공백 처리 방법 정하는 속성
개요 white-space는 스페이스와 탭, 줄바꿈, 자동줄바꿈을 어떻게 처리할지 정하는 속성입니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 1 문법 white-space: normal | nowrap | pre | pre-wrap | pre-line | initial | inherit normal, nowrap, pre, pre-wrap, pre-line : 아래 표 참고 initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 스페이스와 탭1 줄바꿈2 자동 줄바꿈3 normal 병합 병합 O nowrap 병합 병합 X pre 보존 보존 X pre-wrap 보존 보존 O pre-line 병합 보존 O 연속된 스페이스와 탭의 처리 방법입니다. 병합은 1개의 ...
목록의 내용만 가운데 정렬하기 목록 자체가 아니라 목록 안의 내용만 가운데 정렬할 때는 text-align 속성을 사용합니다. ul { text-align: center; } 목록 요소 자체를 가운데 정렬하기 목록 요소 자체를 가운데 정렬할 때는 margin 속성을 사용합니다. ul, ol의 기본 가로 크기는 100%이므로, 가로 크기를 지정해줘야 가운데로 정렬됩니다. ul { width: 300px; margin-left: auto; ...