UL 과 LI 태그의 활용 > 그누3 팁자료실

그누3 팁자료실

UL 과 LI 태그의 활용 정보

HTML UL 과 LI 태그의 활용

본문

홈페이지의 레이아웃들이 복잡해 질경우 TABLE 태그를 남용하게되어,
소스가 알아볼수 없을만큼 더티해 지는 경우가 많습니다.
이럴 경우 테이블을 하나라도 덜 쓰도록 하는것이 관건이겠죠.

보통 텍스트에 뷰렛을 붙일경우 한라인에서 처리될때는
뷰렛 이미지에 ALIGN="ABSMIDDLE" 을 넣어주면 간단하게 처리되었으나,
두 줄 이상으로 넘어갈 경우 미관상 테이블을 사용할수 밖에 없었지요.
이런 경우 UL 태그와 LI 태그를 활용하면 좋습니다.

Sample View
Sample Down
위의 링크를 눌러서 확인 해보면,
테이블을 안 썼지만, 몇줄을 넘어가도 뷰렛밑으로 글이 들어가지 않습니다.
이것은 UL과 LI태그와 CSS를 활용하여 작업하였구요.
MSDN 사이트에서 알게되었습니다. [참 좋은 곳입니다]

소스를 보시고 이해되지 않는 부분을 말씀해 주시면, 답변토록 하겠습니다.

그리고 마진의 경우는 MARGIN 과 PADDING 을 잘 활용하여 원하는 여백을 설정해야 합니다.
이미지와 텍스트의 위치는 이미지의 여백을 늘림으로 조정 가능합니다.
추천
3

댓글 전체

와우... 감사합니다.
예전에 사용할때 css 설정을 안하고 사용해서 문제가 되었었군요.
알려주신대로 하니 잘되는군요. 감사합니다.
CSS 부분의 LI 정의부분에 PADDING 값을 조정하시면 됩니다.
예를들어 <B>PADDING:1 2 3 4;</B> 라고 한다면 1 - 위, 2 - 오른쪽, 3 - 아래, 4 - 왼쪽 입니다.
- 숫자도 먹으니 적당히 조정하시면 됩니다.
한가지 질문인데요..
위의 방식을 사용할때 테이블 왼쪽 라인과 <li> 태그 사이의 공백 간격을 조정할수있는지 혹시 방법을 아시면 알려주셨으면 합니다.
전에 제가 이방법을 사용해 봤는데.. 이 공백으로 나오는 간격 사이즈를 조정 하는법을 몰라서 사용을 하지 못했던 기억이 있군요.
전체 1,026
그누3 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1402호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT