웹표준에서 이미지 문제

<div>
<img src="images/menu_bar_5.png" border="0" align="absmiddle">
<img src="images/menu_bar_6.png" border="0" align="absmiddle">
</div>

요렇게 코딩을 하면 이미지들이 따로 놀고 아래에 여백이 생기던데 이걸 방지할 수 있는 CSS 코드 없나요? ㅠㅠ
|

댓글 4개

<div><img src="images/menu_bar_5.png" border="0" align="absmiddle"><img src="images/menu_bar_6.png" border="0" align="absmiddle"></div>
끙.. 그것밖에 없나요 ㅡㅜ
해결했습니다
실전! 웹표준 가이드에 비법이 나와있었네요 ㅎㅎ
실전에 나와 있는것을 소개해주시면 다른분들께도 도움이 될텐데 아쉽네요.

이런식이 표준에 가깝죠^^
<img src="images/menu_bar_6.png" style="border:1px solid black; vertical-align:40%;"/>

- 마지막에 />로 닫아주시고요.
- vertical-align의 값은 미세한 조정이 필요한 경우(폼에서 submit 이미지처럼) %로 하면 편리합니다.
- 위치를 조정하는 값은 % 외에 top middle ~~ 등 찾아보시면 많이 있고 margin, padding 등 도 적절히 주시면 됩니다.

margin이나 padding값의 설정은 같은 방식인데요...
간단히 설명드리자면..

우선 padding:10px 0; 처럼 값이 0이 아닌경우 반드시 px를 붙입니다.

약식표현의 경우는...
padding:10px; 은 상하좌우 모두 10픽셀의 여백,
padding:10px 0; 은 상하 여백은 10픽셀씩 주고 좌우여백은 0,
padding:0 10px; 은 상하 여백은 0 좌우여백은 10픽셀,
padding:10px 20px 30px; 은 상단 여백은 10픽셀 좌우여백은 20픽셀 하단여백은 30픽셀,
padding:10px 20px 30px 10px; 상 우 하 좌 순으로 위부터 시작해서 시계방향으로 순차적으로 지정된 여백을 주는겁니다.

값을 일일이 지정하는 방법으로 상하좌우를 padding-top:10px; padding-left:10px; ~~ 이런식으로 나누어서 표시해도 됩니다.
댓글을 작성하시려면 로그인이 필요합니다.

그누4 질문답변

그누보드4 관련 질문은 QA 로 이전됩니다. QA 그누보드4 바로가기 기존 게시물은 열람만 가능합니다.

+
제목 글쓴이 날짜 조회
17년 전 조회 806
17년 전 조회 3,086
17년 전 조회 943
17년 전 조회 1,493
17년 전 조회 797
17년 전 조회 841
17년 전 조회 925
17년 전 조회 1,143
17년 전 조회 750
17년 전 조회 1,762
17년 전 조회 728
17년 전 조회 729
17년 전 조회 801
17년 전 조회 785
17년 전 조회 1,003
17년 전 조회 1,509
17년 전 조회 851
17년 전 조회 797
17년 전 조회 781
17년 전 조회 987