웹표준에서 이미지 문제 > 그누4 질문답변

그누4 질문답변

그누보드4 관련 질문은 QA 로 이전됩니다. QA 그누보드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>

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

댓글 전체

실전에 나와 있는것을 소개해주시면 다른분들께도 도움이 될텐데 아쉽네요.

이런식이 표준에 가깝죠^^
<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; ~~ 이런식으로 나누어서 표시해도 됩니다.
전체 66,554 |RSS
그누4 질문답변 내용 검색

회원로그인

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