DevLog

보통 처음 CSS 스타일을 적용할 때는 가장 기본이라고 할 수 있는 픽셀 단위를 많이 사용하지만, 막상 웹페이지를 다 만들고 나서 결과물을 확인해보면 예상과는 다르게 보이는 경우가 많다. 정적 단위인 `px`은 어떠한 경우에도 값이 고정으로 설정된다. 그렇게 되면 장치 디스플레이 크기에 따라서 보여지는 디자인이 달라지게 되고, 사용자 포커스가 제한되기 때문에 브라우저 내에서 제공하는 사용자 기능 (글꼴 크기 설정 옵션 등등) 을 사용할 수 없게 된다. 말 그대로 처음 설정으로 크기가 고정되기 때문! 따라서 효율적인 반응형 디자인을 위해서는 동적 단위를 사용해주는 게 좋은데, 기왕 쓰는 거 제대로 알고 쓰도록 하자! % 부모 요소 크기에 대한 상대적인 크기로써 적용되는 단위. 부모 요소의 속성 값을 참조하..

`flex-basis`, `flex-shrink`와 `flex-grow`는 flex child 요소에게 직접 줄 수 있는 css 속성으로, 각각 아이템의 기본 크기, 화면의 변화에 따라 flex item이 얼마나 수축(크기 감소)하고 팽창(크기 증가)할지를 정의한다. 해당 속성들은 flexible한 반응형 디자인을 설계할 때 유용하게 사용할 수 있다. flex-shrink `flex-shrink`는 box가 화면 공간을 넘어갈 경우에 box 크기를 어떻게 조정할 것인가를 결정하는 속성이다. flexbox의 크기를 줄여서 공간이 부족할 때, 자식 element 중 어떤 box의 크기를 얼마나 줄일지 정의할 수 있다. ✅ 기본값 `flex-shrink: 1;` 모든 자식 요소가 똑같은 비율 크기로 줄어든다...

처음 css 배울 때 이름이 비슷비슷해서 늘 헷갈렸던 세 가지 속성 `align-items`, `align-self`, `align-content` 한 눈에 비교하기! align-items 내부 자식 요소들을 cross-axis(교차축)를 기준으로 정렬하는 flex 속성. flex container (부모 엘리먼트)에 속성을 명시할 것! Flexbox 바로 알기(2) - main axis와 cross axis 상에서 요소 위치 결정하기 :: justify-content, align-items, flex-di Flexbox의 Main axis와 Cross axis flexbox는 주축(main axis)과 교차축(cross axis)을 기준으로 자식 요소의 위치 속성을 제어한다. 이때 default로 주축..

Flex-wrap 요소들 사이에 wrapping이 일어나지 않게 하려면 `flex-wrap`을 수정하자! ✅ wrapping : 요소들이 정해진 width를 넘어가서 다른 줄에 영향을 미치는 것 flex-wrap 속성의 기본 값 nowrap은 기본적으로 flexbox 내부의 모든 아이템이 한 줄에 있도록 한다. ⇒ 아이템들의 너비가 화면 전체 너비를 넘어가게 되면 임의로 width를 줄여서 크기 조정! flex-wrap: nowrap; ⇒ 모든 요소들을 한 줄에 있게 하기 위해 고정된 width 값이 변경된다. flex-wrap: wrap; ⇒ 요소들의 고정 width값이 유지되고, 화면이 작아질 경우 다음 줄로 넘어간다. flex-wrap: wrap-reverse; ⇒ 화면이 작아질 경우 요소들이 윗줄..

Flexbox의 Main axis와 Cross axis flexbox는 주축(main axis)과 교차축(cross axis)을 기준으로 자식 요소의 위치 속성을 제어한다. 이때 default로 주축은 수평 방향, 교차축은 수직 방향을 나타내며, 각 방향에 따라 적용되는 위치 속성값이 달라진다. 주축에 있는 item에 적용되는 속성: justify-content 교차축에 있는 item에 적용되는 속성: align-items justify-content main-axis(주축, default: horizontal)상에 있는 자식 요소들의 위치를 변경하는 flex 속성 대표적인 property values justify-content: center; : 주축 기준 중앙정렬 justify-content: sp..

Display 화면에 렌더링 되는 요소들을 어떻게 보여줄지 결정하는 CSS 속성 모든 웹사이트는 Box(영역)로 이루어져 있다! 웹사이트를 분할해보면 각 content들의 영역이 나눠지는 것을 볼 수 있는데 이것을 box라고 하고, 각 box는 display 속성값에 따라 화면 상에서 다르게 보여진다. Block 가장 기본적인 box는 `` 태그이며, `div`의 기본 display 속성은 `block`이다. Block box 옆에는 어떤 것도 올 수 없다. box가 있는 그 한 줄이 온전히 box의 영역으로 할당되기 때문! 그래서 따로 줄바꿈을 해주지 않더라도 다음 요소가 알아서 아래로 밀려나는 모습을 볼 수 있다. ``뿐만 아니라 ``, ``, ``, `` 등으로 만들어진 box도 마찬가지 ⇒ 이렇게..

그리드 사용해서 레이아웃 잡기 연습 겸 웹사이트 화면 클론코딩하다가 무한으로 반복해서 한 방향으로 흐르는 텍스트 스타일을 구현해보고 싶어서 도전! 그리드랑 SCSS 공부한 것도 블로그에 정리해야 되는데 다 건너뛰고 이걸 먼저 쓰고 있네.. 언제 다 정리하지😥 생각보다 아주 많이 간단함 주의 .top, .bottom{ display: flex; white-space: nowrap; /* 텍스트는 뉴라인으로 넘어가지 않게 한 줄로 */ overflow: hidden; /* width를 넘어가는 텍스트는 보이지 않게 숨김 */ } 먼저 텍스트를 담을 부모 box에 필요한 속성을 설정해준다. @keyframes textLoopLeft { 0% { transform: translateX(0%); } 100% { ..