가끔 padding, maring을 전혀 안 건드렸음에도
다음과 같이 왼쪽은 많이 남고 오른쪽은 조금 남는 등 안 맞는 경우가 자주 있다.
크롬으로 연 후에 f12키를 눌러 크롬 개발자 도구를 켜서 이를 해결할 수 있다.
개발자 도구를 켠 후 다음과 같이 어디에서 왼쪽 여백이 발생하는지 찾아본다.
보니까 ul에서 paddinf-inline-start로 40px만큼의 패딩이 들어가 있었다.
한눈에 보기 쉽게 이미지로 확인할 수도 있다.
따라서 ul에 padding을 0으로 주었더니 해결됐다.
[완성]
[HTML]
<!DOCTYPE html>
<html>
<head>
<meta charset="UFT-8">
<title>Document</title>
<link href="hw1.css" rel="stylesheet">
</head>
<body>
<div style="text-align: center;">
<ul class="list" style="padding: 0; margin: 10px">
<li class="active">tomo cerveza con Messi</li>
<li>para vivir felizmente</li>
<li>soy de Corea</li>
<li>feliz navidad</li>
</ul>
</div>
</body>
</html>
[SCSS]
ul {
li {
list-style-type: none;
padding: 10px;
border: 1px solid gray;
}
.active {
background-color: skyblue;
color: white;
}
li:hover{
background-color: red;
color: white;
}
}': ) Web > 웹 스터디' 카테고리의 다른 글
| [Sass] @extend 문법 사용 방법 (0) | 2023.12.13 |
|---|---|
| [Sass 실습1] [Nesting 문법] Sass를 이용해 리스트 만들기 (0) | 2023.12.13 |
| [HTML/CSS] 경로설정 오류 Refused to apply style from~is not a supported stylesheet MIME type, and strict MIME checking is enabled. (0) | 2023.12.13 |
| Bootstarp Grid 레이아웃 (row와 col) (0) | 2023.12.12 |
| [HTML, CSS 실습] 반응형 레이아웃 만들기 - 쇼핑몰 레이아웃 (0) | 2023.11.19 |
