HTML+CSS 고급 - 그래픽요소 표현(배경이미지, 그림자효과)

배경 색상과 이미지의 표현을 알아봅니다. 배경색은 background 혹은 길게 background-color로 스타일이 있고 속성값으로는 16진수로 #000000 표기하거나, 목적에 따라서 투명도를 고려해서는 rgba(0,0,0,1.0)과 같이 Opacity를 적용할 내용을 추가해서 표기하기도 합니다.  

 

컬러픽커 | 그라디언트 | 텍스트 그림자  | 박스모델 그림자 | 필터(흑백/블러)

---

 

body 배경이미지로 활용한 PNG 이미지

 

head와 body에 삽입하는 코딩소스이다.

CSS Backgrounds (w3schools.com)

CSS Backgrounds

 

body 
{
  background-color: #ffffff;  background-image: url("img_tree.png");  background-repeat: no-repeat;  background-position: right top;
}


body 
{
  background: #ffffff url("img_tree.png") no-repeat right top;
}

 

한줄로 표현하는 배경처리 짧은 CSS

Tryit Editor v3.7 (w3schools.com)

W3Schools online HTML editor

 

 

 

 

 

 

결과물을 다운받아보면 적용된 예가 있으니 영상과 함께 참고하세요.

폰트어썸6 아이콘을 포함 스마트문화앱 html 소스
▶ Download

업데이트한 index.html 파일을 아래에서 다운로드 후 html 폴더에 삽입하고 따라하세요.

index.html

0.00MB