배경이미지 고정, ProgressBar 만들기

배경이미지 넣는 방법

태그 안에 배경이미지를 넣을 때에는 CSS에서 background-image속성을 기입해주면 된다.

background-image안에는 이미지경로 url()을 작성해줘야 한다.

ex) background-image : url(이미지경로);

배경 사이즈 변경

배경 이미지의 사이즈를 변경하고 싶을 때에는 background-image속성을 사용한다.

속성값으로는 width,height와 같이 길이값, %등이 들어갈 수 있다.

ex ) background-size : 100%;

배경이미지 반복 여부 속성

배경이미지가 바둑판처럼 반복될지 아니면 단 한장만 들어갈지 등에 대한 설정을 정할 수 있다.

background-repeat속성으로 반복 여부를 설정할 수 있고 안에 들어갈 수 있는 속성값은 아래와 같다.

• repeat : 가로 방향, 세로 방향으로 반복합니다.
• repeat-x : 가로 방향으로 반복합니다.
• repeat-y : 세로 방향으로 반복합니다.
• no-repeat : 반복하지 않습니다.
• initial : 기본값으로 설정합니다.
• inherit : 부모 요소의 속성값을 상속받습니다.

배경이미지 반복 여부 속성

배경이미지를 고정 하기 위해서는 background-attatchment 속성을 사용한다.

background-attachment에 들어갈 수 있는 속성값은 아래와 같다.

• scroll : 선택한 요소와 같이 움직입니다. 내용을 스크롤하면 배경 이미지는 스크롤되지 않습니다. 기본값이다.
• fixed : 움직이지 않습니다. 화면 왼쪽 위를 기준으로 정렬된다.
• local : 선택한 요소와 같이 움직입니다. 내용을 스크롤하면 배경 이미지도 스크롤됩니다.
• initial : 기본값으로 설정합니다.
• inherit : 부모 요소의 속성값을 상속받습니다.

배경이미지 위치 조정 방법

배경이미지의 위치를 조정 하고 싶을 때에 사용 할 수 있는 속성은 background-position이다.

속성값 기입 방법은 padding,margin과 반대로 좌우 다음이 상하이다.

ex) background-position : leftrigth topbottom 와 같이 사용한다.

배경이미지 고정 응용 방법

body태그에 배경이미지를 고정시켜 놓고 그위에 태그를 작성해서 내용을 작성하면 내용을 스크롤 해도 배경이미지는 그대로 있고 내용만 스크롤 할 수 있다.

ProgressBar 만들기

ProgressBar는 흔히 "진행바"라고 부른다. 퍼센테이지를 나타낼때 유용하게 사용할 수 있다.

position을 이용해서 2개의 bar를 만들어 준다. 하나는 진행바의 배경가 되고 다른 하나는 진행률을 나타내는 진행바가 된다.

animation속성은 나중에 정리하겠지만 간략히 사용할때 필요한건 animation속성과 @keyframes 선택자가 필요하다.

animation 속성에는 애니메이션을 적용할 태그의 이름과 진행시간 그리고 애니메이션 효과가 필요하다.

ex) animation : 클래스명 진행시간 애니메이션 효과

@keyframes선택자를 사용할 때에는 @keyframes 클래스명 { 0 { 바꿀 속성 초기치} 100{ 바꿀 속성 최종} }이 필요하다.

0과 100에는 from과 to로 바꿔 사용할 수 있다.