[CSS] 가상클래스, 컬러, 텍스트 속성, 배경

순서에 따른 가상 클래스

CSS 스타일을 주기 위해 클래스를 추가할 필요없이 요소 중에서 순서에 따라 원하는 특정 요소를 선택할 수 있습니다. 

<ul>
    <li>김사과</li>
    <li>오렌지</li>
    <li>이메론</li>
</ul>

 

• li:first-child  : li 요소 중에서 첫번째 해당하는 요소에 CSS를 적용합니다.
  ex) li:first-child { color : red; }
• li:last-child :  li 요소 중에서 마지막에 해당하는 요소에 CSS를 적용합니다.
• li:nth-child(n)  :  li 요소 중에서 n번째 요소에 CSS를 적용합니다.
  ex) li:nth-child(2) { color: orange; }
• li:nth-child(odd) : li 요소 중에서 홀수번째 요소에 CSS를 적용합니다.
• li:nth-child(even) : li 요소 중에서 짝수번째 요소에 CSS를 적용합니다.

 

• ::first-line : 해당 가상 요소는 텍스트의 첫번째 줄에만 특정 스타일을 적용합니다.
• ::first-letter : 텍스트의 첫 문자에 특정 스타일을 적용합니다.
• ::before : 보통 글이나 이미지, 그라데이션 등을 요소 앞에 삽입할 때 사용한다. <-- 추가로 입력을 하면 글자로 취급이안된다.
  한꺼번에 자그마한 이미지나,특수한 문자를 입력할 때 사용하기도 한다.
  ex) .class::before { content: "글자";}
• ::after : 보통 글이나 이미지, 그라데이션 등을 요소 뒤에 삽입시 사용합니다.

 

CSS 컬러

1. 색상 이름으로 표현
red, green, yellow, blue ...

 

2. RGB 색상값으로 표현
rgb(0~255, 0~255, 0~255)
rgb(0~255 정수, 0~255 정수, 0~255 정수, 0~1사이의 소수)
      -----------  -----------  ----------   --------------
             red             green             blue              alpha

