728x90
블로그를 만지작거리다가 독학한 지식이기 때문에 정확하지 않을수도 있습니다. 하지만 제 블로그엔 제대로 적용됬습니다^^
이번에 만든 블로그 배너에 마우스를 올리면 볼록 볼록 솟아오르는데요 , 신기하죠 ㅎㅎ
이게 알고보니 되게 간단한거였어요.
알다싶이 티스토리 블로그에는 skin.html 과 sytle.css가 있습니다.
html은 레이아웃 , 이벤트 , 전체 골격 등을 구성한다면
css는 디자인, 레이아웃, 살덩어리 를 구성한다고 생각하면 쉽습니다.
여담이였고
일단 html 의 < >개념을 알아야합니다.
일종의 테두리인데, < > 를 쓴 예로써
이 기능을 활용하면 쉬운 분류가 가능할 뿐만아니라 각각의 기능을 나눌수도 있더군요.
그럼 먼저, 자신이 사용할 <div>의 id, 그리고 < > 안의 문자를 생각합니다.
저같은 경우는 id는 banner_button 그리고 mid라고 했어요. middle, 중간.. 뭐 아무뜻도 없이 그냥 생각난거고요.
자, 그럼 자신의 코드를 <div id="아이디"> 와 <문자>로 묶겠습니다.
예제 코드는 <img src="http://dc453.4shared.com/img/f88tzXlg/s7/Hsol.png"> 를 사용하겠습니다.
묶으면, 이런형태가 됩니다.
다음단계로 넘어가죠.
일단 지금 작성한건 skin.html의 <body>안에 작성한것입니다.
이제 style.css로 갑니다.
왔으면, 맨끝 혹은 자신이 원하는곳에 #아이디 를 입력해줍니다.
그리고 { } 로 묶어줍니다. 예제로는
이렇게 되겠죠?
그리고 밑에 똑같은 방법으로 #아이디 문자 를 입력해준 다음에 또 { } 로 묶어줍니다.( 예제는 없습니다. )
묶은 곳 안에 설정을 써줍니다.
전 padding-right:4px; 라고 썼습니다.( 오른쪽 여백이 4px )
그리고 마지막, 가장 중요한 부분입니다.
이번엔 #아이디 문자:hover( " 마우스가 가리킬때 "라는 옵션입니다. )를 입력해 주신 뒤 역시 { }로 묶고
안에 바꿀 설정을 써줍니다.
전 padding-right:7px; 라고 썻죠.
지금까지 쓴 코드를 해석해보자면
먼저 id가 banner_button으로 지정된 범위안에
<mid> 로 묶인곳의 요소들을
오른쪽여백 4로 맞춰준 후
마우스가 그 요소를 가리킬경우
오른쪽 여백을 7로 바꿔준다는겁니다.
고로, 실제로 보여지는 모습은
마우스를 가리키면 왼쪽으로 볼록 나오는것처럼 보이죠.
제 블로그 오른쪽 배너들에 마우스를 올려보시면 알겁니다.
이번에 만든 블로그 배너에 마우스를 올리면 볼록 볼록 솟아오르는데요 , 신기하죠 ㅎㅎ
이게 알고보니 되게 간단한거였어요.
알다싶이 티스토리 블로그에는 skin.html 과 sytle.css가 있습니다.
html은 레이아웃 , 이벤트 , 전체 골격 등을 구성한다면
css는 디자인, 레이아웃, 살덩어리 를 구성한다고 생각하면 쉽습니다.
여담이였고
일단 html 의 < >개념을 알아야합니다.
일종의 테두리인데, < > 를 쓴 예로써
<head> <body> </body> </head>이런게 있죠.
이 기능을 활용하면 쉬운 분류가 가능할 뿐만아니라 각각의 기능을 나눌수도 있더군요.
그럼 먼저, 자신이 사용할 <div>의 id, 그리고 < > 안의 문자를 생각합니다.
저같은 경우는 id는 banner_button 그리고 mid라고 했어요. middle, 중간.. 뭐 아무뜻도 없이 그냥 생각난거고요.
자, 그럼 자신의 코드를 <div id="아이디"> 와 <문자>로 묶겠습니다.
예제 코드는 <img src="http://dc453.4shared.com/img/f88tzXlg/s7/Hsol.png"> 를 사용하겠습니다.
<div id="banner_button"> <mid> <img src="http://dc453.4shared.com/img/f88tzXlg/s7/Hsol.png"> </mid> </div>
묶으면, 이런형태가 됩니다.
다음단계로 넘어가죠.
일단 지금 작성한건 skin.html의 <body>안에 작성한것입니다.
이제 style.css로 갑니다.
왔으면, 맨끝 혹은 자신이 원하는곳에 #아이디 를 입력해줍니다.
그리고 { } 로 묶어줍니다. 예제로는
#banner_button
{
}
이렇게 되겠죠?
그리고 밑에 똑같은 방법으로 #아이디 문자 를 입력해준 다음에 또 { } 로 묶어줍니다.( 예제는 없습니다. )
묶은 곳 안에 설정을 써줍니다.
전 padding-right:4px; 라고 썼습니다.( 오른쪽 여백이 4px )
그리고 마지막, 가장 중요한 부분입니다.
이번엔 #아이디 문자:hover( " 마우스가 가리킬때 "라는 옵션입니다. )를 입력해 주신 뒤 역시 { }로 묶고
안에 바꿀 설정을 써줍니다.
전 padding-right:7px; 라고 썻죠.
지금까지 쓴 코드를 해석해보자면
먼저 id가 banner_button으로 지정된 범위안에
<mid> 로 묶인곳의 요소들을
오른쪽여백 4로 맞춰준 후
마우스가 그 요소를 가리킬경우
오른쪽 여백을 7로 바꿔준다는겁니다.
고로, 실제로 보여지는 모습은
마우스를 가리키면 왼쪽으로 볼록 나오는것처럼 보이죠.
제 블로그 오른쪽 배너들에 마우스를 올려보시면 알겁니다.
'it > information' 카테고리의 다른 글
| 네이버 블로그가 잠시 다운됬었습니다. (2) | 2012.02.25 |
|---|---|
| 갤럭시 플레이어 70 진저브레드 2.3.6 KRKPH 배터리 충전 오류 현상 해결 (0) | 2012.02.19 |
| 안드로이드 젤리빈 이 올 2분기에 나올 듯... (1) | 2012.02.18 |
