Web Programming/디자인

예를 들어 아래와 같은 코드가 있을 때,

<html>

<body>

<div class="container">

<article style="width:100px;height:100px;background-color:#000">

</article>

</div>

<body>

</html>

article을 중앙에 배치하기 위해 flex를 사용한다면, .container의 스타일을 다음과 같이 설정할 것이다.

.container{ display:flex; justify-content:center; align-items:center; }

그러나 이는 실패한다.

가로로는 정렬이 되었지만, 세로로는 위에 붙어있다. 세로로도 중앙 정렬을 해야 한다.

그렇다면 어떻게 하면 article을 한가운데에 배치할 수 있을까?

한줄만 추가해주면 된다.

.container{ display:flex; justify-content:center; align-items:center; height:100vh }

vh는 viewport height의 약자이다.

이제 .container는 사용자가 보이는 화면 전체를 높이로 갖는다.


'Web Programming > 디자인' 카테고리의 다른 글

CSS) 한가운데 div 배치하기(가로세로중앙정렬)  (0) 2019.02.08
CSS에서의 vh와 vw  (0) 2018.09.26

CSS에서의 vh와 vw

2018.09.26 01:46

vh : Viewport Height

vw : Viewport Width


예를 들어 화면을 꽉 채우고 싶을 때(Content의 넓이가 100%가 안되더라도) 

width: 100vw;

height: 100vh; 

로 하면 보이는 화면의 100%로 된다.

즉 1vw와 1vh는 각각 가로 1%와 세로 1%이다.


'Web Programming > 디자인' 카테고리의 다른 글

CSS) 한가운데 div 배치하기(가로세로중앙정렬)  (0) 2019.02.08
CSS에서의 vh와 vw  (0) 2018.09.26

+ Recent posts

티스토리 툴바