Easy ways

[CSS] 스타일 색상, 폰트 설정 법 본문

프론트엔드/Html Css

[CSS] 스타일 색상, 폰트 설정 법

softColors 2023. 8. 25. 00:17
반응형

CSS 스타일은 부모태그에서 상속된다.

 

CSS는 글자색 배경색 테두리 색등 색상을 표현하기 위한 다양한 방법을 제공하며

red, green과 같이 단어로도 색상 설정이 가능합니다. 

단어 리스트 링크 : https://www.w3.org/wiki/CSS/Properties/color/keywords

 

CSS/Properties/color/keywords - W3C Wiki

Color keywords Basic Colors Named Numeric Color name Hex rgb Decimal     black #000000 0,0,0     silver #C0C0C0 192,192,192     gray #808080 128,128,128     white #FFFFFF 255,255,255     maroon #800000 128,0,0     red #FF0000 255,0,0     pu

www.w3.org

 

색상 코드 종류

 

  • RGB 코드

           ex)    softColors { color : rgb(255,255,255);}

 

  • RGBA 코드 ( 마지막 투명도 함수인 알파(alpha) 값 추가)

            ex)    softColors { color : rgba(255,255,255);}

 

  • 16진수 컬러코드 컬러 색상 16진수 표현

            ex)    softColors { color : #FFFFFF; }

 

글자를 표현하는 스타일

  •  font-style : 글자 스타일 ex) 기울임
  •  font-weight : 글자 두께 (범위 : 100~900) 
  • font-variant : 여러기능이있으나 주로 대소문제 강제전환에 쓰임 
  • font-size : 글자 크기(단위 : px(픽셀), 반응형 웹에선 em) 
  • font-family : 폰트이름
  • text-align : 글자 정렬 (center, left, right)
  • text-decoration : 밑줄 여부 및 색상  
    /* 밑줄 : underline, 윗줄 : overline, 취소선: line-through (동시에 여러개도 가능) */
  • background-color : 글자 뒷 배경 색상 

 

예제 코드

<!doctype html>
<html>
    <head>
        <link href="https://fonts.googleapis.com/css?family=Tangerine" rel = "stylesheet" type = "text/css">
        <style>
            SoftColor { 
                color: wheat; 
                font-style : italic; /* 기울임꼴 */
                font-weight : 800; /* 글자 두께 (범위 : 100~900) */
                font-variant : small-caps; /* 여러기능이있으나 주로 대소문제 강제전환에 쓰임 */
                font-size : 20px; /* 글자 크기(단위 : px(픽셀), 반응형 웹에선 em) */
                font-family : Tangerine; /* 폰트이름, 지금은 head에서 google api를 통해 tangerine을 불러옴*/
                text-align : center; /* 글자 정렬, legt, right, center */
                text-decoration : underline yellow; 
                /* 밑줄 : underline, 윗줄 : overline, 취소선: line-through (동시에 여러개도 가능) */
                background-color:brown; }
        </style>

</head>
    <body>

        <SoftColor> Nice meet you. I'm Soft Colors  </SoftColor>
    </body>
</html>

 

 

 

반응형

'프론트엔드 > Html Css' 카테고리의 다른 글

[HTML] 이미지 표지 활성화(display)  (0) 2023.08.25
[Html, CSS] 웹페이지 이미지 표현 (margin,padding, border, visibility)  (0) 2022.12.17
[웹 기초] CSS란? CSS의 기초와 예제  (0) 2022.12.04
[HTML] Input Tag 총 정리  (0) 2022.11.17
[웹서버 기초]HTML 이란? (개념설명, 환경구축, 예제)  (0) 2022.09.23
'프론트엔드/Html Css' Related Articles more
Comments