오늘도 공부를 한다. 오늘은 금요일,.. ㅎ
이거를 만들어 볼 것이다.
도전!
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 400px;
height: 200px;
border: 1px solid #00f;
}
.container .box1 {
font-size: medium;
font-weight: bolder;
margin-top: 20px;
margin-left: 20px;
}
.container .box2 {
display: flex;
flex-direction: row;
margin-left: 20px;
margin-bottom: 20px;
align-items: center;
}
.container .box2 .box2-1 {
width: 50%;
font-size: 2pc;
font-weight: bolder;
color: dodgerblue;
}
.container .box2 .box2-2 {
text-align: center;
line-height: 30px;
margin-left: 20px;
width: 70px;
height: 30px;
border: 1px solid#d3d3d3;
border-radius: 5px;
}
.container .box2 .box2-3 {
margin-left: 10px;
text-align: center;
color: aliceblue;
line-height: 30px;
width: 70px;
height: 30px;
background-color: black;
border: 1px solid#000;
border-radius: 5px;
}
</style>
<title>coupon</title>
</head>
<body>
<div class="container">
<div class="box1">뉴발란스 특별 쿠폰</div>
<div class="box2">
<div class="box2-1">50%</div>
<div class="box2-2">적용상품</div>
<div class="box2-3">쿠폰받기</div>
</div>
</div>
더 쉽게 하는 방법이 있겠지만 약간의 시행착오 끝에 만들긴했다. ㅎ
중간에 모르는 건 검색해서 하긴 했지만,,
박스를 많이 만들어서 헷갈렸는데 그래도 난 잘하는듯
중꺾마ㅏㅏㅏ!!
오늘은 4월 10일
쿠폰만든거 리팩토링을 하려고 한다,
스타트!
<style>
.coupon {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 400px;
height: 150px;
border: 1px solid blue;
padding: 20px 30px;
margin: 20px;
}
.coupon .coupon-title {
font-size: large;
}
.coupon .coupon-info {
display: flex;
justify-content: space-between;
align-items: center;
}
.coupon .coupon-info .discount {
font-size: 40px;
color: blue;
}
.coupon .coupon-info .button {
}
.coupon .coupon-info .button a {
width: 40px;
height: 20px;
border: 1px solid gray;
margin: 3px;
padding: 5px 8px;
border-radius: 5px;
font-size: 14px;
}
.coupon .coupon-info .button a:hover {
background-color: black;
color: white;
}
.coupon .coupon-info .button button {
font-size: 14px;
margin: 3px;
padding: 5px 8px;
background-color: black;
color: white;
border-radius: 5px;
}
</style>
<title>coupon-refactoring</title>
</head>
<body>
<div class="coupon">
<h4 class="coupon-title">뉴발란스 특별 쿠폰</h4>
<div class="coupon-info">
<p class="discount">50%</p>
<div class="button">
<a
href="https://www.musinsa.com/app/contents/coupon_products/?coupon_no=70240"
target="_blank"
>적용상품</a
>
<button>쿠폰받기</button>
</div>
</div>
</div>
</body>
기존에 했던거를 고치려고 하니깐 너무 복잡하고 머리아프다.
리팩토링하다가 의문인게
.coupon .coupon-info .button a 랑 .coupon .coupon-info .button button 안에 margin,padding 사이즈 똑같이 들어가서 .coupon .coupon-info .button 여기다가 주려고했는데 왜 적용하면 이상해지는건가 내가 잘못알고있었던건가,, 부모한테 주면 자식한테 적용되는거 아니였누?....
패딩이랑 마진은 자식한테 직접 해야한다고하넴 ㅎ
하이