웹표준에서 이미지 문제 정보
웹표준에서 이미지 문제본문
<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 코드 없나요? ㅠㅠ
<img src="images/menu_bar_5.png" border="0" align="absmiddle">
<img src="images/menu_bar_6.png" border="0" align="absmiddle">
</div>
요렇게 코딩을 하면 이미지들이 따로 놀고 아래에 여백이 생기던데 이걸 방지할 수 있는 CSS 코드 없나요? ㅠㅠ
댓글 전체
<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; ~~ 이런식으로 나누어서 표시해도 됩니다.
이런식이 표준에 가깝죠^^
<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; ~~ 이런식으로 나누어서 표시해도 됩니다.