UL 과 LI 태그의 활용 정보
HTML UL 과 LI 태그의 활용본문
홈페이지의 레이아웃들이 복잡해 질경우 TABLE 태그를 남용하게되어,
소스가 알아볼수 없을만큼 더티해 지는 경우가 많습니다.
이럴 경우 테이블을 하나라도 덜 쓰도록 하는것이 관건이겠죠.
보통 텍스트에 뷰렛을 붙일경우 한라인에서 처리될때는
뷰렛 이미지에 ALIGN="ABSMIDDLE" 을 넣어주면 간단하게 처리되었으나,
두 줄 이상으로 넘어갈 경우 미관상 테이블을 사용할수 밖에 없었지요.
이런 경우 UL 태그와 LI 태그를 활용하면 좋습니다.
Sample View
Sample Down
위의 링크를 눌러서 확인 해보면,
테이블을 안 썼지만, 몇줄을 넘어가도 뷰렛밑으로 글이 들어가지 않습니다.
이것은 UL과 LI태그와 CSS를 활용하여 작업하였구요.
MSDN 사이트에서 알게되었습니다. [참 좋은 곳입니다]
소스를 보시고 이해되지 않는 부분을 말씀해 주시면, 답변토록 하겠습니다.
그리고 마진의 경우는 MARGIN 과 PADDING 을 잘 활용하여 원하는 여백을 설정해야 합니다.
이미지와 텍스트의 위치는 이미지의 여백을 늘림으로 조정 가능합니다.
소스가 알아볼수 없을만큼 더티해 지는 경우가 많습니다.
이럴 경우 테이블을 하나라도 덜 쓰도록 하는것이 관건이겠죠.
보통 텍스트에 뷰렛을 붙일경우 한라인에서 처리될때는
뷰렛 이미지에 ALIGN="ABSMIDDLE" 을 넣어주면 간단하게 처리되었으나,
두 줄 이상으로 넘어갈 경우 미관상 테이블을 사용할수 밖에 없었지요.
이런 경우 UL 태그와 LI 태그를 활용하면 좋습니다.
Sample View
Sample Down
위의 링크를 눌러서 확인 해보면,
테이블을 안 썼지만, 몇줄을 넘어가도 뷰렛밑으로 글이 들어가지 않습니다.
이것은 UL과 LI태그와 CSS를 활용하여 작업하였구요.
MSDN 사이트에서 알게되었습니다. [참 좋은 곳입니다]
소스를 보시고 이해되지 않는 부분을 말씀해 주시면, 답변토록 하겠습니다.
그리고 마진의 경우는 MARGIN 과 PADDING 을 잘 활용하여 원하는 여백을 설정해야 합니다.
이미지와 텍스트의 위치는 이미지의 여백을 늘림으로 조정 가능합니다.
추천
3
3
댓글 전체
ㅋㅋ 실시간으로 답글을 다니까 되게 잼있네요.
역시 스토커 기질이 있나 봅니다. 그럼 즐거운 저녁 되시고. 전 이만 퇴근을~~
역시 스토커 기질이 있나 봅니다. 그럼 즐거운 저녁 되시고. 전 이만 퇴근을~~
와우... 감사합니다.
예전에 사용할때 css 설정을 안하고 사용해서 문제가 되었었군요.
알려주신대로 하니 잘되는군요. 감사합니다.
예전에 사용할때 css 설정을 안하고 사용해서 문제가 되었었군요.
알려주신대로 하니 잘되는군요. 감사합니다.
한마디로 굿 이군요.
CSS 부분의 LI 정의부분에 PADDING 값을 조정하시면 됩니다.
예를들어 <B>PADDING:1 2 3 4;</B> 라고 한다면 1 - 위, 2 - 오른쪽, 3 - 아래, 4 - 왼쪽 입니다.
- 숫자도 먹으니 적당히 조정하시면 됩니다.
예를들어 <B>PADDING:1 2 3 4;</B> 라고 한다면 1 - 위, 2 - 오른쪽, 3 - 아래, 4 - 왼쪽 입니다.
- 숫자도 먹으니 적당히 조정하시면 됩니다.
한가지 질문인데요..
위의 방식을 사용할때 테이블 왼쪽 라인과 <li> 태그 사이의 공백 간격을 조정할수있는지 혹시 방법을 아시면 알려주셨으면 합니다.
전에 제가 이방법을 사용해 봤는데.. 이 공백으로 나오는 간격 사이즈를 조정 하는법을 몰라서 사용을 하지 못했던 기억이 있군요.
위의 방식을 사용할때 테이블 왼쪽 라인과 <li> 태그 사이의 공백 간격을 조정할수있는지 혹시 방법을 아시면 알려주셨으면 합니다.
전에 제가 이방법을 사용해 봤는데.. 이 공백으로 나오는 간격 사이즈를 조정 하는법을 몰라서 사용을 하지 못했던 기억이 있군요.