고정 헤더 영역
상세 컨텐츠
본문
[CSS] 텍스트에 흰 배경 넣기 (box-shadow 활용)
홈페이지 디자인을 하면서 메인 프로모션 타이틀 텍스트 배경을 흰색으로 넣고 싶었다.
그래서 일단 아는대로 background-color : #fff; 를 넣고 padding: 0 20px; 을 넣었는데 아래와 같은 문제발생!
<before>
padding 값이 맨 앞과 맨 뒤에만 먹는다.
-> 자동 줄바꿈이 되면 앞쪽이 들여쓰기가 되지않아 줄이 안맞음.
<after>
그리고 열심히 찾아본 결과 위와 같이 양옆좌우가 일정한 여백을 갖는 배경을 넣을 수 있었다!
방법은 바로 box-shadow!
약간 야매의 방법이기는 한데 흰색 그림자를 x축기준 오른쪽, 왼쪽에 넣어주는 것이다.
blur(퍼짐)와 opacity(투명도)가 없는 흰색그림자가 좌우에 깔려서 마치 여백이 생긴 것처럼 착시효과를 주는 것.
소스는 아래와 같다.
h2 혹은 p태그로 글을 써주고 css안에 box-shadow 속성을 설정해준다.
x축으로 0.2em, y축으로 0, 투명도 0, 색상은 흰색 (뒤에 그림자),
x축으로 -0.2em, y축으로 0, 투명도 0, 색상은 흰색 (앞에 그림자)
라는 의미다.
<style>
h2 {
font-size: 60px;
line-height: 1.4em;
background-color: #fff;
box-shadow : 0.2em 0 0 #fff, -0.2em 0 0 #fff
}
</style>
<body>
<h2>10 BEST CAFES IN BUDAPEST</h2>
-- 생략--
'H-정보공유 > 블로그 & CSS' 카테고리의 다른 글
| 내 블로그에 파비콘 만들어서 적용하기 (0) | 2019.02.28 |
|---|---|
| [CSS팁] :last-child 선택자 (0) | 2018.08.30 |
| 개발자 도구에서 캐시/쿠키 저장 풀기 (크롬 Chrome) (0) | 2018.08.28 |
| 티스토리 블로그에 네이버 이웃 커넥트 추가하기 (0) | 2018.04.04 |
| 구글 애드센스 페이지 중간에 삽입하기 (티스토리 서식 기능) (0) | 2018.04.03 |
댓글 영역