웹사이트나 티스토리를 보면 배경을 색으로 지정 해놓은 것이 아닌 

이미지를 배경으로 한곳을 종종 볼수 있습니다 . 이번에는

색이아닌 background 로 이미지를 넣는 방법을 배워보도록 하겠습니다.

 

원하는 이미지를 html이 저장되어 있는 폴더에 옮겨놓고 진행 하시면 됩니다.

 

<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
</head>
<body style=" background-image :url(unnamed.jpg);
  background-size : 100%; " >


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


</body>
</html>

저는 바디 태그에 백그라운드에 이미지를 첨부하겠습니다 .명령어는 다음 과같습니다

background-image : url (이미지파일이름) ;

그리고 이미지가 화면테 꽉차게 나올수 있다록 백그라운드 사이즈를 100%르 사용하였습니다.

 

 

결과 값은 이렇게 나왔습니다 구글에 검색 기본 배경화면입니다 필요하신분은

unnamed.jpg
1.04MB

이 사진을 사용하시면됩니다.

저작자표시

'개발 > CSS' 카테고리의 다른 글

css (배경) 기초 2편  (0) 2021.04.17
CSS (글자색) 기초 1편  (0) 2021.04.17
CSS 기초  (0) 2021.04.17

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

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

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

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

 

 

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

  1. 텍스트로 색을 지정해주는방식
  2. RGB값으로 지정해주는방식
  3. RGB의 HEX값으로 지정해주는 방식이 있습니다.

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

 

1. 텍스트로 색을 지정해주는 방식

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


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


</body>

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

 

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

 

2. RGB값으로 지정해주는 방식

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


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


</body>

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

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

3. RGB의 HEX값으로 지정해주는 방식

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

코드를 보겠습니다.

 

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


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


</body>

 

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

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

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

enjoymylife93.tistory.com/30

 

Microsoft PowerToy

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

enjoymylife93.tistory.com

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

 

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

저작자표시

'개발 > CSS' 카테고리의 다른 글

css (배경 1-2) 기초 2-1편  (0) 2021.04.18
CSS (글자색) 기초 1편  (0) 2021.04.17
CSS 기초  (0) 2021.04.17

CSS는 HTML을 기본지식으로 두고있으며 CSS를 공부하려면 HTML을 공부하고 진행하셔야 사용가능합니다.

이번 기초 1편에서는 글자의 색깔 을 바꾸는 것을 해보겠습니다.

일단 CSS 을 사용하려면 HTML태그에 Style을 사용 써주셔야합니다.

 

일단 제목의 색깔을 초록색으로 바꿔 보겠습니다 문법은 이렇습니다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset = "utf-8">
</head>
<body>

	<h1 style="color: green"> CSS 기초배우기 </h1>


</body>
</html>

 

style 안에 color : green 이라고 해주었습니다 이게 다입니다. 

결과 는 아래 사진에있습니다.

 

저작자표시

'개발 > CSS' 카테고리의 다른 글

css (배경 1-2) 기초 2-1편  (0) 2021.04.18
css (배경) 기초 2편  (0) 2021.04.17
CSS 기초  (0) 2021.04.17

HTML 은 웹문서를 만드는 가장 기초적인 Text와 태그 HyperText로 이루어져있습니다.

하지만 이것만으로는 웹을 만드는 소비자들에게는 불만이있었습니다. 그건 바로 디자인 면이 부족했습니다.

그래서 CSS 가 W3C에서 1996년 발표 되었습니다.

CSS 란 Cascading Style Sheets 의 약자로써 디자인과 선택자를 사용하여 더욱 태그들을 구별하기 쉽고

다양하게 디자인을 가능하게 해주는 언어입니다.

 

CSS 를 통해 폰트 여백 여러 디자인 측면을 갖출수 있게 해주었습니다.

현재 저희는 CSS 선택자로 속성명과 속성으로 이루어져있습니다.

 

저작자표시

'개발 > CSS' 카테고리의 다른 글

css (배경 1-2) 기초 2-1편  (0) 2021.04.18
css (배경) 기초 2편  (0) 2021.04.17
CSS (글자색) 기초 1편  (0) 2021.04.17

+ Recent posts

티스토리툴바