반응형
HTML 에서 이미지는 하나의 텍스트로 인식합니다. 그런데 이미지는 크고 텍스트는 상대적으로 작기 때문에 옆으로 나란히 정렬하면 기본적으로 이미지의 하단 옆에 위치합니다. 이미지와 글의 위치를 조절하고 싶다면 CSS 의 vertical-align 속성을 사용해야 합니다.
▼ 이미지와 텍스트를 조절하기 위한 형식은 다음과 같습니다. img 태그에 속성으로 veritcal-align 을 사용합니다. 값은 3가지가 있는데 text-top, text-middle, text-bottom 입니다. 단어에서 의미하듯 이미지에서 텍스트를 상단, 중앙, 하단으로 배치할 수 있습니다.
| <img src=”이미지경로” style=”vertical-align: text-top/text-middle/text-bottom”> |
▼ 아래 샘플은 vertiacl-align 속성을 적용하지 않았을 때 모습입니다. 이미지가 텍스트보다 크게 되면 이미지 하단에 위치하게 됩니다. 글이 브라우저 크기를 벗어나면 바로 밑으로 나열이 되겠죠.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>HTML</title>
<style type="text/css">
body {
background-color: #e7e7e7;
}
img {
height:90px;
border-style: solid;
}
</style>
</head>
<body>
<img src="butterfly.ico">
나비는 자유를 상징한다.
</body>
</html>
▼ 아래 샘플은 스타일시트 vertiacl-align 사용해서 텍스트를 상단, 중앙, 하단에 배치했습니다. 글자가 길 경우 이미지를 감싸는 형태의 배치를 하고 싶다면 text-top 을 사용하시면 되겠죠.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>HTML</title>
<style type="text/css">
body {
background-color: #e7e7e7;
}
img {
height:90px;
border-style: solid;
}
</style>
</head>
<body>
<img src="butterfly.ico" style="vertical-align:text-top">
나비는 자유를 상징한다.<br/><br/>
<img src="butterfly.ico" style="vertical-align:text-middle">
나비는 자유를 상징한다.<br/><br/>
<img src="butterfly.ico" style="vertical-align:text-bottom">
나비는 자유를 상징한다.<br/>
</body>
</html>
반응형
'웹 프로그래밍 > 스타일시트 CSS' 카테고리의 다른 글
| 스타일 시트 CSS 브라우저 내 위치를 지정하는 left, right, top, bottom 속성 (0) | 2024.02.18 |
|---|---|
| 스타일 시트 CSS vertical-align 속성, inline 요소끼리 수직 정렬 옵션 (0) | 2023.12.01 |
| 스타일 시트 CSS 가상 선택자 after 사용하는 방법 (0) | 2023.03.18 |
| 스타일 시트 CSS 접두어 webkit, moz, ms, o 의미 (2) | 2022.12.19 |
| 스타일 시트 CSS 여러 태그에 스타일을 동시 적용하거나 특정 태그에 적용하는 방법 (1) | 2020.01.18 |
| 스타일 시트 CSS width 와 height 속성 사용법 (0) | 2020.01.17 |
| 스타일시트 CSS 마우스오브(Mouseover) 이미지 테두리 적용 (0) | 2020.01.16 |
| 스타일 시트 CSS 가장 기본적인 내용과 스타일을 삽입하는 여러가지 방법 (1) | 2020.01.12 |
