반응형
얼마전, div 내부 내용을 가로 세로의 중앙으로 위치시키기 위해,
다음과 같은 코드를 적용했었다.
<html>
<head>
<style>
.box {
line-height:150px;
width:150px;
height:150px;
text-align:center;
font-size:14px;
color:#73AD21;
font-weight:bold;
border:1px solid #73AD21;
cursor:pointer;
}
.box p {
line-height: 1.5;
display:inline-block;
vertical-align:middle;
}
</style>
</head>
<body>
<div class="box"> <p>Center</p></div>
</body>
</html>그런데, 아무리 해도 그림과 같이 내용이 위쪽에 붙어서 보이는 것이었다.
<결과>
한참을 헤매다가, 되는 경우와의 차이점을 발견하였다.
바로, <!DOCTYPE html> 구문을 넣지 않아서였던 것이다.
다음과 같이 하니, 잘 되었다.
<!DOCTYPE html>
<html>
<head>
<style>
.box {
line-height:150px;
width:150px;
height:150px;
text-align:center;
font-size:14px;
color:#73AD21;
font-weight:bold;
border:1px solid #73AD21;
cursor:pointer;
}
.box p {
line-height: 1.5;
display:inline-block;
vertical-align:middle;
}
</style>
</head>
<body>
<div class="box"> <p>Center</p></div>
</body>
</html><결과>
그래서, 이 DOCTYPE이 뭔지 찾아보니, 다음과 같은 설명이 있었다.
https://maen2001.tistory.com/2
DOCTYPE 선언의 중요성과 참고자료
출처 : 하드코딩하는사람들 http://cafe.naver.com/hacosa/15708 HTML 문서를 보다 보면 문서 상단에 글들이 놓여 져 있다. 바로 DTD 라는 것인데 DTD란? Document Type Definition 는 브라우저 랜더링 모드를 지..
maen2001.tistory.com
짧은 구문이지만,
이게 없으면 원하는 형식으로 문서를 보여줄 수 없다.
알면 당연하고 쉽지만,
모르면 엄청난 시간과 노력이 낭비될 수도 있다.
세상에는 그런 일들이 참 많이도 있다.
반응형
'프로그래밍' 카테고리의 다른 글
| HTML5 오로라 (0) | 2020.11.27 |
|---|---|
| HTML5 불꽃놀이 (0) | 2020.07.15 |
| 잘 되던 톰캣이 갑자기 실행 안될 때 (0) | 2019.09.07 |
| 나의 코드골프 (0) | 2019.08.07 |
| JavaScript에서 CSV생성시 한글깨짐 해결 방법 (0) | 2019.08.07 |