CSS : Flex 고정된 열 개수 지정하기 - flexbox, wrap, column 개수

CSS Flexbox 고정된 열의 개수대로 레이아웃 만들기 - wrap, column 개수 CSS Flexbox를 사용해서 열 개수를 지정하는 방법을 소개합니다. Flex 아이템에 width만 설정해서 간단히 사용하는 방법부터, width 및 gap의 비율을 조정해서 item의 개수와 무관하게 반응형으로 레이아웃을 구성하는 방법 에 대해 작성하였습니다. CSS Flex 찍먹 혹시나, Flex가 뭔지 모르는 분들을 위해 아주 짧게만 설명을 작성하였습니다. Flex가 뭔지 모르시는 분은 아래 짧은 글 정도만 보시고, 구글에 검색해서 좋은 양질의 글을 보시면 될 것 같습니다. Flex는? Flexible Box, Flexbox라고 불리는 Flex는 HTML 레이아웃을 배치하기 위해 사용되는 방법 중의 하나입니..

Programming/WEB 2022.04.19

#7 CSS Sticky 속성으로 사이드바 내부 일부 영역 화면에 고정 하기

Sidebar CSS Sticky 포지션으로 상단 고정 현재 제작 중인 스킨은 상단의 Navigation 메뉴바와 왼쪽 사이드바 일부 영역은 CSS Sticky 속성을 사용하여 화면에 고정하도록 구상을 하였습니다. 이번 포스트는 Sticky 포지션을 이용하여 사이드바를 화면에 고정하는 방법 을 소개합니다. 레이아웃 구성 PC 화면에 적합하다고 생각하는 3단 레이아웃을 구상하였습니다. 아래 그림에서 배경색을 표시한 상단 메뉴바와, 왼쪽 사이바 부분의 일부 영역은 스크롤을 내리면 화면에 고정하도록 구상을 하였습니다. Sticky Position 사용 방법 및 주의 사항 사용방법 스크롤에 따라 화면에 고정되는 Sticky 속성은 아래 코드와 같이 Position 속성과 top, bottom, left, rig..

Tistory 2020.11.26

#6 CSS Position Sticky 으로 Navi 메뉴바 스크롤 내릴 때 상단 고정

Nav 메뉴바 CSS Sticky 속성으로 상단 고정 현재 제작중인 스킨은 상단의 Nav 메뉴바와 왼쪽 사이드바의 일부 영역은 Position:sticky; 속성을 사용하여 상단에 고정하도록 구상을 하였습니다. 이번 포스트에서는 상단 Nav 메뉴바를 Sticky 속성을 사용하여 상단에 고정하는 방법 을 소개합니다. 레이아웃 구성 PC에 적합한 스킨을 제작하기 위해 아래 그림과 같이 3단 레이아웃을 구상하였습니다. 아래 레이아웃에서 붉은 색으로 표시한 부분은 화면 상단에 고정할 영역입니다. 상단에 고정할 요소는 CSS의 Sticky 속성을 사용할 예정입니다. Position Sticky CSS Fixed? Sticky? CSS 포지션(Position)에서 화면을 고정하는 방법은 Fixed 속성과 Stick..

Tistory 2020.11.26

#5 CSS Flex 로 반응형 3단 레이아웃 구성하기

CSS Flexible Box로 반응형 3단 레이아웃 구성하기 지난 포스트에서는 CSS Grid의 Grid template areas 속성을 사용하여 반응형 3단 레이아웃을 구성하는 방법을 소개하였습니다. 이번 포스트에서는 CSS Flex(Flexible Box)로 반응형 3단 레이아웃을 구현하는 방법 에 대해 소개합니다. 반응형 레이아웃 구상 아래 반응형 3단 레이아웃 구성은 현재(2020년 11월) 스킨에 적용된 레이아웃입니다. 구현 초기에 CSS Grid의 grid-template-areas 속성으로 구현하려 했으나, IE호환이 되지 않아 다른 방법을 고민하다가 모바일 접속률은 낮고, 불필요한 내용이 들어가면 로딩 속도가 느려지니 본문만 표시하는 방식으로 바꾸었습니다. 아래 그림과 같이 HTML 요..

Tistory 2020.11.25

#4 CSS Grid의 Grid template areas 속성으로 반응형 3단 레이아웃 구성하기

grid template areas 속성으로 3단 레이아웃 구성 CSS Grid의 Grid template areas 속성은 비전공자인 제가 느끼기에 웹페이지 2차원 레이아웃을 구성하는 방법 중에 가장 직관적이고 쉬운 방법으로 느껴졌습니다. 이 포스트는 Grid-template-areas 속성을 사용하여 반응형 3단 레이아웃을 구성하는 방법 에 대해 소개합니다. 반응형 레이아웃 구상 티스토리 스킨을 제작을 해야겠다 생각하고 아래와 같은 페이지 레이아웃을 구성하였습니다. PC에서는 3단, Tablet 크기에서는 오른쪽 사이드바가 Article의 아래, 모바일에서는 왼쪽 사이드바를 보이지 않도록 구성하였었습니다. 타블릿이나 모바일에서 Right Side 바에 있는 일부를 하단으로 보여주기 위해 구상하였습니다..

Tistory 2020.11.25