코드잇 스프린트의 css강의를 듣던 평화로운 어느날..
문제가 발생했다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>로그인</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<form>
<h1>로그인</h1>
<label>아이디</label>
<input
name="username"
type="text"
placeholder="Email 또는 전화번호"
/>
<label>비밀번호</label>
<input
name="password"
type="password"
placeholder="비밀번호"
/>
<div>
<a href="#" class="forget">비밀번호를 잊으셨나요?</a>
</div>
<button>로그인</button>
<div class="join">
회원이 아니신가요?
<a href="#">가입하기</a>
</div>
</form>
</body>
</html>html {
font-family: 'Noto Sans KR', sans-serif;
font-size: 16px;
font-weight: 400;
box-sizing: border-box;
}
form{
width: 360px;
text-align: center;
margin: 0 auto;
}
label {
display: block;
margin: 16px 0 8px;
width: 100%;
text-align: left;
font-size: 16px;
font-weight: 400;
color: #2c2c2c;
}
input {
display: block;
width: 100%;
padding: 16px 24px;
margin: 0 auto;
border: 1px solid #d1d1d1;
box-sizing: border-box;
}
이하 생략코드의 css부분을 보면 html에 box-sizing: border-box;와 input 부분에 box-sizing: border-box;이 적혀있다.
나는 처음에 코드를 작성할 때 전체를 감싸고 있는 html 태그가 css의 첫번째 코드에 와 있길래 (html부분 내가 작성한것 아님) "전체를 뜻하는 태그이구나..!"라는 생각에 box-sizing: border-box를 주었는데 자꾸 input부분이 지정해준 너비 밖으로 삐져나왔다.
너비 값을 100%도 줘보고, 정해진 px로도 줘봤지만 input의 너비는 줄어들지 않았고 overflow : hidden까지 들먹여가며 머리를 싸맸던 나는 input 값에 box-sizing: border-box;를 재부여하고 나서야 해결을 할수 있었다.
왜 html 태그에 작성한 box-sizing: border-box;은 적용되지 않았던걸까? box-sizing의 작동 방식은 이렇다.
- 기본 적용: box-sizing: border-box;를 html 태그에 적용하면, 모든 요소가 기본적으로 border-box 모델로 계산되도록 설정해야하지만 이 설정이 모든 요소에 자동으로 적용되지 않거나, 특정 요소에 대해 다른 스타일이 정의되어 있을 경우, 이러한 스타일이 우선시될 수 있다.
- 상속: CSS 속성은 기본적으로 상속되지 않는다. box-sizing은 상속되는 속성이 아니기 때문에, 각 요소에 대해 명시적으로 설정해주지 않으면 기본값인 content-box가 적용될 수 있다.
- 스타일 우선순위: 만약 어떤 요소에 대해 box-sizing을 따로 설정한 경우, 그 설정이 우선적으로 적용된다. 그래서 각 요소에 대해 box-sizing: border-box;를 명시적으로 설정해주면, 그 요소에 대해서는 border-box 모델이 적용되는 것.
1. *선택자 :
- *는 모든 요소를 선택하는 와일드카드 선택자이다. 즉, 문서 내의 모든 HTML 요소에 적용할 스타일을 정의할 수 있다.
- 예를 들어, * { margin: 0; }는 모든 요소의 마진을 0으로 설정한다.
2. html 선택자 :
- html 선택자는 <html> 태그에만 적용된다. 따라서 html에 설정한 스타일은 오직 <html> 요소에만 영향을 미친다.
- 예를 들어, html { font-size: 16px; }는 문서의 루트 요소인 <html>에만 적용되고, 다른 요소에는 직접적인 영향을 주지 않는다.
html 태그에 box-sizing: border-box;를 설정했어도, 그 설정이 모든 요소에 영향을 주지 않거나, 다른 스타일이 우선시될 경우 원하는 효과를 얻지 못할 수 있다. 그래서 모든 요소에 대해 * 선택자를 사용하여 적용하는 것이 일반적인 방법이다.
*이해를 위해 도움 주신 팀원 ㅇㄱ님과 chatGPT 고맙습니다.
'코린이 개념잡기 > CSS' 카테고리의 다른 글
| flex box (0) | 2024.12.02 |
|---|---|
| BOX Model (0) | 2024.12.01 |
| 마진 상쇄(margin collapsing) (1) | 2024.11.29 |
| 미디어 쿼리(media query) (0) | 2024.02.09 |
| inset과 gap (0) | 2023.03.17 |