Development/Design (4) 썸네일형 리스트형 깔끔한 모던 날씨 카드 디자인 HTML과 CSS만 이용해서 만든 날씨 카드 샘플이다. 영감은 https://story.pxd.co.kr/1379 그래프는 생각보다 어렵기 때문에(이미지가 아니면 좀 복잡하다) 제외했다. 생각보다 깔끔하게 디자인이 나왔다. CSS) 한가운데 div 배치하기(가로세로중앙정렬) 예를 들어 아래와 같은 코드가 있을 때,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는 사용자가 .. CSS에서의 vh와 vw vh : Viewport Heightvw : Viewport Width 예를 들어 화면을 꽉 채우고 싶을 때(Content의 넓이가 100%가 안되더라도) width: 100vw;height: 100vh; 로 하면 보이는 화면의 100%로 된다.즉 1vw와 1vh는 각각 가로 1%와 세로 1%이다. 심플한 로그인 및 회원가입 Vue.js와 HTML, CSS만을 이용해서 로그인 & 회원가입 화면.최근에 디자인 공부 열심히 하고있다. 이전 1 다음
