미니 홈 이미지 넣기

2020. 4. 11. 05:43 html과css공부

html 웹 언어는 팀버너스리에 의해 창시 되어 전세계의 인류가 총 망라되어 사용 하는 인터 넷 언어다.

지금은 많은 응용프로그래밍 언어들이 생겨나 뒤켠으로 밀려나 소외 되 보이지만 그러나 그 모든 응용 프로그래밍 언어들은 html언어를 기반으로 그 위에서 놀고 있는 존재들 인 것이다.

제아무리 날고 뛰는 언어도 hyper text makup language (html)없이는 무용지물일 뿐이다.

마치 인터넷 세상에서 공기나 물과 같은 존재 라고 할까 너무 풍요로워서 그 가치나 소중 함을 느끼지 못하는 공기 같은 존재 라 고나 할까?
html코드는 쉽다.

그래서 무시 할때가 많은 것같다.

그런데 쉽다고 결코 얕잡아 봐서는 안된다.

html과 css가 함께 조합을 이루게 되면 어지간한것은 해낸다.테이블(table) 테그(TAG)안에 테이블 테그를 중첩해 필요한 미니 홈피 모양을 만들고 드롭다운 작동 가능한 버튼도 만들었다.

이제 코딩이 취미가 되버린 것 같다.

이번 시간에는 지난 시간에 만들어진 미니 홈 상단 에 이미지를 삽입 하고 클릭시 원본의 블로그 홈 으로 이동 하도록 코딩을 해보자.

Style Css

#loot{table-layout:fixed;width:auto;height:auto;text-align:center;

}

.looa{width:370px;height:80px;font-family:Malgun Gothic,Arial;font-size:3rem;text-align:center;background:orange;border:1px solid gray;

}/*home*/

.loob{width:370px;height:50px;font-family:Malgun Gothic,Arial;font-size:3rem;text-align:center;background:lime;border:1px solid gray;

}/*navi*/

.looc{width:290px;height:50px;font-family:Malgun Gothic,Arial;font-size:1rem;text-align:center;background:blue;border:1px solid gray;color:white;

}/*본문광고*/

.lood{width:80px;height:50px;font-family:Malgun Gothic,Arial;font-size:1rem;text-align:center;background:rgb(230,200,230);border:1px solid gray;

}/*블로그 설명*/

.looe{width:290px;height:500px;font-family:Malgun Gothic,Arial;font-size:1rem;text-align:center;background:gray;border:1px solid gray;

}/*본문*/

.loof{width:80px;height:100px;font-family:Malgun Gothic,Arial;font-size:1rem;text-align:center;background:skyblue;border:1px solid gray;

}/*사이드바1,2,3*/

.loog{width:70px;height:100px;font-family:Malgun Gothic,Arial;font-size:1rem;text-align:center;background:blue;border:1px solid gray;

} /*광고1,2*/

.looj{width:290px;height:50px;font-family:Malgun Gothic,Arial;font-size:1rem;text-align:center;background:skyblue;border:1px solid gray;

}/*foot*/

.look{width:80px;height:50px;font-family:Malgun Gothic,Arial;font-size:1rem;text-align:center;background:blue;border:1px solid gray;

} /*하단광고*/

.looser{width:370px;height:auto;font-family:Malgun Gothic,Arial;font-size:1.5rem;text-align:left;background:#000;border:1px solid gray;border-radius:0.7em;color:white; white-space:nowrap;overflow-x:scroll;

}

div,ul,li{margin:0;padding:0;

}

a{text-decoration:none;

}

#wrrp{width:auto;height:auto;position:relative;

}

#wrrp>ul{width:288px;height:30px;font-family:Malgun Gothic,Arial;font-size:1rem;text-align:center;background:none;position:relative;border:1px solid gray;border-radius:0.7em;color:white; /*white-space:nowrap;overflow-x:scroll;*/list-style-type:none;

}

#wrrp>ul>li{float:left;width:70px;height:30px;font-family:Malgun Gothic,Arial;font-size:1rem;text-align:center;background:#000;border:1px solid gray;border-radius:0.7em;position:relative;left:0;top:-236px;list-style-type:none;

}

#wrrp>ul>li>a{width:70px;height:30px;font-family:Malgun Gothic,Arial;font-size:1rem;text-align:center;color:white;text-decoration:none;

/*background:none;border:1px solid gray;border-radius:0.7em;white-space:nowrap;overflow-x:scroll;*/list-style-type:none;

}

#wrrp>ul>li>a:hover{display:block;width:70px;height:30px;font-family:Malgun Gothic,Arial;font-size:1rem;text-align:center;background:red;border:1px solid gray;border-radius:0.7em;color:blue;position:relative;left:-5px;text-decoration:none;list-style-type:none;

}

#wrrp ul{list-style-type:none;

}

#wrrp ul li{list-style-type:none;

}

#wrrp ul ul{display:none;

}

#wrrp ul li:hover ul{display:block;width:71px;height:30;font-family:Malgun Gothic,Arial;font-size:1rem;text-align:center;background:none;color:purple;position:relative;left:0;top:8px;list-style-type:none;

}

#wrrp li li{display:block;width:71px;height:30;font-family:Malgun Gothic,Arial;font-size:1rem;text-align:center;/*background:yellow;border:1px solid gray;border-radius:0.7em;*/list-style-type:none;

}

#wrrp li li a{display:block;width:71px;height:30;font-family:Malgun Gothic,Arial;font-size:1rem;text-align:center;background:yellow;border:1px solid gray;border-radius:0.7em;color:blue;text-decoration:none;list-style-type:none;

}

#wrrp li li a:hover{width:71px;height:30;font-family:Malgun Gothic,Arial;font-size:1rem;text-align:center;/*background:green;border:1px solid gray;border-radius:0.7em;color:yellow; white-space:nowrap;overflow-x:scroll;*/text-decoration:none;list-style-type:none;

}

.big{font-size:2rem;color:red;

}

</style>

Style선언 과 html코딩 순서는 바껴도 상관 없습니다.

아래는 html 소스입니다.

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<ul>

<ul>

<li><a href="https://eproo.tistory.com/341#mend">style</a></li>

</ul>

</li>

<li><a href="https://eproo.tistory.com/341#menu">html공부</a>

<ul>

<li><a href="https://eproo.tistory.com/341#menc">style</a></li>

</ul>

</li>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

</ul>

</div>

</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

아래는 결과 입니다.

공부하는 남자
navi
본문광고		블로그 설명
홈 style css css css html공부 style css css css 코딩공부 홈페이지 css css css 생활코딩 css css css css		사이드바1
		광고1
		사이드바2
		광고2
		사이드바3
foot		하단 광고

작동 가능한 드롭다운 메뉴 버튼 만들기

T,back: Comment:

일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

공부 하는남자

미니 홈 이미지 넣기

티스토리툴바