[배워보자!_마이피] 02.스파이더맨배경위에 투명한 박스를 올려봅시다

오랜만에 글을 싸질러봅니다.
그동안 고시원에서 원룸으로 집도 옮기고 세간살이 채워넣기 위해 회사 업무 외시간에 열심히 투잡도 뛰고했지요.
방을 정말 좋고, 놀러오고싶게 만들어볼라고 계획중입니다. 1월이면 다 완성되지않을까 싶네요.
그때 사진 한장 올려보도록할께요 ㅋ

오늘 해볼 작업은, 마이피 배경에 멋드러진 스파이더맨 발차기 사진을 넣고,
그 위에 그냥 투명하게 글들이 들어가면 배경과 글씨가 겹쳐서 가독성이 떨어지기땜에
반투명한 허연 박스를 얹어주도록하겠습니다.

그냥 지금 보고 계신 제 마이피의 상태로 가는겁니다 ㅎ


1.배경을 바꾸자.

저번 글에 배경넣는 방법을 설명드렸는데 다시한번 적어볼께요.
마이피 디자인 설정부분으로 들어가서 CSS 부분에
body{margin:0px;background:url('http://img2.ruliweb.daum.net/mypi/gup/222/1490_89300.jpg') no-repeat fixed left top;}
위와 비슷한 내용이 있는지 확인합니다. 기존에 이미 배경을 쓰고 계신분이라면 body로 시작하는 저런 항목이 있을것이고- 없으신분들은 복사해서 넣어주면됩니다.

::설명

body : 눈에 보이는 모든 부분들이 들어간 곳이 바디입니다. 바디안에 상단 메뉴도 있고 내용도 있고 사진도 있는거죠. 쉽게 얘기하면 하얀 판때기를 하나 깔아놓았다고 보시면됩니다.
우리가 원하는건 그 하얀판때기에 배경을 넣는것이니까 바디 부분을 만져 주는것이죠~

{} : 중괄호죠~ 바디를 이렇게 만들어라! 라고 명령을 해줍니다. 모든 명령은 { 요안 } 에 넣어줍니다.
이건 그냥 법칙이니까 궁금해하지말아주세여. 그냥 그렇게 해야됩니다 ㅎ

margin:0px : {} 이 안에 들어가는 명령은 아주 많습니다. 판때기의 색상부터 정렬방식, 배경그림 등..
하나씩 알아가면 됩니다. 우선 이 마진이라는 항목은 여백을 얘기합니다. 기본값은 왼쪽과 위쪽에 새끼손톱 반만한 여백이 생기게 되는데 이런거 필요없이 좌측, 상단 딱 붙여라! 라고 하는거죠.
기본적으로 들어가는 거라 넣긴했는데, 사실 마이피에서는 기본적으로 지정이 되어있어서 안써도 무방합니다.

background : 배경을 넣는 부분입니다. 단순히 색상을 넣고 싶다면, background-color:red 이런식으로 써줍니다.
red라는 색상대신 색상코드를 넣을수도 있습니다. background-color:#000000 이 얘기는 검정색으로 채워라가 되지요. 색상말고 그림을 넣을때는 약간 더 추가가 됩니다. background:url 이라고 줘서 배경그림이 있는 경로를 지정해야해요. 경로는 () 안에 넣게 되구요, 정확한 주소를 넣어주면 표시가 됩니다. 위에 샘플에 있는 주소가 제 마이피에 올린 스파이더맨그림 경로입니다.
그 뒤에 no-repeat 은 반복은 하지말게 라는 뜻이고 fixed는 스크롤이 되어도 위로 사라지지말고 항상 그 자리에 고정되거라 입니다. left top 은 기준점을 왼쪽, 위 라고 지정한것입니다.
이전 글에 자세히 설명했는데 오른쪽 아래라면 right bottom 이라고 적어줍니다~


이렇게 해서 예쁜 스파이더맨을 배경으로 넣어봤습니다.

잠시 업무좀 보다가 이 글에 추가로 반투명 박스 까는 방법을 설명하도록하겠습니다.

[Type:B]

유용한 정보 감사합니다 ㅠ_ㅠ 친구신청도 하고 갑니다. 앞으로도 배우는 자세로 들르도록 하겠습니다.

[메이드인부산]

ㄴ ㅎㅎ 반갑습니다~ 자주 오세요~ .. 비록 업데이트가 늦긴하지만 ㅠ