CSS Flexbox의 등장 배경과 기본개념 및 주의점

flexbox 썸네일

웹사이트를 디자인하면서 가장 기본적이면서도 중요한 요소 중 하나는 레이아웃입니다. 웹 페이지의 레이아웃은 사용자의 첫 인상을 결정짓고 정보의 흐름을 제어하며 사용자 경험(UX)을 크게 좌우합니다. 이런 중요한 레이아웃을 효과적으로 구성하기 위한 도구 중 하나가 CSS Flexbox입니다. … 더 읽기

HTML과 CSS에 flex를 사용해서 원 안에 숫자 넣기

원 안에 숫자

html에서 초록색 원 안에 숫자 1을 넣는 코드를 구현해야 할 일이 있어 만들어 보았습니다. flex가 늘 어렵다고 생각이 드는데 원 안에 숫자를 넣기에는 이 코드가 제일 간편하게 구현될 수 있어 사용해 보았습니다. 아래의 코드를 … 더 읽기

양옆에 선이 있는 가운데 텍스트 배치(HTML, CSS)

img

  이번 글에서는 HTML과 CSS를 활용하여 양옆에 선이 있는 가운데 텍스트를 배치하는 방법에 대해 알아보도록 하겠습니다.   양옆에 선이 있는 텍스트 배치의 HTML과 CSS 코드 작성 먼저, 아래와 같은 HTML과 CSS 코드를 작성합니다. [HTML] … 더 읽기