<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개
게시글 목록
| 번호 | 제목 |
|---|---|
| 11040 |
JavaScript
자바스크립트를 이용해 모니터 해상도 구하기
2
|
| 11037 |
JavaScript
모바일 접속시 모바일 페이지로 이동하기
2
|
| 11028 |
MySQL
SQL 문장의 실행순서
8
|
| 11019 |
MySQL
초보자들을 위한 팁(count편)
8
|
| 11017 | |
| 11012 |
MySQL
트리거를 이용한 날짜 자동 업데이트
4
|
| 10999 |
PHP
배열 순서 섞기
12
|
| 10990 |
JavaScript
체크박스 전체선택/해제/반전
8
|
| 10984 |
JavaScript
마우스휠이벤트 등록 및 활용
5
|
| 20478 | |
| 20151 | |
| 10973 |
JavaScript
부분 프린터하기
10
|
| 10970 |
JavaScript
GET으로 넘어온 파라미터 가져오기
2
|
| 10966 |
JavaScript
첨부파일 확장자 체크 [정규식]
3
|
| 10962 |
JavaScript
iframe 아이프레임 투명처리
3
|
| 10961 | |
| 10959 |
PHP
주민번호 검사기
1
|
| 10958 | |
| 10951 |
JavaScript
화면 줌(ZOOM); 필요한분이 있으려나...;
6
|
| 10947 | |
| 10945 | |
| 10944 |
PHP
utf8 체크하기
|
| 20463 | |
| 10943 | |
| 10939 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기