grid를 이용할 때 화면 전체를 이용할 수 없게 되는 경우가 있어서 이번에 그 문제를 해결해 보려고 시도했습니다. 이건 그 기록.
처음 문제의 화면. 화면 전체가 영역안으로 표시되지 않는 것을 확인할 수 있습니다.
이 때의 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>login</title>
<link rel="stylesheet" href="design.css">
<link rel="Stylesheet" href="set.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body class="login_bg">
<form action="mainpage.php" method="POST">
<div class="login_grid">
<div id="login_id">아이디</div>
<input type="text" name="id" id="login_src">
<input type="submit" name="login_btn" id="login_btn">
</div>
</form>
</body>
</html>
.login_grid {
display : grid;
grid-template-columns : repeat(16, 1fr);
grid-template-rows : repeat(9, 1fr);
}
/*적당히 배치한 것(나중에 수정할 예정이었음)*/
#login_id { grid-area : 3/4/4/5; }
#login_src { grid-area : 6/5/7/9; }
#login_btn { grid-area : 10/8/11/12; }
/*background setting*/
.login_bg {
background-image: url("login.png");
background-size: cover;
background-repeat: no-repeat;
}
개발자도구로 확인해본 결과 body 태그의 default 값인 display : block 때문에 그런건가 의심이 들었습니다. 뭐가 문제인가 싶었지만 그 외에는 딱히 문제를 발견할 수 없었습니다.
이번엔 감싸는 div class="login_grid" 태그로 form태그를 감싼 채 다시 실행해보았습니다.
첫번째 칸에 하위 모든 태그들이 들어 있었습니다. 왜 그럴까 고민하다 찾아보니 display 속성은 상속이 되지 않는다는 것을 떠올려보니 이해할 수 있었습니다. 그렇다면 inherit property를 넣어 하위의 요소에게도 적용할 수 있을지 테스트해보았습니다. 여기는 이미지 파일이 없지만 결과는 inherit한 태그가 새로운 grid를 생성하는 것을 확인하였습니다. 물론 그렇게 만들수도 있지만 제가 원하는 것은 하나의 그리드를 생성한 후 여러 태그들을 조정하는 것이었기 때문에 다른 방법을 찾아보기로 하였습니다.
이번엔 새로운 파일을 생성해서 기존 파일과 비교해보았습니다.
<html>
<head>
<style>
.login_grid {
display : grid;
grid-template-columns : repeat(12, 1fr);
grid-template-rows : repeat(9, 1fr);
}
#login_id { grid-area : 3/4/4/5; }
#login_src { grid-area : 6/5/7/9; }
#login_btn { grid-area : 10/8/11/12; }
</style>
</head>
<body>
<div class="login_grid">
<div id="login_id">아이디</div>
<input type="text" name="id" id="login_src">
<input type="submit" name="login_btn" id="login_btn">
</div>
</body>
</html>
이번 파일도 저번 파일과 form 태그를 제외하면 동일했는데 화면 전체가 grid 영역인 것을 확인할 수 있었습니다.
body의 display 속성이 문제가 아니라면 grid의 rows의 숫자를 늘려야 하는 문제가 아닌지 고민해보았습니다. 실제로 grid-template-rows : repeat(9, 1fr); 대신 grid-template-rows : repeat(18, 1fr); 와 같이 그 수를 늘리면 grid 영역이 늘어납니다.
하지만 grid는 기본적으로 화면 전체를 기준으로 나누는 것이 아닌지 의문이 들었습니다.
'개발 > 문제해결' 카테고리의 다른 글
[CSS]not 선택자 선택 안 됐던 이유 (0) | 2019.08.18 |
---|