5. UI(User Inteface) 속성

1. 개요

- 화면에 출력될 element들에 디자인 요소를 추가하는 속성들

속성	의미	속성	의미
cursor	마우스 모양을 변경	background-image	배경을 이미지로 지정
classification	리스트의 글머리 기호를 변경	background-attachment	배경 이미지를 고정하거나 scroll여부를 지정
display	element가 화면에 출력되는 방식을 조정	background-repeat	배경 그림의 반복 여부 지정
background-color	배경색 지정	background-position	배경 그림의 위치를 지정
		background	배경 관련 속성 한번에 지정

 

 

 

2. display

- {display : none | block | inline | ... }

 

 

 

3. background-color

- {background-color : color | transparent}

*transparent : 투명

 

 

 

4. background-image

- {background-image : url("이미지경로");}

- 배경 이미지가 배경크기보다 작으면, 격자모양으로 반복해서 나타남

 

 

 

5. background-repeat

- {background-repeat: repeat-x | repeat-y | no-repeat;}

 

 

 

6. background-position

- {background-position: 백분율(%) | 길이 값 | 수평 값 수직 값;}

- 수평 값 = left, center, right

- 수직 값 = top, center, bottom

 

 

[예시코드]

<style>
    body{
        background-image: url(../img/고양.jpg);
        background-position: center center;
        background-repeat: no-repeat;
    }
</style>

 

 

[결과]