<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개
게시글 목록
| 번호 | 제목 |
|---|---|
| 2407 | |
| 2399 | |
| 2397 | |
| 2379 | |
| 2362 |
웹접근성
자바스크립트를 끈 로그인 폼
15
|
| 2359 | |
| 2358 |
CSS
IE6/7 img px 버그
|
| 2346 | |
| 2332 | |
| 2329 | |
| 2326 |
HTML
IE6 PNG 초 간단하게 적용
3
|
| 2325 | |
| 2322 | |
| 2321 | |
| 2317 | |
| 2312 |
웹접근성
웹접근성이란?
3
|
| 2309 |
웹접근성
웹표준형 화면 확대/축소
8
|
| 2308 | |
| 2305 | |
| 2301 |
CSS
그라디언트 에디터
7
|
| 2300 | |
| 2293 | |
| 2288 | |
| 2281 |
HTML
object 태그 질문 드ㅡ립니다
2
|
| 2276 | |
| 2273 | |
| 2270 |
CSS
가상클래스 순서 외우기
3
|
| 2263 | |
| 2261 |
반응형
반응형웹 패턴/리소스/뉴스
4
|
| 2258 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기