1. 만들려고 하는 것
2. 문제
body,
h1,
ul {
margin: 0;
padding: 0;
}을 주었는데 브라우저(크롬 & 파이어폭스) user agent stylesheet에서
margin-block-start: 1em;
margin-block-end: 1em;
padding-inline-start: 40px;이 안없어짐
3. 작성한 코드
<!-- index.html -->
<!DOCTYPE html>
<html lang="ko">
<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" />
<title>My Bucket List</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<section class="card">
<header class="header">
<h1>My Bucket List</h1>
</header>
<section class="content">
<ul class="bucket-list">
<li>Travel all around the world</li>
<li>Learn a new language</li>
<li>Try a profession in a different field</li>
<li>Achieve your ideal weight</li>
<li>Run a marathon</li>
</ul>
</section>
</section>
</body>
</html>
<!-- style.css -->
body,
h1,
ul {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
/* margin: 0;으로 해결돼야하는데 안돼서 수동으로....*/
margin-block-start: 0;
margin-block-end: 0;
padding-inline-start: 0;
}
body {
background-color: #c6c6c6;
}
.card {
border-radius: 15px;
/* background-color: #444333; */
overflow: hidden;
margin: 100px;
}
.header {
background-color: #fff;
padding: 20px 0;
border-bottom: 4px solid rgb(255, 214, 214);
}
.header h1 {
/* background-color: #fffeee; */
border-left: 8px solid rgb(255, 49, 169);
color: rgb(255, 49, 169);
padding-left: 20px;
}
.content {
background-color: #fff;
}
.bucket-list {
background-color: rgb(252, 238, 238);
padding: 20px 25px;
/* padding: auto 20px;은 왜 왼쪽에 여백이 안생길까?! */
overflow: hidden;
/* 부모 요소를 넘어가는 자식 요소를 넘은 만큼 가린다! */
}
.bucket-list li {
color: rgb(132, 132, 132);
background-color: #fff;
padding: 5px;
border: 4px solid rgb(255, 214, 214);
border-radius: 10px;
margin: 10px 0;
padding: 15px;
}
/* 동적 요소 */
.bucket-list li:hover {
border: 4px solid rgb(255, 147, 147);
color: rgb(255, 147, 147);
}
의식의 흐름대로 정리하는 블로그