(CSS) grid 2탄 : grid line, span, grid-column, grid-row
지난번 포스팅에서는 grid를 만드는 방법에 대해 다루었다. gird를 만들고 나서 특정 칸 두 개를 합치는 등, 레이아웃을 자유자재로 변화시키고 싶을 수 있다. 이럴 때 grid-column이나 grid-row를 사용하면 된다. grid line 번호grid-column과 grid-row를 사용하기 전, grid line 번호에 대해 먼저 알아야 한다. 여기 5x5 grid가 있다고 하면, 그리드를 이루는 모든 라인들이 번호를 갖게 되는데, 왼쪽 상단부터 1번, 그다음 라인은 2번 이런 식으로 번호가 매겨진다. 음수도 사용 가능하며, 주로 -1번으로 가장 끝에 있는 라인을 부른다. span grid item이 오직 하나의 트랙(column이나 row)을 사용한다면, span 속성을 사용할 ..
(CSS) flexbox 3탄 : flex-grow, flex-shrink, flex-basis, flex 사용법
flex box 포스팅, 마지막 3탄이다. 이번 포스팅에서는 flex-grow, flex-shrink, flex-basis 사용법에 대해 다룬다. flexbox 관련 이전 포스팅 링크는 하단에 추가하였다. (CSS) flexbox 1탄 : justify-content, align-items, flex-direction, flex-wrap 사용법css로 태그 크기를 이리저리 조정하다 보면 불편한 점을 금방 발견하게 된다. 컴퓨터를 기준으로 height와 weight를 설정해서 디자인하면, 모바일에서 볼 때 디자인이 이상해지는 경우가 있다. 따lemu-devblog.tistory.com (CSS) flexbox 2탄 : flex-flow, align-content, order 사용법이전에 flex box..
(CSS) 단위 정리, px, em, rem, vh, vw, %
css에는 크기를 지정하는 다양한 단위가 있다. 각각의 단위는 어떤 특징을 가지고 있는지, 또 특정 상황에서 어떤 단위를 사용하면 좋을지 정리하고자 한다. 단위 분류 1. px 먼저 단위를 상대적인지 절대적인지 나누어 생각해 볼 수 있다. px은 절대적인 단위다. 크기가 고정되어 있다는 뜻이다. 주로 정확한 크기나 위치를 나타내야 할 때 사용된다. 단점으로는 고정되어 있으므로, 반응형 웹을 만들기 어렵다는 것이다. 상대적인 단위들은 고정되어 있지 않고, 유동적으로 변화하기에 반응형 웹을 만들기 용이하다. 2. %%는 부모 요소를 기준으로 백분율로 크기를 나타낸다. 만약 부모 높이가 200px이라면, 유저가 높이를 50%로 주면 높이가 100px로 적용된다. 3. vh, v..
