Per ardua ad astra.

미디어 쿼리(Media Query) 장치 화면 너비 브레이크포인트 정리들어가며CSS의 미디어 쿼리(Media Query)를 이용하여 반응형 디자인(Responsive Design)을 만들 수 있다.이때 사용할 수 있는 장치(Device)의 화면 너비 브레이크포인트(Breakpoint)에 대해 정리해본다. 장치 화면 너비 브레이크포인트Portrait 모드는 세로 화면, Landscape 모드는 가로 화면을 의미한다.장치브레이크포인트비고모바일320pxPortrait 모드예) iPhone 5, iPhone SE480pxLandscape 모드태블릿768pxPortrait 모드예) iPad태블릿 / 컴퓨터1024pxLandscape 모드컴퓨터1200px 이상Desktop, Laptop예제 코드/* 모바일 Port..

CSS positon 속성 (static, relative, absolute, fixed, sticky)들어가며CSS의 @position@ 속성에 대하여 정리해본다. @position@ 속성용도문서 상에 요소(Element)를 배치하는 방법을 지정한다.@top@, @right@, @bottom@, @left@ 속성이 요소를 배치할 최종 위치를 결정한다. 속성값 @static@요소를 일반적인 문서 흐름에 따라 배치한다.이 속성값을 사용하면 @top@, @right@, @bottom@, @left@, @z-index@ 속성을 사용할 수 없다.기본값이며, 따로 지정하지 않아도 된다. @relative@일반적인 문서 흐름에 따라 배치되지만, @top@, @right@, @bottom@, @left@ 속성을 사용..