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 / 표(table) 꾸미기 / 크기 정하기

CSS / 표(table) 꾸미기 / 크기 정하기

표와 셀의 기본 크기 표와 셀의 크기는 정해져있지 않습니다. 내용이 짧으면 작게, 내용이 길면 크게 표와 셀이 만들어집니다. 의도하지 않은 결과가 나오지 않게 하려면 크기를 정하는 게 좋습니다. 크기를 직접 정할 때 사용하는 속성은 width 속성과 height 속성입니다. 다음은 크기를 파악하기 위해 테두리만 추가한 간단한 표입니다. 여기에 스타일을 추가해서 크기를 변경해보도록 하겠습니다. <!doctype html> <html lang="ko"> ...

CSS / 표(table) 꾸미기 / 틀 고정(행 또는 열 고정) 만들기

CSS / 표(table) 꾸미기 / 틀 고정(행 또는 열 고정) 만들기

엑셀에 틀 고정이라는 기능이 있다. 틀 고정을 사용하면 상하 또는 좌우로 스크롤해도 항상 보이는 행 또는 열을 만들 수 있다. CSS로도 같은 효과를 낼 수 있다. 이를 구현하기 위해 사용하는 속성은 display: sticky이다. 예를 들어 다음과 같은 표가 있다고 하자. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

CSS / CSS로 문자열 자르기 - 한 줄인 경우, 여러 줄인 경우

CSS / CSS로 문자열 자르기 - 한 줄인 경우, 여러 줄인 경우

웹페이지에 출력하는 문자열의 길이는 서버단에서 조절하는 게 보통입니다. 하지만, 어떤 경우에는 그게 불가능할 수 있습니다. 이미 전송 받은 문자열을 잘라야 하는 상황이 생길 수 있습니다. CSS를 이용하여 문자열의 일부만 보여주는 방법을 소개해드립니다. 한 줄인 경우 예제 문자열이 길면 다음처럼 화면 끝에서 줄바꿈되는 것이 기본 모양입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> p.a { font-family: sans-serif; font-size: 20px; } </style> </head> <body> <p class="a">Lorem ipsum dolor sit ...

CSS / text-align / 문단 정렬하는 속성

CSS / text-align / 문단 정렬하는 속성

text-align 문단 정렬 방식을 정하는 속성은 text-align입니다. 속성의 값은 다음과 같습니다. left : 왼쪽 정렬 right : 오른쪽 정렬 center : 가운데 정렬 justify : 양쪽 정렬 initial : 기본값으로 설정 inherit : 부모 요소의 속성값을 상속 받음 예제 첫 번째 문단은 왼쪽 정렬입니다. 두 번째 문단은 오른쪽 정렬입니다. 세 번째 문단은 가운데 정렬입니다. 네 번째 문단은 양쪽 정렬입니다. 양쪽 모두를 가지런하게 ...

CSS / 선택자(Selector) / 가상 요소와 가상 클래스 순서

CSS / 선택자(Selector) / 가상 요소와 가상 클래스 순서

가상 요소(Pseudo-elements)를 이용하면 특정 요소 앞에 문자열이나 이미지를 넣을 수 있습니다. HTML을 변경하지 않고 요소를 추가할 수 있는 유용한 선택자입니다. 다음은 가상 요소를 이용하여 Hello라는 문자열을 추가한 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> h1:before ...

CSS / white-space / 공백 처리 방법 정하는 속성

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개의 ...

CSS / 문법

CSS / 문법

문법 다음은 가장 간단한 CSS 코드입니다. h1 { color: red } h1, color, red 세 개의 단어가 있는데 각각 선택자, 속성, 값이라고 합니다. 선택자(selector) : 무엇을 꾸밀지 정합니다. h1은 h1 요소를 꾸미겠다는 뜻입니다. 속성(property) : 어떤 모양을 꾸밀지 정합니다. color는 색을 꾸미겠다는 뜻입니다. 값(value) : 어떻게 꾸밀지 정합니다. red는 빨간색으로 만들겠다는 뜻입니다. 즉, CSS 코드는 다음처럼 구성됩니다. selector ...

CSS / padding - 안쪽 여백, margin - 바깥 여백

CSS / padding - 안쪽 여백, margin - 바깥 여백

여백에는 안쪽 여백과 바깥 여백이 있다. 안쪽 여백은 padding 속성으로, 바깥 여백은 margin 속성으로 정한다. 여백을 정하면 요소의 크기가 바뀔 수 있다. 어떤 기준으로 크기를 정할 지는 box-sizing 속성으로 정한다. 속성값 부여하기 padding과 margin 속성에 값을 부여하는 방법은 다음과 같다. padding: xx yy zz ww; margin: xx yy zz ww; xx는 위, yy는 오른쪽, zz는 아래, ww는 ...

CSS / Flex / display

CSS / Flex / display

display: flex Flex로 요소를 배열하고 싶을 때 Container에 display: flex;를 추가합니다. 아래와 같은 문서에... <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> .jb-container { padding: 10px; ...

CSS / word-wrap / 긴 단어 처리 방법 정하는 속성

CSS / word-wrap / 긴 단어 처리 방법 정하는 속성

개요 word-wrap으로 띄어쓰기가 없는 긴 단어를 어떻게 처리할지 정합니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 3 문법 word-wrap: normal | break-word | initial | inherit normal : break point에서 줄바꿈합니다. break-word : 요소의 경계에서 break point가 아니어도 줄바꿈을 합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. word-break 속성의 값이 keep-all이면 단어가, break-all이면 ...