반응형
index2.html
<!DOCTYPE html>
<html>
<head>
<title>02 네거티브 마진(Negative Margins)</title>
<link rel="stylesheet" href="style2.css">
</head>
<body>
<div class="header">
<div class="box-wrapper">
<div class="box">A</div>
<div class="box select">B</div>
<div class="box">C</div>
</div>
</div>
<div class="contents">
<h1>NewYork City</h1>
<p>NewYork는 멋진 도시입니다. 한번 가보고 싶은 곳입니다. 궁금하네요.</p>
<div class="map">Map</div>
<p>Seoul은 좋은 도시입니다. 구경할 게 많아요. 즐거운 도시입니다.</p>
</div>
</body>
</html>style2.css
body{
background-color: antiquewhite;
}
.header{
height: 300px;
background-image: url(city.png);
background-position: center;
overflow: hidden;
/*더 늦게 시작한다*/
margin-bottom: -100px;
}
.box-wrapper{
}
.box{
width: 100px;
height: 100px;
background-color: yellow;
margin: 5px;
float: left;
text-align: center;
line-height: 100px;
font-family: 'arial';
font-size: 50px;
}
.box.select{
background-color: orangered;
/*더 빨리 시작하고 빨리 끝나게끔 브라우저를 속인다.*/
margin-left: -50px;
margin-right: -50px;
}
.contents{
background-color: white;
width: 800px;
/*더 빨리 시작한다*/
margin-top: -100px;
margin-bottom: 100px;
margin-left: auto;
margin-right: auto;
padding: 50px;
}
.map{
background-color:white;
padding: 50px;
text-align: center;
/*전체가 따라간게 아니고 왼쪽만 늘어남.
size가 off라서 부모크기만큼 꽉 찬다는 규칙이 있음.
그래서 왼쪽 시작점만 달라짐. 오른쪽도 늘려줘야 함.*/
margin: 40px 0;
transition: all 1s;
}
.map:hover{
margin: 40px, -150px;
box-shadow: 0 0 30px rgba(0,0,0,0.2)
}
아래 강의를 수강하고 개인적으로 정리하는 글입니다.
https://programmers.co.kr/learn/courses/4521
한 걸음 더 CSS: 코딩가나다 | 프로그래머스
× 본 강의 시리즈는 총 14개의 자음 개수에 따라 순차적으로 제작됩니다. 7/13 기준으로 8강까지 업로드 되어있으며, 하나씩 순차적으로 업데이트 됩니다. 한 걸음 더 CSS: 코딩가나다 부트스트랩 없으면 CSS는 쳐다도 안보는 분들께 추천! 한글 자음 순서대로, 각 자음으로 시작하는 CSS 속성들에 대해 부담없이 알아보는 빔캠프의 동영상 강의. 라이브 코딩을 구경하며 CSS에 대해서 조금씩, 조금씩 알아갈 수 있습니다. CSS는 디자이너들의
programmers.co.kr
반응형
댓글