2_ul 기본 스타일 초기화, box-sizing, 마진 겹침 해결법

오늘은 🐱
두 가지 오류를 살펴보려고 한다.

---

👏 두 문제를 해결하면 알 수 있는 것

• ul 기본 설정 값
• border-box

---

문제 1 : 왼쪽 여백 발생

토글목록을 만드는 중 아래와 같이 두 길이가 다른 오류가 발생했다.

이상하다..🤔
가로 길이 똑같이 했는데 padding도 없고, border도 없는데 앞에 여백이 왜 생겼지..

개발자 도구를 열어 어디에 속해있는지 확인해본 결과 ul 로 묶여있었다.
.
.

원인은 브라우저가 ul 태그에 기본적으로 적용시킨 padding-left: 40px였다.

그래서 ul 태그의 기본 스타일을 제거하는 코드를 추가했다.

ul {
  margin: 0;           /* 기본 마진 제거 */
  padding: 0;          /* 기본 패딩 제거 */
  list-style: none;    /* 기본 리스트 스타일 제거 */
}

만약에 특정 클래스에만 적용하려면 :

.itemList {
  margin: 0;
  padding: 0;
  list-style: none; 
}

이런 방식으로 해결할 수 있다.

list-style은 ul, ol 태그에 기본 적용된 리스트 아이템의 점, 숫자 등을 제거하는 속성이다.

---

끝~~~이 아니다...

해결될 줄 알았는데 이번에는 길이가 다르다...

...
padding과 border 설정은 맞게 한 거 같은데..
어떻게 수정해야할까 ?

---

문제 2 : 패딩 및 보더로 인한 길이 차이 발생

기본적으로 width는 컨텐츠 영역만의 너비를 의미하고, padding과 border는 width에 포함되지 않기 때문에 추가적인 여백을 차지한다.

아래 코드를 추가해서 해결할 수 있다!

* {
  box-sizing: border-box;
}

이 코드를 통해 width는 padding과 border를 포함한 전체 너비를 의미하게된다.

이렇게 설정을 바꾸면
반응형 디자인에서도 사전에 지정된 기본 값을 유지하면서 특정 비율을 차지하게 쉽게 설정되어 용이해진다. -> 레이아웃 조절이 쉬워진다.👍
.
.
.
.

❗다만, 몇가지 유의가 필요하다.

사전에 width를 설정할 때, border과 padding을 더한 값으로 설정해야함을 유의해야한다.

만약 특정 padding값과 border 값으로 디자인 할 계획이라면 box-sizing: border-box; 설정이 없어도 된다.
ㅣ 나의 경우 padding, border 값과 px값이 의도한 값에 비해 작은 차이만큼만 발생하여, 반응형에 용이하도록 box-sizing: border-box;를 사용하게 되었다.

---

✨ 길이 차이 발생은 인접한 요소간 마진겹침 현상 때문에 발생할 수도 있다. 길이 차이가 발생한다면 마진 겹침 또한 고려해보아야한다.😉✨

해결..👏