<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개
12년 전
그냥 li 에 text-align:center 주면 되잖아요?
12년 전
흠..그런가요?ㅋ
그건 text의 경우만 해당되죠ㅇㅅㅇ;
저 형태에서 li에 text-align:center를 주고 a에는 아무것도 주지말아보시던가요ㅎ;;
그건 text의 경우만 해당되죠ㅇㅅㅇ;
저 형태에서 li에 text-align:center를 주고 a에는 아무것도 주지말아보시던가요ㅎ;;
lainfox
12년 전
text 경우만은 아니고 inline 속성도 적용이 됩니다
12년 전
inlinde속성을 이용할려면 저구문에서 포지션을 지워줘야됩니다..ㅇㅅㅇ
신현종실장
12년 전
ie 에서 어찌 될까요?
실제로 ie 에서는 지운아빠님? 말 처럼 된적이 있슴다.
근데 최근에 div align=center 를 하면 텍스트 정렬까지도 중앙정렬 되는 경우도 있다능...
많은 테스트 와 정보 주시는 두분 땡큐~
실제로 ie 에서는 지운아빠님? 말 처럼 된적이 있슴다.
근데 최근에 div align=center 를 하면 텍스트 정렬까지도 중앙정렬 되는 경우도 있다능...
많은 테스트 와 정보 주시는 두분 땡큐~
cshop2
12년 전
지운엄마 말씀대로 그냥 text-align 을 center 로 주면 됩니다.
(li 에 주지말고 a 에다 주면되요.)
그리고 신실장님 말씀처럼 div 에 center 를 주는게 아니라 그냥 a tag 에만 center 를 주면 됩니다.
div align=center ㄴ ㄴ
요렇게.
.center { text-align: center; }
<a class="center" href="#">center</a>
css 충돌이 나지 않는 이상 다른 element 까지 중앙정렬될 일이 없죠.
(li 에 주지말고 a 에다 주면되요.)
그리고 신실장님 말씀처럼 div 에 center 를 주는게 아니라 그냥 a tag 에만 center 를 주면 됩니다.
div align=center ㄴ ㄴ
요렇게.
.center { text-align: center; }
<a class="center" href="#">center</a>
css 충돌이 나지 않는 이상 다른 element 까지 중앙정렬될 일이 없죠.
신현종실장
12년 전
ㅎㅎ 명쾌한 정의를 내려준건가요?ㅠㅠ
12년 전
그러니깐 전 <a> 속성만을 정렬시키는걸 정의낸겁니다..ㅇㅅㅇ;;
12년 전
저는 가끔가다 메뉴 버튼들을 a 태그에 넣을 때 텍스트 길이가 짧으면 마우스 포인터 이동이 어렵게 되서 옛날엔 td, 지금은 span에 inline-block 속성을 주거나 div에 width를 줘서 크기를 고정한 다음 onClick이벤트를 이용하는 경우가 있었습니다.
li 요소를 정렬하는 방법은 여러가지가 있으니 그건 개발자 하기 나름인거 같고 a 태그 폭을 고정한 상태에서 택스를 정렬하는 방식에는 좋은 방법으로 보여집니다.
li 요소를 정렬하는 방법은 여러가지가 있으니 그건 개발자 하기 나름인거 같고 a 태그 폭을 고정한 상태에서 택스를 정렬하는 방식에는 좋은 방법으로 보여집니다.
돼지코구뇽
12년 전
저도 걍 100% 때리고 하위에 퍼센트로 넓이조절길이를 주는데 움 비슷하네요 굿팁!
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 6430 | 12년 전 | 986 | ||
| 6429 | 12년 전 | 9112 | ||
| 6428 | 12년 전 | 607 | ||
| 6427 |
제이티37
|
12년 전 | 1574 | |
| 6426 |
프로프리랜서
|
12년 전 | 1159 | |
| 6425 |
프로프리랜서
|
12년 전 | 1615 | |
| 6424 |
프로프리랜서
|
12년 전 | 1817 | |
| 6423 | 12년 전 | 1006 | ||
| 6422 |
퍼블리셔지노군
|
12년 전 | 1582 | |
| 6421 | 12년 전 | 2212 | ||
| 6420 |
 신현종실장 |
12년 전 | 1338 | |
| 6419 |
 돼지코구뇽 |
