CSS / 이미지 위에 텍스트 정가운데에 넣기
사진을 강조하는 블로그나 사이트의 경우 이미지 위에 텍스트를 놓는 경우가 많습니다. 텍스트가 보이게 놓기도 하고, 마우스를 올리면 보이게 하기도 합니다. 텍스트를 이미지 위에 어떻게 넣는지 알아보겠습니다.
방법 1
다음은 이미지와 텍스트가 있는 간단한 문서입니다. 이미지는 파란색의 사각형이고, 구분하기 쉽도록 텍스트의 배경색은 노란색으로 했습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
.jb-wrap {
width: 40%;
margin: 10px auto;
border: 1px solid #000000;
}
.jb-wrap img {
width: 100%;
vertical-align: middle;
}
.jb-text {
padding: 5px 10px;
background-color: yellow;
text-align: center;
}
</style>
</head>
<body>
<div class="jb-wrap">
<div class="jb-image"><img src="images/400x300.png" alt=""></div>
<div class="jb-text">
<p>HELLO</p>
</div>
</div>
</body>
</html>
- 이미지와 텍스트를 감싸고 있는 요소에 position: relative를 추가합니다.
- 텍스트를 감싸고 있는 요소에 position: absolute를 추가하고, 위치를 50%로 정합니다.
.jb-wrap {
width: 40%;
margin: 10px auto;
border: 1px solid #000000;
position: relative;
}
.jb-wrap img {
width: 100%;
vertical-align: middle;
}
.jb-text {
padding: 5px 10px;
background-color: yellow;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
}
왼쪽 위 꼭짓점의 위치가 위에서 50%, 왼쪽에서 50%이므로, 텍스트가 정가운데에 있지 않습니다.
이를 해결하기 위해 transform 속성을 추가합니다.
.jb-wrap {
width: 40%;
margin: 10px auto;
border: 1px solid #000000;
position: relative;
}
.jb-wrap img {
width: 100%;
vertical-align: middle;
}
.jb-text {
padding: 5px 10px;
background-color: yellow;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate( -50%, -50% );
}
이제 이미지의 정가운데에 텍스트가 있습니다.
방법 2
transform 속성은 IE 10 이상을 지원합니다. 만약 IE 8, IE 9를 꼭 지원해야 한다면, 다른 방식을 사용합니다. 테이블의 셀은 수직 가운데 정렬이 가능하다는 걸 이용하는 방식입니다. HTML 마크업과 CSS 코드 둘 다 복잡해지지만, IE 8 이상에서 사용할 수 있습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
.jb-wrap {
width: 40%;
margin: 0px auto;
position: relative;
}
.jb-wrap img {
width: 100%;
vertical-align: middle;
}
.jb-text {
position: absolute;
top: 0px;
width: 100%;
height: 100%;
}
.jb-text-table {
display: table;
width: 100%;
height: 100%;
}
.jb-text-table-row {
display: table-row;
}
.jb-text-table-cell {
display: table-cell;
vertical-align: middle;
}
.jb-text p {
margin: 0px 40px;
padding: 10px;
background-color: #ffffff;
text-align: center;
}
</style>
</head>
<body>
<div class="jb-wrap">
<div class="jb-image"><img src="images/400x300.png" alt=""></div>
<div class="jb-text">
<div class="jb-text-table">
<div class="jb-text-table-row">
<div class="jb-text-table-cell">
<p>HELLO</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS / word-break / 줄바꿈을 단어 기준으로 할 지 글자 기준으로 할 지 정하는 속성
개요 word-break는 줄바꿈을 할 때 단어 기준으로 할 지 글자 기준으로 할 지 정하는 속성이다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 3 문법 word-break: normal | break-all | keep-all | initial | inherit; normal : CJK 문자는 글자 기준으로, CJK 이외의 문자는 단어 기준으로 줄바꿈한다. break-all : 글자 기준으로 줄바꿈한다. keep-all : 단어 ...
CSS / font-weight / 글자 굵기 정하는 속성
개요 font-weight로 글자의 굵기를 정한다. 기본값 : normal 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1 문법 font-weight: normal | bold | bolder | lighter | number | initial | inherit normal : 보통 굵기이다. 숫자 400과 같다. bold : 굵은 굵기이다. 숫자 700과 같다. bolder : 상속된 값보다 굵은 굵기다. lighter : 상속된 값보다 얇은 굵기이다. number : ...
CSS / 순서 있는 목록에서 숫자 또는 내용만 굵게 만드는 방법
순서 있는 목록은 ol 태그로 만듭니다. 간단한 예는 다음과 같습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { font-size: 40px; } ...
개요 flex-wrap 속성의 값이 wrap인 경우, 아이템들의 가로폭의 합이 콘테이너의 가로폭을 넘어가면 아이템이 다음 줄로 내려간다. 이때 여러 줄이 되어버린 아이템들의 정렬을 어떻게 할지 정하는 속성이 align-content이다. 문법 align-content: stretch | center | flex-start | flex-end | space-between | space-around | space-evenly | initial | inherit stretch : 기본값으로, 높이를 꽉 채운다. flex-start : 위쪽부터 ...
CSS / quotes / 인라인 인용문의 기호를 꾸미는 속성
q 태그는 문단 안에서 사용하는 인용문입니다. 기본 모양은 큰따옴표로 감싸는 것입니다. 간단한 예는 다음과 같습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> </head> <body> <h1>Lorem <q>Ipsum</q> Dolor</h1> </body> </html> 인용문을 감싸는 큰따옴표를 다른 기호 또는 문자로 바꿔주는 것이 quotes 속성입니다. 예를 들어 ...
text-align 문단 정렬 방식을 정하는 속성은 text-align입니다. 속성의 값은 다음과 같습니다. left : 왼쪽 정렬 right : 오른쪽 정렬 center : 가운데 정렬 justify : 양쪽 정렬 initial : 기본값으로 설정 inherit : 부모 요소의 속성값을 상속 받음 예제 첫 번째 문단은 왼쪽 정렬입니다. 두 번째 문단은 오른쪽 정렬입니다. 세 번째 문단은 가운데 정렬입니다. 네 번째 문단은 양쪽 정렬입니다. 양쪽 모두를 가지런하게 ...
CSS / display 속성의 값을 inline 또는 inline-block으로 했을 때 여백 조정하는 방법
inline 또는 inline-block의 여백 display 속성값으로 inline 또는 inline-block으로 정하면 요소들이 가로로 배열됩니다. 이 때 요소와 요소 사이에 여백이 생깁니다. 예를 들어 다음과 같이 순서 없는 목록을 가로로 배열해보겠습니다.(여백을 파악하기 위해 테두리를 만들었습니다.) <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...
상속(inheritance) CSS 속성은 상속하는 속성과 상속하지 않는 속성이 있습니다. 상속하는 속성은 자식 요소에 영향을 미칩니다. 상속하지 않는 속성은 자식 요소에 영향을 미치지 않습니다. 예를 들어 color는 상속하는 속성입니다. 부모 요소에서 정한 색이 자식 요소에도 적용됩니다. 예를 들어 padding은 상속하지 않는 속성입니다. 부모 요소에서 padding을 정의해도 자식 요소에 적용되지 않습니다. 예제 color는 상속하는 속성이므로 자식 요소의 ...
CSS / line-height / 줄 높이 정하는 속성
개요 line-height는 줄 높이를 정하는 속성입니다. 기본값 : normal 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1 문법 line-height: normal | length | number | percentage | initial | inherit normal : 웹브라우저에서 정한 기본값입니다. 보통 1.2입니다. length : 길이로 줄 높이를 정합니다. number : 글자 크기의 몇 배인지로 줄 높이를 정합니다. percentage : 글자 크기의 몇 %로 줄 ...
display: grid 그리드(grid)는 콘테이너(container)와 아이템(item)으로 구성됩니다. 아래는 그리드를 위한 간단한 HTML 문서입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; ...