저번엔 폰트고 이번엔 백그라운드입니다' 3')
이 카테고리의 다른글을 읽고 오시거나, 아무데서 CSS 기초 사용법을 알고 오시면 좋아요
배경 관련 속성
background-color : 배경 색
background-image : 배경 그림
background-repeat : 배경 그림 반복
background-p-osition : 배경 그림 위치
background-attachment : 배경 그림 고정
빨간색으로된 부분 주의해주셔요. 마이피에선 '포지션'을 입력하면 강제로 변합니다
포지션이에요 p o s i t i o n
'투명도'에 대한건 나중에 따로합니다
# 배경 색
코드
background:#00EE22;
background-color:#DDDDDD;
background-color:rgb(255, 130, 90);
background-color:transparent;
background:none;
[ background ]와 [ background-color ]는 같습니다. 편한걸로 사용하시면 됩니다
가급적 color이 붙은걸 쓰는게 좋지만, 길게 쓰면 귀찮아서 그냥 [ background ]로 쓰고있습니다 (...)
색의 지정은 16진수로 작성하는데, 위의 코드처럼 2자리가 반복되는 경우
그러니까 [ #00EE22 ]는 [ #0E2 ]로 줄여 쓸 수 있어요. 같은 방법으로 [ #DDDDDD ]는 [ #DDD ]
[ rgb() ]는 빨강/초록/파랑입니다. 최소값은 0이고 최대값은 255에요
[ transparent ]는 투명입니다. 투명은 꽤나 중요한데...
배경색이나 배경그림 깔아놨는데 배경이 흰색인것 때문에 잘 안보이면 속상하잖아요´ Д`)
때문에 배경을 투명하게해야할 필요가 있을 때 사용합니다
[ none ]는 '없음'입니다. 이건 아래의 배경 이미지에서도 해당되요
# 배경 그림
코드
background-image:none; background-image:url(http://i1.daumcdn.net/img-contents/ruliweb/2011/image/common/Ruliweb_bi.gif);
이미지는 자신의 웹계정에 올려서 주소를 따와 사용합니다
위의 코드에있는 주소는 루리웹 로고에요
# 배경 그림 반복
코드
background-repeat:repeat;
background-repeat:repeat-x;
background-repeat:repeat-y;
background-repeat:no-repeat;
순서대로 [ 반복/X축반복/Y축반복/안반복 ]입니다
안반복이라니...
암튼 기본값은 '반복'입니다
# 배경 그림 위치
포지션이에요 p o s i t i o n
코드
background-p-osition:left;
background-p-osition:right;
background-p-osition:center;
background-p-osition:top;
background-p-osition:bottom;
background-p-osition:right bottom;
background-p-osition:50% 100%
순서대로 [ 좌/우/중간/상단/하단/우하단/중하단 ]
퍼센트로 되어있는건, 좌상단이 [ 0% 0% ]입니다. 반대로 [ 100% 100% ]는 우하단이되겠지요
# 배경 그림 고정
코드
background-attachment:scroll;
background-attachment:fixed;
기본값은 [ scroll ]입니다. 화면이 세로나 가로로 길어서 화면을 슥~ 옮겨보면 이미지가 같이 옮겨져서 나중엔 안 보이게되죠
그리고 [ fixed ]는 절대고정입니다. 화면을 아무리 스크롤해도 그 위치를 항상 지켜요. 즉, '브라우저'를 기준으로한 위치입니다
제 마이피의 아랫쪽에도있지요. 왼쪽에있는건 검색기, 오른쪽에있는건 최상단으로 이동하는 링크입니다
화면을 스크롤해보면 아시겠지만 얘네들은 자리에서 안 떠나요
# background
위의 속성을 조합해서 사용할 수 있습니다
코드
background:url(http://i1.daumcdn.net/img-contents/ruliweb/2011/image/common/Ruliweb_bi.gif) no-repeat right bottom fixed;
위처럼 해주면, 루리웹 로고가 브라우저 기준 우하단에 위치하게됩니다