12년 전 | 1289 | |
| 6418 | 12년 전 | 1192 | ||
| 6417 |
senseme
|
12년 전 | 7435 | |
| 6416 |
senseme
|
12년 전 | 1333 | |
| 6415 |
senseme
|
12년 전 | 1195 | |
| 6414 |
senseme
|
12년 전 | 1972 | |
| 6413 |
senseme
|
12년 전 | 978 | |
| 6412 |
senseme
|
12년 전 | 1494 | |
| 6411 |
senseme
|
12년 전 | 1107 | |
| 6410 |
senseme
|
12년 전 | 1050 | |
| 6409 |
PASKRAN
|
12년 전 | 2821 | |
| 6408 | 12년 전 | 10807 | ||
| 6407 | 12년 전 | 2995 | ||
| 6406 |
프로프리랜서
|
12년 전 | 2841 | |
| 6405 |
프로프리랜서
|
12년 전 | 1378 | |
| 6404 |
프로프리랜서
|
12년 전 | 2728 | |
| 6403 |
프로프리랜서
|
12년 전 | 824 | |
| 6402 |
프로프리랜서
|
12년 전 | 1742 | |
| 6401 |
프로프리랜서
|
12년 전 | 1145 | |
| 6400 |
프로프리랜서
|
12년 전 | 1475 | |
| 6399 |
프로프리랜서
|
12년 전 | 1190 | |
| 6398 |
프로프리랜서
|
12년 전 | 1498 | |
| 6397 |
프로프리랜서
|
12년 전 | 3607 | |
| 6396 | 12년 전 | 1880 | ||
| 6395 | 12년 전 | 924 | ||
| 6394 |
신현종실장 |
12년 전 | 5242 | |
| 6393 |
제이티37
|
12년 전 | 1207 | |
| 6392 |
songsinica
|
12년 전 | 1215 | |
| 6391 |
 카카오툴즈 |
12년 전 | 3399 | |
| 6390 |
 cshop2 |
12년 전 | 1630 | |
| 6389 | 12년 전 | 4862 | ||
| 6388 |
스누피사랑
|
12년 전 | 5435 | |
| 6387 | 12년 전 | 1839 | ||
| 6386 | 12년 전 | 3068 | ||
| 6385 |
희망과열정
|
12년 전 | 930 | |
| 6384 | 12년 전 | 3295 | ||
| 6383 | 12년 전 | 10602 | ||
| 6382 |
신현종실장 |
12년 전 | 5792 | |
| 6381 |
SugarSkull
|
12년 전 | 1034 | |
| 6380 | 12년 전 | 785 | ||
| 6379 |
 hy미디어 |
12년 전 | 1989 | |
| 6378 | 12년 전 | 1568 | ||
| 6377 | 12년 전 | 502 | ||
| 6376 |
후라보노보노
|
12년 전 | 1341 | |
| 6375 | 12년 전 | 2875 | ||
| 6374 | 12년 전 | 843 | ||
| 6373 | 12년 전 | 2376 | ||
| 6372 |
takumi22
|
12년 전 | 1245 | |
| 6371 |
개초보제이
|
12년 전 | 780 | |
| 6370 |
고급자가되고
|
12년 전 | 1466 | |
| 6369 | 12년 전 | 891 | ||
| 6368 | 12년 전 | 3190 | ||
| 6367 | 12년 전 | 1884 | ||
| 6366 | 12년 전 | 2886 | ||
| 6365 |
lilyosia
|
12년 전 | 1802 | |
| 6364 | 12년 전 | 1063 | ||
| 6363 | 12년 전 | 1599 | ||
| 6362 | 12년 전 | 2742 | ||
| 6361 | 12년 전 | 2567 | ||
| 6360 | 12년 전 | 1014 | ||
| 6359 | 12년 전 | 2105 | ||
| 6358 |
 gilynh |
12년 전 | 1795 | |
| 6357 |
에헤라디야자진방아를돌려라
|
12년 전 | 790 | |
| 6356 | 12년 전 | 2093 | ||
| 6355 | 12년 전 | 3792 | ||
| 6354 | 12년 전 | 3105 | ||
| 6353 | 12년 전 | 1550 | ||
| 6352 | 12년 전 | 7773 | ||
| 6351 | 12년 전 | 2541 | ||
| 6350 | 12년 전 | 2802 | ||
| 6349 | 12년 전 | 1883 | ||
| 6348 | 12년 전 | 3554 | ||
| 6347 | 12년 전 | 1453 | ||
| 6346 | 12년 전 | 1198 | ||
| 6345 | 12년 전 | 1836 | ||
| 6344 | 12년 전 | 1420 | ||
| 6343 |
프로프리랜서
|
12년 전 | 2063 | |
| 6342 |
프로프리랜서
|
12년 전 | 1391 | |
| 6341 |
프로프리랜서
|
12년 전 | 1815 | |
| 6340 |
프로프리랜서
|
12년 전 | 1911 | |
| 6339 |
프로프리랜서
|
12년 전 | 1355 | |
| 6338 |
프로프리랜서
|
12년 전 | 1619 | |
| 6337 | 12년 전 | 5281 | ||
| 6336 |
프로프리랜서
|
12년 전 | 1638 | |
| 6335 |
프로프리랜서
|
12년 전 | 954 | |
| 6334 |
프로프리랜서
|
12년 전 | 1336 | |
| 6333 |
프로프리랜서
|
12년 전 | 2446 | |
| 6332 | 12년 전 | 1104 | ||
| 6331 |
돗단배123
|
12년 전 | 1425 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기