CSS _컬러

💻Coding/📒 CSS

CSS _컬러_color

음은응 2021. 11. 23. 10:53

728x90

CSS _컬러_color

color는 색을 지정하는 속성으로 3가지 방법으로 속성값을 줄 수 있습니다.
※색상의 이름이나 값은 외울 필요없이 그때 필요한 컬러는 검색을 통하거나
포토샵에서 컬러명을 복사해서 붙여넣으시면 됩니다!
↓↓↓

[ CSS - font 문법 ]

<style>
    선택자 { color : 색상값; }
</style>

▶ color의 속성값을 작성하는 3가지 방법!
1) 색상명 : 색상을 부르는 고유명으로 작성
2) #000000 : 색상을 16진수로 작성
3) rgb (0, 0, 0) : 색상을 rgb값으로 표기
※ 투명도를 조절하고 싶을 때는 color : rgba (0, 0, 0, 투명도)

▶ font-weight 실전 예시

[ html - css 작성 코드 ]

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>color</title>
    <!-- css 컬러 적용 부분 -->
    <style>
        p:first-child {
            color: red;
        }
        p:nth-child(2) {
            color: #ca00c0;
        }
        p:nth-child(3) {
            color: rgb(20, 240, 30);
        }
        p:nth-child(4) {
            color: rgb(240, 137, 20, 0.5);
        }
    </style>
</head>
<body>
    <h2>color : 속성값</h2>
    <div>
        <p>색상명으로 컬러 바꾸기</p>
        <p>16진수로 컬러 바꾸기</p>
        <p>rgb값으로 컬러 바꾸기</p>
        <p>투명도 조절하기</p>
    </div>
</body>
</html>

[ 실행 화면의 변화 ]

↓ css style 적용 전 화면

↓ css style 적용 화면

728x90

저작자표시 비영리 변경금지 (새창열림)