민혁이의 IT스토리

[혼자 공부해서 개발까지]part8 - 색상과 배경 설정 본문

혼자 공부해서 개발까지/CSS

[혼자 공부해서 개발까지]part8 - 색상과 배경 설정

FE_Minhyuk 2025. 2. 21. 12:00

목차

  • 텍스트 색상 설정 방법
  • 배경 설정 방법

 

텍스트 색상 설정 방법

웹페이지에서 텍스트의 색상을 설정 할 수 있는 방법은 여러가지가 있습니다. 대표적으로 많이 쓰는 방법으로는

색상 이름, HEX 코드 , RGB 값 등이 있습니다. 우선 천천히 하나씩 알아보겠습니다!

 

    • 색상 이름  : 방법은 간단하고 직관적이지만, 사용할 수 있는 색상의 수가 제한적입니다.
               장점 : 코드가 간결하고 이해하기 쉽습니다.
               단점 : 색상 이름의 선택지가 제한적이고, 명확한 색상 선택이 어려울 수 있습니다.  
      p {
  color: red; /* 텍스트 색상을 빨간색으로 설정 */
}
       

    • HEX 코드 :  HEX 코드는 16진수로 색상을 표현하는 방법입니다. # 기호 뒤에 6자리의 숫자와 알파벳을 사용합니다.
               장점:      매우 세밀한 색상 설정이 가능합니다.
               단점: 사람이 읽기 어려울 수 있습니다.
       
      p {
  color: #FF0000; /* 빨간색 */
}


  • RGB 값 :  RGB는 빨강(R), 초록(G), 파랑(B) 세 가지 색상의 조합으로 색을 나타내는 방식입니다. 각각의 색상 값은 0부터 255까지의 범위에서 설정할 수 있습니다.
           장점:  색상을 직관적으로 이해할 수 있고, 웹에서 사용되는 일반적인 방식입니다.
           단점:  색상과 관련된 수치에 대해 이해할 필요가 있습니다. 
    p {
  color: rgb(255, 0, 0); /* 빨간색 */
}


    보기 화면

 

 

 

배경 설정 방법

웹페이지에서 배경(background)는 태그가 가지고 있는 너비(width),높이(height),여백(padding)의 공간을 의미합니다. margin(x) // 배경을 설정하는 방법도 다양합니다. 배경색, 배경이미지  등을 CSS로 쉽게 지정할 수 있습니다.

 

  • 배경색 설정: 배경색 설정은 텍스트색상 설정이랑 다르지 않습니다.   색상 이름, HEX 코드 , RGB 값 있니다.
     
    p {
  background-color: #f0f0f0; /* 회색 배경 */
}


    예시화면

 

 

  • 배경 이미지 설정: a태그를 사용하지 않아도 css를 이용하면 배경에 이미지를 넣을 수 있습니다. 이미지 URL을 사용하여 배경 이미지를 설정합니다. 



<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        #container{
            width: 300px;
            height: 300px;
        }
        div {
            background-image: url('./image/프로필.jpg');
            background-size: cover; /* 이미지가 화면을 덮도록 설정 */
            background-position: center; /* 이미지가 화면 중앙에 위치하도록 설정 */
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div id="container"></div>
</body>

 

 

예시 화면

 

 

 

 

 

 

마무리

CSS에서 색상과 배경 설정은 웹 페이지의 시각적인 매력을 높이는 중요한 요소입니다. 색상 설정, 배경 설정을 적절히 활용하면 더욱 화려하고 효과적인 웹 디자인을 만들 수 있습니다. 그럼 저는 다음 파트로 찾아뵙겠습니다. 감사합니😊

'혼자 공부해서 개발까지 > CSS' 카테고리의 다른 글

[혼자 공부해서 개발까지]part9 - 테두리와 그림자 효과  (0) 2025.02.25
[혼자 공부해서 개발까지]part7 - 글꼴과 텍스트 스타일링  (0) 2025.02.18
[혼자 공부해서 개발까지] part6 - 스타일의 여백과 크기 설정 &값의 단위  (0) 2025.02.15
[혼자서 공부해서 개발까지] part5 - 웹 페이지 디자인의 첫걸음,CSS 기초  (0) 2025.02.11
'혼자 공부해서 개발까지/CSS' Related Articles more