<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개
게시글 목록
| 번호 | 제목 |
|---|---|
| 11296 | |
| 11294 |
JavaScript
레이어팝업 스크립트 문의
1
|
| 11285 |
기타
vi로 URL 열기
8
|
| 11281 |
JavaScript
1원짜리팁 현재 사이트 쿠키 알아내기
3
|
| 11277 |
JavaScript
1원짜리팁 자바스크립트로 좌우 공백 제거구현하기
3
|
| 11275 | |
| 11273 | |
| 11265 | |
| 11263 | |
| 11260 | |
| 11258 |
PHP
캐쉬 삭제
1
|
| 11256 | |
| 11254 |
PHP
절댓값 리턴 함수
1
|
| 11251 |
JavaScript
자동 스크롤바 사용하기
2
|
| 11249 |
JavaScript
일주기 시간대별로 플래시무비 자동 교체시키기
1
|
| 11247 |
JavaScript
TEXTATEA 창늘리기~
1
|
| 11245 | |
| 20189 | |
| 11239 |
jQuery
상단 가운데 정렬 , 스크롤시 상단에 고정...
5
|
| 11233 | |
| 11228 |
jQuery
제이쿼리 효과2입니다.
4
|
| 11222 |
jQuery
제이쿼리 fadein 효과
5
|
| 11219 | |
| 11215 |
JavaScript
페이스북 댓글창, 좋아요 달기
3
|
| 11212 |
PHP
IP중간 * 표시 하기
2
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기