CSS / background-color / 배경색을 정하는 속성
개요
background-color로 배경의 색을 정합니다. 그 색으로 border와 padding을 포함한 영역을 칠합니다. margin 영역은 칠하지 않습니다.
- 기본값 : transparent
- 상속 : No
- 애니메이션 : Yes
- 버전 : CSS Level 1
문법
background-color: transparent | color | initial | inherit
- transparent : 배경색이 없습니다.
- color : 색을 정합니다.
- initial : 기본값으로 설정합니다.
- inherit : 부모 요소의 속성값을 상속받습니다.
예제
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
.a {
background-color: #BBDEFB;
}
.b {
background-color: #BBDEFB;
padding: 10px 20px;
}
.c {
background-color: #BBDEFB;
margin: 10px 20px;
}
</style>
</head>
<body>
<h1 class="a">Lorem</h1>
<h1 class="b">Lorem</h1>
<h1 class="c">Lorem</h1>
</body>
</html>
브라우저 지원
- Chrome : 1.0+
- Firefox : 1.0+
- Internet Explorer : 4.0+
- Opera : 3.5+
- Safari : 1.0+
Related Posts
표와 셀의 기본 크기 표와 셀의 크기는 정해져있지 않습니다. 내용이 짧으면 작게, 내용이 길면 크게 표와 셀이 만들어집니다. 의도하지 않은 결과가 나오지 않게 하려면 크기를 정하는 게 좋습니다. 크기를 직접 정할 때 사용하는 속성은 width 속성과 height 속성입니다. 다음은 크기를 파악하기 위해 테두리만 추가한 간단한 표입니다. 여기에 스타일을 추가해서 크기를 변경해보도록 하겠습니다. <!doctype html> <html lang="ko"> ...
CSS / 선택자(Selector) / 아이디 선택자, 클래스 선택자
아이디 선택자 아이디 선택자(ID Selector)는 특정 값을 id 속성(attribute)의 값으로 갖는 요소(element)를 선택합니다. 속성값 앞에 #을 붙여 아이디임을 나타냅니다. 예를 들어 #abc { color: red; } 는 id 속성값으로 abc를 갖는 요소를 빨간색으로 만듭니다. 클래스 선택자 클래스 선택자 클래스 선택자(Class Selector)는 특정 값을 class 속성(attribute)의 값으로 갖는 요소(element)를 선택합니다. 속성값 앞에 .을 붙여 클래스임을 나타냅니다. 예를 들어 .abc 는 ...
CSS / CSS / 선택자(Selector) / 가상 요소와 가상 클래스 순서
가상 요소를 이용하면 특정 요소 앞에 문자열이나 이미지를 넣을 수 있습니다. HTML을 변경하지 않고 요소를 추가할 수 있는 유용한 선택자입니다. 다음은 가상 요소를 이용하여 Hello라는 문자열을 추가한 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...
CSS / line-height / 줄 높이 정하는 속성
개요 line-height는 줄 높이를 정하는 속성입니다. 기본값 : normal 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1 문법 line-height: normal | length | number | percentage | initial | inherit normal : 웹브라우저에서 정한 기본값입니다. 보통 1.2입니다. length : 길이로 줄 높이를 정합니다. number : 글자 크기의 몇 배인지로 줄 높이를 정합니다. percentage : 글자 크기의 몇 %로 줄 ...
개요 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> ...
CSS / border-collapse / 표(table)의 테두리와 셀(td)의 테두리 사이의 간격 처리 방식 정하는 속성
개요 border-collapse는 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 어떻게 처리할 지 정합니다. 기본값 : separate 상속 : Yes 애니메이션 : No 버전 : CSS Level 2 문법 border-collapse: separate | collapse | initial | inherit separate : 표(table)의 테두리와 셀(td)의 테두리 사이에 간격을 둡니다. collapse : 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 없앱니다. 겹치는 부분은 한 줄로 나타냅니다. initial : 기본값으로 설정합니다. inherit ...
CSS / display 속성의 값을 inline 또는 inline-block으로 했을 때 여백 조정하는 방법
inline 또는 inline-block의 여백 display 속성값으로 inline 또는 inline-block으로 정하면 요소들이 가로로 배열됩니다. 이 때 요소와 요소 사이에 여백이 생깁니다. 예를 들어 다음과 같이 순서 없는 목록을 가로로 배열해보겠습니다.(여백을 파악하기 위해 테두리를 만들었습니다.) <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...
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 ...
CSS / 선택자(Selector) / 하위 선택자, 자식 선택자, 형제 선택자, 인접 형제 선택자
하위 선택자 하위 선택자(Descendant Selector)는 특정 요소의 하위에 있는 요소를 선택합니다. 예를 들어 div blockquote 는 div 요소의 하위에 있는 blockqoute 요소를 선택합니다. 이때 div와 blockquote 사이에 요소가 더 있어도 선택이 됩니다. 즉 <div> <blockquote>...</blockquote> </div> 일 때도 blockquote를 선택하고, <div> <aside> <blockquote>...</blockquote> </aside> </div> 일 때도 blockquote를 선택합니다. 자식 선택자 자식 선택자(Child Selector)는 특정 요소의 자식 ...
CSS / background-size / 배경 이미지의 가로 크기와 세로 크기를 정하는 속성
개요 background-size로 배경 이미지의 가로 크기와 세로 크기를 정할 수 있습니다. 기본값 : auto 상속 : No 애니메이션 : Yes 버전 : CSS Level 3 문법 background-size: auto | length | cover | contain | initial | inherit auto : 이미지 크기를 유지합니다. length : 값을 두 개 넣으면 첫번째 값이 가로 크기, 두번째 값이 세로 크기입니다. 값을 한 개 ...