로그인 페이지를 만드는 도중 텍스트의 색상은 변경이 되나 배경의 색상이 변경하지 않는 문제가 생겼다.
튜더님의 확인 결과 <div>부분이 <dkv>로 오타가 발생한 것이였다.
두 명력은 {}로 묶여 있는데 일부만 동작하는 것이 왜 그럴까 싶어 찾아봤다.
<div>는 특정 영역을 그룹화 하는 블록 요소이다.
그리고 브라우저는 알 수 없는 태그를 기본적으로 인라인 요소로 처리한다고 한다.
그러면 인라인 요소와 블록 요소가 무엇이기에 이런 차이를 보였을까
우선 블록 요소는 페이지 내에서 한 줄 전체를 차지하며 줄바꿈을 해주는 그룹화의 일부이다.
인라인 요소는 한 줄에 연속해서 표시되며 내용만큼만 공간을 차지한다.
그리고 문제가 되었던 background-color:는 배경의 색상을 변경하는 명령이며 블록 요소에서만 동작한다.
반대로 color:는 텍스트의 색상을 변경하는 명령으로 인라인 요소에서도 동작한다.
따라서 오타로 인하여 브라우저는 테그를 블록 요소가 아닌 인라인 요소로 처리하였고 background-color:는 동작하지 못 하고 color:만 동작하였다.
하단의 코드는 오타가 발생한 내용의 일부이다.
<head>
<style>
.mytitle {
background-color: green;
color: white;
}
</style>
</head>
<body>
<dkv class="mytitle">
<!-- div가 dkv로 잘못 입력되있는 부분 1-->
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력해주세요</h5>
</dkv>
<!-- div가 dkv로 잘못 입력되있는 부분 2-->
</body>
코딩으로 다시 시작하고 싶습니다!