p{color: rgb(0, 0, 255);  /* p 요소를 선택해서 글자 색상을 파란색으로 적용합니다. */
p{color: rgb(0, 0, 255, 0.5);  /* p 요소를 선택해서 글자 색상을 파란색으로 반투명하게 적용합니다. */

 

3.16진수 색상값으로 표현
16진수 색상값은 RGB 색상값을 각 각 16진수로 표현한 것입니다. 00부터 ~ FF까지 범위를 가지고 표현합니다.
p { color: #00FF00; } /* 녹색 */ --> { color: #0F0 } 중복되는 것들은 줄일 수 있다.
                 --- --- ---
                  R  G  B

 

CSS 텍스트

 

• color : 텍스트의 색상을 설정합니다. 웹페이지에서 텍스트의 기본 색상은 검정색입니다.
• letter-spacing : 텍스트 내에서 글자 사이의  간격을 설정합니다.
• word-spacing : 텍스트 내에서 단어 사이의 간격을 설정합니다.
• text-align : 텍스트 수평 방향 정렬을 설정합니다. ( left, right, center, justify )
• text-indent : 단락의 첫 줄에 들여쓰기를 할지, 안할지를 설정합니다. 웹 페이지에서 단락은 들여쓰기가 설정되어 있지 않습니다.
• line-height : 텍스트의 줄 간격(높이)을 설정합니다.

반갑습니다.

👆🏻이 네모칸의 간격을 line-height 라고 한다.

• text-decoration : 텍스트 여러가지 효과를 설정하거나 제거하는데 사용합니다. (none, underline, line-through, overline)
• underline : 밑줄 / line-through : 취소선 / overline : 윗줄
• text-shadow : 텍스트에 그림자 효과를 설정합니다.
  선택자 { text-shadow : 가로거리 세로거리 번짐정도 색상; }

* 번짐정도 : 그림자가 번지는 정도를 나타냅니다. 양수값을 사용하면 그림자가 모든 방향으로 퍼져나가고, 그림자가 크게 표시됩니다. 
반대로 음수값을 사용하면 그림자가 모든방향으로 축소되어 보입니다. 기본값은 0입니다.

• text-transform : 텍스트에 포함된 영문자에 대소문자를 설정합니다 ( uppercase, lowercase, capitalize )
• font-variant : 소문자를 작은 대문자, 즉 소문자 크기의 대문자로 설정합니다 ( small-caps )
• text-overflow : 텍스트가 기준선을 벗어나 넘칠 경우 넘치는 텍스트를 어떻게 처리할지 설정합니다.( clip, ellipsis )
• ellipsis : 넘치고 있다고 표현(생략부호 ... 표시)해준다.
• clip : 글자를 잘라버리는 것.
• whit-space : 스페이스와 탭, 줄바꿈, 자동 줄바꿈을 어떻게 처리할지 설정합니다.( nowrap )
• overflow : 기준선을 벗어 넘칠 경우 넘치는 값을 어떻게 처리할지 설정합니다. ( hidden )
• font-size : 텍스트의 크기를 설정합니다. 방식은 크게 2가지로 표현할 수 있다.

 

1. 절대적 크기

텍스트의 크기를 명시된 크기 그대로 설정하고자 할 때 사용합니다. 
절대적 크기로 설정된 텍스트는 모든 웹 브라우저에서 같은 크기로 표현됩니다.

px : 스크린의 픽셀을 기준으로 하는 절대적인 크기를 나타냅니다. 고정된 크기 단위이며 크기를 조절할 수 없다는 단점이 있습니다.

 

2. 상대적 크기

텍스트를 둘러싸고 있는 HTML 요소들의 크기에 따라 텍스트의 크기로 같이 변하는 방식입니다.

• % : 백분율 단위이며 기본 크기 (16px)를 100%로 놓고 그에 대한 상대적인 크기를 설정합니다.
• em : 배수 단위이며 글골의 기본 크기(16px)를 1em으로 놓고 그에 대한 상대적인 크기를 설정합니다. 웹 문서에서 사용되는 단위이며, pc외 모바일 등 다른 장치에서도 크기를 조절할 수 있습니다. 1em은 pc에서 16pc, 모바일에서는 12px로 표현됩니다. 부모 엘리먼트의 폰트 사이즈를 기준으로 글자 크기를 설정할 수 있습니다.
• rem : em과 비슷한 속성을 가지고 있으며, 루트 엘리먼트의 폰트 사이즈를 기준으로 글자 크기를 설정합니다.

 

font-family 

: 글꼴을 설정합니다. 하나의 글꼴만을 설정할 수 있고, 여러 개의 글꼴을 같이 설정할 수도 있습니다. 여러 개의 글꼴이 설정되어 있으면, 웹 브라우저에서는 앞에서부터 순서대로 글꼴을 적용합니다. 글꼴이 존재하지 않을 때 다음 글꼴이 사용되며, 글꼴 이름이 띄어쓰기가 있을 경우 반드시 따옴표로 감싸줘야 합니다.

선택자 { font-family : 글꼴이름, 글꼴이름 .. }

font-weight : 글자의 굵기를 설정합니다. 기본 굵기는 숫자 400과 같습니다.

* 숫자는 100 ~ 900을 사용할 수 있습니다. 

• bold : 굵은 굵기 숫자 700과 같다.
• bolder : 상속된 값보다 굵은 굵기를 표현.
• lighter : 상속된 값보다 얇은 굵기입니다.

 

웹 폰트

https://fonts.google.com/

 

CSS 배경

 

background-color : HTML 요소의 배경색을 설정합니다.

background-image : HTML 요소의 배경으로 나타날 배경 이미지를 설정합니다. 설정된 배경 이미지는 기본 설정으로 HTML 요소 전체에 걸쳐 반복되어 나타납니다.

background-image : url('배경이미지 위치'); /* 배경이미지는 해상도가 크면 좋다. */

background-repeat : 배경 이미지를 수평이나 수직 방향으로 반복하도록 설정합니다. ( repeat, repeat-x, repeat-y, no-repeat )

background-position : 반복되지 않는 배경 이미지의 상대 위치를 설정합니다. %나 px을 사용하여 상대위치를 직접 명시할 수도 있습니다. 상대 위치를 결정하는 기준은 해당 요소의 왼쪽 상단입니다.

left top(기본값)               center top                   right top

left center                         center                      right center

left bottom                 center bottom               right bottom

background-attachment : 위치가 설정된 배경 이미지를 원하는 위치에 고정시킬 수 있습니다. 
고정된 배경 이미지는 스크롤과 무관하게 화면의 위치에서 이동하지 않습니다. ( fixed )

background : 배경 속성을 한번에 적용합니다. 순서에 무관하게 나열하면 된다.