<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년 전 | 978 | ||
| 6429 | 12년 전 | 9102 | ||
| 6428 | 12년 전 | 600 | ||
| 6427 |
제이티37
|
12년 전 | 1569 | |
| 6426 |
프로프리랜서
|
12년 전 | 1154 | |
| 6425 |
프로프리랜서
|
12년 전 | 1608 | |
| 6424 |
프로프리랜서
|
12년 전 | 1811 | |
| 6423 | 12년 전 | 1000 | ||
| 6422 |
퍼블리셔지노군
|
12년 전 | 1573 | |
| 6421 | 12년 전 | 2207 | ||
| 6420 |
 신현종실장 |
12년 전 | 1334 | |
| 6419 |
 돼지코구뇽 |
12년 전 | 1287 | |
| 6418 | 12년 전 | 1182 | ||
| 6417 |
senseme
|
12년 전 | 7419 | |
| 6416 |
senseme
|
12년 전 | 1327 | |
| 6415 |
senseme
|
12년 전 | 1190 | |
| 6414 |
senseme
|
12년 전 | 1968 | |
| 6413 |
senseme
|
12년 전 | 973 | |
| 6412 |
senseme
|
12년 전 | 1490 | |
| 6411 |
senseme
|
12년 전 | 1099 | |
| 6410 |
senseme
|
12년 전 | 1045 | |
| 6409 |
PASKRAN
|
12년 전 | 2818 | |
| 6408 | 12년 전 | 10798 | ||
| 6407 | 12년 전 | 2990 | ||
| 6406 |
프로프리랜서
|
12년 전 | 2833 | |
| 6405 |
프로프리랜서
|
12년 전 | 1371 | |
| 6404 |
프로프리랜서
|
12년 전 | 2724 | |
| 6403 |
프로프리랜서
|
12년 전 | 818 | |
| 6402 |
프로프리랜서
|
12년 전 | 1731 | |
| 6401 |
프로프리랜서
|
12년 전 | 1139 | |
| 6400 |
프로프리랜서
|
12년 전 | 1464 | |
| 6399 |
프로프리랜서
|
12년 전 | 1179 | |
| 6398 |
프로프리랜서
|
12년 전 | 1487 | |
| 6397 |
프로프리랜서
|
12년 전 | 3603 | |
| 6396 | 12년 전 | 1870 | ||
| 6395 | 12년 전 | 920 | ||
| 6394 |
신현종실장 |
12년 전 | 5240 | |
| 6393 |
제이티37
|
12년 전 | 1202 | |
| 6392 |
songsinica
|
12년 전 | 1204 | |
| 6391 |
 카카오툴즈 |
12년 전 | 3384 | |
| 6390 |
 cshop2 |
12년 전 | 1625 | |
| 6389 | 12년 전 | 4858 | ||
| 6388 |
스누피사랑
|
12년 전 | 5431 | |
| 6387 | 12년 전 | 1838 | ||
| 6386 | 12년 전 | 3059 | ||
| 6385 |
희망과열정
|
12년 전 | 926 | |
| 6384 | 12년 전 | 3292 | ||
| 6383 | 12년 전 | 10598 | ||
| 6382 |
신현종실장 |
12년 전 | 5790 | |
| 6381 |
SugarSkull
|
12년 전 | 1031 | |
| 6380 | 12년 전 | 777 | ||
| 6379 |
 hy미디어 |
12년 전 | 1983 | |
| 6378 | 12년 전 | 1562 | ||
| 6377 | 12년 전 | 497 | ||
| 6376 |
후라보노보노
|
12년 전 | 1332 | |
| 6375 | 12년 전 | 2867 | ||
| 6374 | 12년 전 | 834 | ||
| 6373 | 12년 전 | 2367 | ||
| 6372 |
takumi22
|
12년 전 | 1240 | |
| 6371 |
개초보제이
|
12년 전 | 773 | |
| 6370 |
고급자가되고
|
12년 전 | 1461 | |
| 6369 | 12년 전 | 883 | ||
| 6368 | 12년 전 | 3180 | ||
| 6367 | 12년 전 | 1880 | ||
| 6366 | 12년 전 | 2878 | ||
| 6365 |
lilyosia
|
12년 전 | 1795 | |
| 6364 | 12년 전 | 1057 | ||
| 6363 | 12년 전 | 1588 | ||
| 6362 | 12년 전 | 2734 | ||
| 6361 | 12년 전 | 2558 | ||
| 6360 | 12년 전 | 1005 | ||
| 6359 | 12년 전 | 2104 | ||
| 6358 |
 gilynh |
12년 전 | 1787 | |
| 6357 |
에헤라디야자진방아를돌려라
|
12년 전 | 778 | |
| 6356 | 12년 전 | 2086 | ||
| 6355 | 12년 전 | 3787 | ||
| 6354 | 12년 전 | 3101 | ||
| 6353 | 12년 전 | 1546 | ||
| 6352 | 12년 전 | 7769 | ||
| 6351 | 12년 전 | 2539 | ||
| 6350 | 12년 전 | 2798 | ||
| 6349 | 12년 전 | 1880 | ||
| 6348 | 12년 전 | 3546 | ||
| 6347 | 12년 전 | 1447 | ||
| 6346 | 12년 전 | 1184 | ||
| 6345 | 12년 전 | 1835 | ||
| 6344 | 12년 전 | 1413 | ||
| 6343 |
프로프리랜서
|
12년 전 | 2059 | |
| 6342 |
프로프리랜서
|
12년 전 | 1382 | |
| 6341 |
프로프리랜서
|
12년 전 | 1812 | |
| 6340 |
프로프리랜서
|
12년 전 | 1899 | |
| 6339 |
프로프리랜서
|
12년 전 | 1339 | |
| 6338 |
프로프리랜서
|
12년 전 | 1595 | |
| 6337 | 12년 전 | 5267 | ||
| 6336 |
프로프리랜서
|
12년 전 | 1629 | |
| 6335 |
프로프리랜서
|
12년 전 | 951 | |
| 6334 |
프로프리랜서
|
12년 전 | 1328 | |
| 6333 |
프로프리랜서
|
12년 전 | 2441 | |
| 6332 | 12년 전 | 1102 | ||
| 6331 |
돗단배123
|
12년 전 | 1421 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기