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 / border-radius / 테두리 둥글게 만드는 속성
border-radius border-radius는 테두리를 둥글게 만드는 속성입니다. CSS3에서 정의되었으며, IE는 버전 9부터 지원합니다.(IE8에서 사용하는 방법) 8개의 속성 값을 넣어야 하지만, 값이 같다면 짧게 쓸 수 있습니다. 다음 상자의 테두리를 여러 가지 방식으로 둥글게 만들어보겠습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> div { box-sizing: border-box; width: 200px; height: 200px; margin: 20px auto; background-color: orange; } </style> </head> <body> <div class="jb"></div> </body> </html> 문법 1 border-radius: top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y 속성의 ...
선택자 링크는 <a> 태그로 만듭니다. 따라서 <a> 태그를 선택하여 꾸밉니다. 예를 들어 a { color: red; } 는 링크의 색을 빨간색으로 만듭니다. 가상 클래스를 이용하면 좀 더 다양하게 꾸밀 수 있습니다. a:link - 방문하지 않은 링크 a:visited - 방문했던 링크 a:hover - 마우스가 올려진 링크 a:active - 클릭하는 순간 링크 주의할 점은 a:hover는 a:link와 a:visited 뒤에 와야 하고, a:active는 ...
상속(inheritance) CSS 속성은 상속하는 속성과 상속하지 않는 속성이 있습니다. 상속하는 속성은 자식 요소에 영향을 미칩니다. 상속하지 않는 속성은 자식 요소에 영향을 미치지 않습니다. 상속하는 속성 예를 들어 color는 상속하는 속성입니다. 부모 요소에서 정한 색이 자식 요소에도 적용됩니다. 즉 <style> p { color: blue; } </style> <p>Lorem <em>Ipsum</em></p> 일 때, Lorem 뿐만 아니라 Ipsum의 색도 파란색이 됩니다. 상속하지 않는 속성 예를 들어 ...
높이가 같은 박스 만들기 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; font-family: Consolas, monospace; ...
CSS / letter-spacing, word-spacing / 글자 사이 간격, 단어 사이 간격
letter-spacing, word-spacing 글자 사이의 간격은 letter-spacing으로, 단어 사이의 간격은 word-spacing으로 정합니다. 값이 커지면 간격이 커집니다. 값에는 음수를 넣을 수 있습니다. 음수를 값으로 하는 경우 글자가 겹칠 수 있습니다. 예제 값의 변화에 따른 간격의 변화를 보여주는 예제입니다. 글자 사이의 간격을 변화시키면 단어 사이의 간격도 변합니다. 단어 사이의 간격을 변화시켜도 글자 사이의 간격은 변하지 않습니다. <!doctype html> <html lang="ko"> <head> ...
CSS / text-indent / 들여쓰기, 내어쓰기 만드는 속성
text-indent 들여쓰기와 내어쓰기는 text-indent 속성으로 만듭니다. 값이 양수이면 들여쓰기, 값이 음수이면 내어쓰기가 됩니다. 기본값은 0입니다. 내어쓰기를 할 때는 왼쪽에 여백을 적절히 줍니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> p { font-size: 20px; ...
이미지를 가운데 정렬하는 방법은 여러 가지가 있습니다. 그 중 자주 사용되는 두 가지를 소개합니다. 두 방법 모두 아래처럼 이미지를 가운데에 놓습니다. 방법 1 이미지의 부모 요소에 text-align 속성을 추가하는 방법입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> div { text-align: center; } </style> </head> <body> <div> <img src="images/200x200.png" alt=""> </div> </body> </html> 방법 2 부모 요소를 사용할 수 없고 이미지만 스타일링이 가능하다면, img 요소를 block 요소로 만든 ...
CSS / display 속성으로 표 만들기 - table, table-row, table-cell
display 속성값 중 표와 관련된 값들 display 속성값으로 table, table-row, table-cell 등을 사용해서 요소를 표(table)처럼 표현할 수 있습니다. 표처럼 보이기 위해 사용할 수 있는 속성값들은 다음과 같습니다. table : <table> 요소처럼 표현합니다. table-caption : <caption> 요소처럼 표현합니다. table-column-group : <colgroup> 요소처럼 표현합니다. table-header-group : <thead> 요소처럼 표현합니다. table-footer-group : <tfoot> 요소처럼 표현합니다. table-row-group : <tbody> 요소처럼 표현합니다. table-cell ...
CSS / calc() - 속성값을 사칙연산으로 정할 수 있게 하는 함수
개요 calc()는 괄호 안의 식을 계산한 결과를 속성값으로 사용하게 해주는 함수이다. 예를 들어 font-size: calc( 10px + 10px ); 는 글자 크기를 20px로 설정한다. 문법 연산자 +는 덧셈, -는 뺄셈, *는 곱셈, /는 나눗셈이다. 곱셈과 나눗셈의 좌우에는 공백이 없어도 된다. 하지만, 덧셈과 뺄셈의 좌우에는 공백이 있어야 한다. 계산 순서 왼쪽에서 오른쪽으로 계산한다. 곱셈과 나눗셈을 먼저 하고, 덧셈과 뺄셈은 나중에 한다. 괄호가 있으면 ...
CSS / Grid / IE에 적용시키는 방법 / Autoprefixer CSS online
CSS의 Grid는 인터넷 익스플로러에서 작동하지 않습니다. 최신 버전인 IE 11에서도 마찬가지입니다. 예를 들어 아래의 HTML 문서는 크롬이나 엣지 등 웹브라우저에서 의도한 대로 잘 나옵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { ...