인프런 커뮤니티 질문&답변
작성한 질문수
이랑
작성
·
230
5
<!doctype html>로 하고
bpdy{
display: flex;
align-items: center;
}
이렇게 하면 변화가 없는데 페이지소스보기로 확인해보니 body의 크기가 body안에 소스들 크기만큼만 body 크기가 잡혀서 중앙배치해도 그대로인거 같은데
<!doctype>영상처럼 이렇게 하니깐 body 크기가 웹브라우저 전체크기로 잡히더라구요
이게 차이가 뭐져..?ㅠㅠ
답변 4
2
그러네요 저도 왜 변화가 없지? 하면서 질문 내용 보니까
<!DOCTYPE html>을 주석처리하니까 보여주시는 것처럼
가운데로 오는 변화가 생기네요...
이유가 뭘까요...
HTML 버전 차이일까요??
1
0
html, body에도 기본적인 크기를 설정해주면 위 문제를 해결할 수 있는 것 같습니다.
두 태그에도 자체 컨텐츠의 크기가 있기 때문에 width, height을 100%로 설정하면 가운데 정렬 결과를 볼 수 있습니다.
혹은 컨테이너에 vw, vh 이라는 뷰포트 기준의 크기 설정을 해주시는 방법도 있는데,
이 경우에는 body 자체에 마진이 있기 때문에 처음에 reset css를 적용하시거나 body에 마진을 0으로 주시는 등의 방법을 같이 적용해야하는 것 같습니다.
0