[#. CodePen] HTML, CSS, JS 코드와 화면을 동시에 볼 수 있는 코드펜 티스토리에 가져와서 사용하기
앞으로는 HTML, CSS, JS 관련 코드를 작성할 때 각각의 코드와 완성된 화면을 동시에 볼 수 있는 코드펜 CodePen을 사용하려고 한다 codepen.io/ CodePen An online code editor, learning environment, and commu..
developer0809.tistory.com
2021-03-09
css에서 스타일에서 기본 백그라운드를 설정하면, 백그라운드의 이미지가 좌측 맨 위에 위치해 있는 것을 볼 수 있다. 또한 점차 백그라운드 옵션을 준 블록 태그에 크기가 커짐에 따라 백그라운드가 이미지가 반복되어 들어가는 경우가 있는데 오늘은 이 부분을 해결하는 방법을 알아보자.
- 코드
(백그라운드 url 이미지 출처: 위키피디아)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> #IsCenter{ text-align: center; } .test{ /* 위키피디아 지구사진 참고 */ background: url("//bit.ly/3e22Imq"); /*백그라운드 위치 옵션을 center 정중앙에 위치 */ background-position: center; /*기본적으로 백그라운드의 옵션은 repeat이다. */ background-repeat: no-repeat; /* 백그라운드 이미지를 보여주기 위한 크기 옵션 */ weight: 500px; height : 500px; /* 외부 여백 옵션 */ margin: 50px; } </style> </head> <body> <div class="test"> </div> </body> </html>해당 방법은 모두 background-XXXX 와 같은 옵션 태그로 설정하면 된다. 이미지 한 장을 정중앙에 위치시키기 위해서는 background-position: center; / 이미지의 반복을 없애기 위해서는 background-repeat: no-repeat; 와 같은 태그를 사용하면, 한 장의 이미지만 정중앙에 위치하여 백그라운드의 역할을 하는 것을 알 수 있다.
사진을 강조하는 블로그나 사이트의 경우 이미지 위에 텍스트를 놓는 경우가 많습니다. 텍스트가 보이게 놓기도 하고, 마우스를 올리면 보이게 하기도 합니다. 텍스트를 이미지 위에 어떻게 넣는지 알아보겠습니다.
방법 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%로 정합니다.
왼쪽 위 꼭짓점의 위치가 위에서 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>