<ul>
<li><a></a></li>
<li><a ></a></li>
<li><a></a></li>
<li><a></a></li>
</ul>
ul{height:50px; width:100%; position:relative; list-style:none;}
-일단 이와같이 높이는 50px 짜리 <ul>
css 참쉽죠잉^^?;
ul{height:50px; width:100%; position:relative; list-style:none;}
-일단 이와같이 높이는 50px 짜리 <ul>
li{position:relative; height:100%; width:25%; float:left;}
-네 그렇습니다 이와같습니다..ㅇㅅㅇㅋ;; 100(전체사이즈)분의 4(<li>갯수)는 25(<li> 1개의 사이즈)죠 그러므로 가로사이즈 역시 25%입니다^^;
a{background:#000; position:absolute; width:50px; height:100%; left:50%; top:0; margin-left:-25px;}
-높이와 가로가 50px 정사각형이 <a>속성을 갖고 가로사이즈에 맞춰서 균등한 간격으로 정렬이 됩니다^^;
left:50% 는 <a>의 맨왼쪽을 중점으로 하여 <li>가로사이즈 25%의 가운데로 가게됩니다. 그리고 거기서<a>의 중점을 가운데로 맞춰줘야겠죠? 이미지 가로사이즈는 50px입니다 여기서 가운데는 몇px일까요? 그렇습니다 25px입니다!! 하하;
그부분이 margin-left:-25px; 가 되겠습니다.
이제 결론적으로 토탈해 설명하자면 <ul>의 100%가로사이즈에서 25%의<li>에서 가운데로 정렬이됩니다.그러면 균등한 간격으로 반응하여 정렬이 되죠
-네 그렇습니다 이와같습니다..ㅇㅅㅇㅋ;; 100(전체사이즈)분의 4(<li>갯수)는 25(<li> 1개의 사이즈)죠 그러므로 가로사이즈 역시 25%입니다^^;
a{background:#000; position:absolute; width:50px; height:100%; left:50%; top:0; margin-left:-25px;}
-높이와 가로가 50px 정사각형이 <a>속성을 갖고 가로사이즈에 맞춰서 균등한 간격으로 정렬이 됩니다^^;
left:50% 는 <a>의 맨왼쪽을 중점으로 하여 <li>가로사이즈 25%의 가운데로 가게됩니다. 그리고 거기서<a>의 중점을 가운데로 맞춰줘야겠죠? 이미지 가로사이즈는 50px입니다 여기서 가운데는 몇px일까요? 그렇습니다 25px입니다!! 하하;
그부분이 margin-left:-25px; 가 되겠습니다.
이제 결론적으로 토탈해 설명하자면 <ul>의 100%가로사이즈에서 25%의<li>에서 가운데로 정렬이됩니다.그러면 균등한 간격으로 반응하여 정렬이 되죠
css 참쉽죠잉^^?;
댓글 10개
게시글 목록
| 번호 | 제목 |
|---|---|
| 32071 | |
| 32070 | |
| 18535 |
JavaScript
ajax 그리드 문의
1
|
| 5369 | |
| 27088 | |
| 5364 | |
| 32069 | |
| 32068 | |
| 18521 |
jQuery
jquery 속도 높이는 팁
13
|
| 5359 | |
| 18520 |
jQuery
Easing Functions Cheat Sheet
|
| 32067 | |
| 32066 | |
| 27081 | |
| 18514 | |
| 5355 | |
| 5354 | |
| 5350 | |
| 32065 | |
| 18510 | |
| 18503 |
jQuery
좌우 슬라이드메뉴와 상하 슬라이드 메뉴
6
|
| 32064 | |
| 32063 | |
| 18502 | |
| 18499 | |
| 18495 | |
| 5345 | |
| 27079 | |
| 30718 | |
| 18494 | |
| 18493 | |
| 5343 | |
| 18491 | |
| 18489 | |
| 18487 |
Mobile
모바일 웹 개발에 큰 도움이 되는 피모 브라우저
1
|
| 18486 |
PHP
간단한 쿠폰번호 생성
|
| 18484 |
PHP
xml 파싱 예제
1
|
| 18482 |
PHP
eval
1
|
| 32062 | |
| 26476 |
제안서
제안서 유용한 도형
13
|
| 18481 |
jQuery
롤오버+슬라이드 질문드립니다.
|
| 5339 | |
| 18480 |
jQuery
jQuery path plugin
|
| 18476 |
JavaScript
아이폰일때 상단 검색바 숨기기
3
|
| 27137 | |
| 30711 | |
| 18475 | |
| 18474 | |
| 18470 | |
| 32061 | |
| 18469 | |
| 32060 | |
| 5335 | |
| 32059 | |
| 5333 | |
| 32058 |
센스리더
센스리더의 메뉴 구성 - 7. 도움말
|
| 32057 |
센스리더
센스리더의 메뉴 구성 - 6. 보기
|
| 30705 | |
| 5326 | |
| 18466 | |
| 18462 |
JavaScript
모바일웹 이미지맵 사용 소스
3
|
| 18461 |
JavaScript
[복사하기] 버튼 자료~
|
| 31504 | |
| 30696 | |
| 32056 |
센스리더
센스리더의 메뉴 구성 - 5. 점자
|
| 5321 | |
| 18456 |
PHP
php 동영상 강좌
4
|
| 18455 |
jQuery
array toggle
|
| 32055 |
센스리더
센스리더의 메뉴 구성 - 4. 도구
|
| 5315 | |
| 5310 |
MySQL
필드순서 바꾸는 명령 있을까요?
4
|
| 27072 | |
| 32054 | |
| 27066 | |
| 18453 | |
| 30692 |
HTML
IE6 PNG 초 간단하게 적용
3
|
| 30690 | |
| 18451 | |
| 18450 | |
| 18449 | |
| 5307 | |
| 32051 | |
| 18448 | |
| 18447 | |
| 18441 |
jQuery
참고사이트 모음
5
|
| 18437 | |
| 18429 | |
| 32049 | |
| 30686 | |
| 5299 | |
| 5289 | |
| 30677 | |
| 32042 |
센스리더
센스리더에서 사용되는 개념들
6
|
| 18426 | |
| 18422 | |
| 18420 | |
| 18418 | |
| 5285 | |
| 5282 | |
| 26459 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기