'웹 개발자' 태그의 글 목록

웹 개발자

2021. 4. 17. 23:16

저번 블로그에서는 글자 색을 변경 해보았습니다. 그러면 저희는 이제

배경 색을 바꾸는 법을 알아보겠습니다. CSS 에서는 배경색을 background 라고합니다.

태그 style 안에 background-color : " 색상" 이라고 작성 해주시면 됩니다.

저는 <body>태그와 <h1> 태그의 배경 색을 변경 해보겠습니다.

컬러를 지정해주는 방식은 3가지가 있습니다.

그럼 순서대로 설정해주는 코드를 보여드리겟습니다.

<body style="background-color : green">


	<h1 style="background-color : blue"> CSS 기초배우기 </h1>


</body>

바디 태그와 h1 태그에 안에 style 속성을 사용하여 색을 텍스트로 적어 두었습니다 .

이렇게 결과 가 나오신걸 볼수 있습니다.

<body style=" background-color: rgb(175, 240, 184);">


	<h1 style=" background-color: rgb(211, 240, 175);"> CSS 기초배우기 </h1>


</body>

저는 RGB 값을 눈으로 확인 하고 싶어 구글에 RGB To Hex를 검색하여 일일이 색을 확인하고 RGB값을 넣었습니다.

그리고 코드의 결과 입니다.

2.번에 있었던 RGB To Hex 를 이용을 하셔서 Hex 값을 확인 한후 적용하는 방식이 있습니다

코드를 보겠습니다.

<body style=" background-color: #FAE100;">


	<h1 style=" background-color: #3B1E1E;"> CSS 기초배우기 </h1>


</body>

이렇게 나온걸 확인 할수있습니다.

그리고 한가 지 팁을 드리면 3번째 HEx 컬러에 있는 rgb 값은 카카오톡 로고 의 색입니다.

이 정확한 색을 어떻게 알수 있는지는

Microsoft PowerToy

얼마전 유투브에서 소개해준 마이크로소프트 PowerToy 프로그램 리뷰를 보았다 . 아직 정식 출시 한것이 아니라 컴퓨터 운영체제에는 안들어있는 프로그램이다. 그래서 github 홈페이지를 들어가서

enjoymylife93.tistory.com

이 프로그램을 이용하면 마우스 끝에 있는 rgb 값을 확인해주는 프로그램으로 확인하여 작성 하였습니다.

이상입니다. 감사합니다.

PREV 1 NEXT