① 음수마진(negative margin) : 마이너스 값으로 margin을 설정한다! 시작점을 앞당긴다고 생각하면 된다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
width: 500px;
height: 100%;
text-align: center;
margin: 0 auto;
}
p {
width: 500px;
background: coral;
padding: 20px;
}
span {
width: 500px;
display: inline-block;
background: cornflowerblue;
margin-left: -120px;
margin-right: -155px;
padding: 3rem;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum pariatur, fugit voluptate omnis exercitationem tempore placeat, alias iusto aspernatur quis suscipit ut neque necessitatibus laboriosam sed consequuntur illo numquam ullam!</p>
<span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusamus omnis, necessitatibus consectetur sed numquam molestiae unde, nulla reprehenderit voluptates maiores asperiores, fugiat ipsam labore quos. Voluptatibus dolorem recusandae ullam sapiente.</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum pariatur, fugit voluptate omnis exercitationem tempore placeat, alias iusto aspernatur quis suscipit ut neque necessitatibus laboriosam sed consequuntur illo numquam ullam!</p>
</body>
</html>
중간 문단에 있는 부분을 강조하기 위해 negative margin을 사용한다
negative margin을 사용해서 강조를 하면 따로 width을 다르게 주지 않고도 강조가 가능하다
복잡하지 않고 간단하고 깔끔하게 코드를 만들 수 있다!
'웹 > CSS' 카테고리의 다른 글
| [코딩 공부_42] self-introduce 만들기_1 (0) | 2021.04.01 |
|---|---|
| [코딩 공부_41] transitions 적용하기 (0) | 2021.03.31 |
| [코딩 공부_39] 가상 요소 셀렉터 (0) | 2021.03.26 |
| [코딩 공부_38] li 간격 없애는 방법 3가지 (0) | 2021.03.24 |
| [코딩 공부_37] 인스타그램 실습하기 (0) | 2021.03.23 |
댓글