프리랜서 웹디자이너 웹퍼블리셔RELATION

RELATION 로고

홈페이지 소스

[CSS] SD_04 변형 vertical-align, text-align, 택스트 스타일

2021.07.04
북마크 [출처 이동]    작성자 정보
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>
 

이 포스트 공유하기

전체목록