Programming Language/Javascript, ...

[CSS3] 글자

Ma_Sand 2022. 4. 10. 16:35
반응형

글자와 관련된 style

 1) color

   : rgb 색상 사이트에 들어가서 색상의 rgb를 알 수 있다.

   - color: rgb(red, green, blue);

   - color: rgba(red, green, blue, alpha);   => alpha는 투명도(1이 최대)

   - color: hsl(hue, saturation, lightness);

   - color: hsla(hue, saturation, lightness, alpha);

 

 

 

 2) text-decoration(글자 꾸밈)

   - text-decoration: underline;  (밑줄)

   - text-decoration: line-through;  (취소선)

   - text-decoration: overline;  (윗줄)

   - text-decoration: none;  (어떠한 꾸밈 없음)

 

 

 

 3) text-shadow(글자 그림자)

   - text-shadow: 가로(px) 세로(px) 색상

   - text-shadow: 가로(px) 세로(px) 번짐정도(px) 색상

 

 

 

 4) white-space(글자 간 여백)

   - white-space: normal;  (기본값)

    : 여러 개의 공백을 입력해도 하나만 표시되며, 텍스트가 길어지면 자동으로 줄바꿈된다.

   - white-space: nowrap;

    : 여러 개의 공백을 입력해도 하나만 표시되며, 텍스트가 길어도 줄바꿈되지 않고 한 줄로 표시된다.

   - white-space: pre;

    : 여러 개의 공백을 입력하면 그대로 표시되며, 코드에 줄바꿈이 있으면 그대로 줄바꿈된다.

   - white-space: pre-line;

    : 여러 개의 공백을 입력해도 하나만 표시되며, 코드에 줄바꿈이 없으면 자동으로 줄바꿈되고

       줄바꿈이 있으면 그대로 줄바꿈된다.

반응형