[CSS] SD_04 변형 vertical-align, text-align, 택스트 스타일
2021.07.04
작성일/수정일
2021-07-04 23:07:52 / 2021-07-04 23:07:52
vertical-align
-인라인 요소들의 높이 조절
img 태그는 브라우져 상에서 하단에 공백이 생김 (크롬, 사파이, 익스플로러)
<style>
img { vertical-align:top; }
</style>
text-align
- text-align:justify (넓이에 맞춤)
- word-break;break-all; 같이 사용
white-space : nowrap 줄바꿈없이 한줄
white-space : pre coding 그대로 <pre></pre> 같은 기능
들여쓰기 내어쓰기
글씨 대신 이미지를 넣고 싶을때
text-indent 들여쓰기, 내어쓰기(-100)
<style>
h3 a {
background-image:url(img/logo.png);
width:90px;
height:30px;
display:block;
text-indent:-9999em;
/* image replacement IR */
}
</style>
<div class="area">
<h3><a href='#'>Logo</a></h3>
</div>