DongSup Ahn

🔥


📚 What is TIL?

오늘 배운 내용의 핵심

✅ Negative Margins
✅ Margin auto 키워드의 사용
✅ 레이아웃의 핵심, position
✅ transform 이해하기
✅ relative와 absolute
✅ relative + absolute의 조합형태
✅ absolute로 가운데 정렬하기
✅ absolute로 확장 레이아웃 구현
✅ 레이아웃의 핵심, flexbox
✅ FlexBox의 동작 방식 이해하기
✅ Main Axis와 Cross Axis
✅ flex-grow, flex-shrink, flex-basis
✅ min-width
✅ justify-content와 align-items

알고가자 initial value

.initial-value {
  box-sizing: content-box;
  width: auto;
  position: static;
  left: auto;
  top: auto;
  flex-basis: auto;
  flex-grow: 0;
  flex-shrink: 1;
  justify-content: flex-start;
  min-width: auto;
}

Negative Margins

  • margin은 - 로도 값이 사용이가능하다
  • 차지하는공간이 달라진것이다
  • 차지하는 공간과 보여지는 디자인을 다르게 가져갈 수 있는 프로퍼티이다
    즉, 차지하는공간과 보여지는공간을 별개로 가져갈수있다
  • 브라우저에게 요소의 기준점을 속이는 원리이다

⚠️ 차지하는 공간이 달라지는 것이지, 시각적으로 보여지는 것은 달라지지 않는다

💡 하지만 이렇게 쓰는 것은 이슈가 많지 않을지.. 그럼 padding을 쓰는 것이 더 좋지 않을까?

🔎 실제로 이 기법을 많이 쓴다고한다, 버그가 아니다
🔎 position 주기에 앞서 margin을 쓰는 것도 방법이다


block-level element 를 짚고 넘어가기

  • block-level element는 사용가능한 공간의 크기를 모두 차지하게 된다
  • 즉 block-level element는 width 를 명시적으로 설정하지 않으면 바로 width: auto 와 같은 동작을 한다
  • 그렇다면 어떻게? User-agent stylesheet에 의해 width: auto 가 되는 것이다

block-level element 에 Negative Margins 을 준다면?

순차적으로 생각해보자 div는 block-level element 이다
div태그를 넣었다면 사용가능한 공간의 크기를 모두 차지하게 된다
이제 여기서 Negative Margins를 준다면?

🔎 width가 지정되지않은 상태에서 요소의 좌우를 negative margin값을 준다면
 차지하는 공간은 그대로인상태에서 시각적으로 가득차보인다

 {
  padding: 10px;
  margin-left: -10px;
  margin-right: -10px;
}

See the Pen Untitled by tjqehd23 (@tjqehd23) on CodePen.

만약 위의 코드에서 Negative margin 없다고 상상해본다면 ..?

✔️ I’m Title 이라고 적힌 요소와 자식의 컨텐츠의 왼쪽에서 시작되는 기준점이 일직선상으로 일치하지 않을 것이다
 이것을 일치시키기 위해 Negative Margins을 줄 수 있다

✔️ 이러한 개념은 트릭개념이 아닌 grid를 만들때도 사용이 된다

텍스트가 있는 요소가 네거티브 마진으로 튀어나가게 되면 스크린리더가 읽을까?

이슈가 존재한다고 한다 찾아봐야지..!


마크업이 시각적인 영향을 끼치는 경우

  • 마크업에서 나중에 오는 요소는 앞에 오는 요소의 위에 있다

💡 그렇다면 이것의 해결방법은?

🔎 z-index 주기에 앞서 생각해봤을때 마크업 순서와 관계없이 position이 static 이 아닌 값이 들어가면 앞으로 튀어나오게 된다

⚠️ 그렇다고 position: absolute 주지말자
⚠️ absolute 를 주는 순간 컨텐츠를 뒤로 보내기때문에 적절치않다


position

relative

  • 자기자신의 절대적인 위치가 있는것이 아니고 일반적인 문서의 흐름, 주위의 위치에따라 상대적으로 달라진다
  • 결정된 위치기준에서 top:0 left:0 이란 움직이지 않겠다는 뜻이다

absolute

  • 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않는다
  • containing block을 내가 원하는 요소로 바꿔줄 수 있다
  • 직계부모에게 position static이 아닌 값을 넣어주면 absolute 된 요소의 부모가 새로운 containing block 이 된다
  • top:auto left:auto 이란 현재위치에서 붕💨 뜨겠다는 뜻이다

💡 부모 중 position static 이 아닌 값이 없다면?

🔎 더 상위로 올라가 결국 containing block 이 부모의 Content영역이 아닌 뷰포트 로 역할이 바뀐다
🔎 relative는 absolute 의 새로운 containing block이 되도록 많이 쓰인다 (특정스크롤에 고정시키고 싶지 않다면 position: fixed)

💡 부모에게 position:absolute 주면 어떤 차이가 있을까?

🔎 그 부모 안에서 absolute가 된다 하지만 부모자체도 위치이동이 될테니 곤란하다
🔎 relative는 변화를 일으키지 않기때문에 사용한다


containing block을 기준으로 중앙정렬 하는 두가지 방법

{
position: absolute;
top:50%
left:50%
transform:translate(-50%,-50%)
}

✔️ top과 left로 각각 기준에서 50% 씩 이동하고 transform(-50%,-50%) 요소크기의 절반정도를 이동하여 가운데 정렬한다
✔️ transform는 차지하고있는 공간은 그대로 있고 시각적인 결과만 움직이는 것이다

{
position: absolute;
top:50%
left:50%
margin-left: -50px;
margin-top: -50px;
}

✔️ 과거 transform이 없을 때는 Negative Margins 으로 이것을 해결했다고 한다
✔️ Negative Margins 을 쓰면 일일히 계산해줘야하는 단점이 있다


inset(단축속성) + margin으로 중앙정렬 하는방법

 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100px;
  height: 100px;
  margin: auto;
}

✔️ inset: 0 을 통해 containing block의 높이와 너비만큼 가득차게 된다
✔️ 그 상태에서 margin: auto 를 주면 가운데 정렬이된다

💡 inset: 0 을 주기 전 absolute가 되는 순간 너비가 갑자기 줄어드는 현상은 inline이 되었기 때문일까?

⚠️ 아니다 컨테이닝 블럭이 제공하던 너비를 최대로 쓰지 않고 최소화가 되기 때문에
 텍스트 양만큼 즉 컨텐츠의 크기만큼으로 잡히는 것이다

⚠️ inset: 0 을 주었을 때 비로소 containing block이 제공하는 높이와 너비를 자동으로 쓸 수 있게 되는 것이다

See the Pen Untitled by tjqehd23 (@tjqehd23) on CodePen.

  • 어디서 쓰이는지 더 알아보자


flexbox

  • 자식 요소 flex items 가아닌 자식을 포함한 부모 flex Container 에게 준다

margin의 특성을 이용한 가운데 정렬

3개의 자식요소가 있다고 가정했을 때
justify-content 를 사용하지 않고 margin 만으로
3개의 요소를 가운데에 정렬하려면..? 

.one {
  margin-left: auto;
}
.three {
  margin-right: auto;
}

✔️ 첫번째와 세번째 요소에게 각각 마진값을 주어 2번째 요소를 쪼여주면 해결할 수 있다


flex items 에 사용하는 속성들

flex-basis

  • flex-item의 기본 사이즈를 지정하는 속성
  • 여백의 공간이 아닌 전체 공간을 분할하는 속성

  • 기본값이 auto이다

  • flex-basis는 주축에만 적용되기 때문에 flex-direction이 column이라면
    flex-basis는 height을 제어하게 된다

flex-grow

  • 부모의 컨테이너 내부에서 할당할 수 있는 공간의 정도를 지정할 수 있는 속성
  • 남은 여백을 채우기 위한 속성
  • 형제 요소인 아이템들이 같은 flex-grow값을 가지면, 동일한 공간을 할당받는다
  • flex-basis값에 grow의 비율 크기만큼 더해진다

flex-shrink

  • 아이템의 크기를 고정하거나 축소할 때 사용한다
  • 값을 0을 줄 경우 줄어들지 않는다.
  • 기본값이 1로 공통분담을 뜻한다

💡 flex-basis:0 을 주게 되면 여백공간이 아니라 전체 공간을 분할한다?

  • flex-basis 속성이 없는 경우의 flex-item 공간

    • (전체공간 중 요소들의 크기를 뺀 나머지 여백 / 요소들의 flex-grow 속성값의 합 * flex-grow의 값) + 요소의 크기
      245(첫번째 자식 item의 크기) === (500 - 30 / (2+1+1) * 2) + 10


  • flex-basis 속성이 있고 0인 경우의 flex-item 공간

    • 여백이 아닌 전체 공간 / 요소들의 flex-grow 속성값의 합 * flex-grow의 값
      250(첫번째 자식 item의 크기) === 500 / (2+1+1) * 2


  • flex-shrink 속성이 0이 아니고 부모요소의 크기를 넘을 경우

    • 요소의 공간 - (부모요소를 넘는 공간의 크기 / 요소들의 flex-shrink 속성값의 합)
      183.33 === 200 - 100 / 6


See the Pen Untitled by tjqehd23 (@tjqehd23) on CodePen.



초기값의 중요성

min-width

  • 내부에 있는 컨텐츠의 너비가 부모를 넘어가버릴때 생기는 문제의 원인
  • min-width 의 initial value는 auto 이다

💡 flex-basis : 0를 주면 자동으로 너비가 없어져야되는데 왜 살아있을까??

⚠️ min-width: auto 로 인해 내부 자식 컨텐츠 크기만큼 자신의 줄어들 수 없는 최소사이즈가 강제되어리기 때문이다
⚠️ min-width: 0 로 해결이 가능하다

align-items

  • 자식하나의 높이가 커지면 다른 자식도 같이 커지게되는 문제의 원인
  • align-items 의 initial value는 stretch 이다

💡 이러한 기능들은 과연 왜 존재할까?

🔎 레이아웃이 안정적으로 유지되게끔해주는 장치들이다

See the Pen Untitled by tjqehd23 (@tjqehd23) on CodePen.

✔️ stretch 컨데이너의 맞게 늘리는 성질이 있기때문에
 자식하나가 나면 부모의 높이가 늘어난다 이때 stretch에 의해 자식들이 늘어난다

✔️ margin을 상하단으로 주어 margin: auto 0px 늘어나는 것을 방지할 수 있다
✔️ flex에서도 사용가능한 공간으로 주어지기 때문에 margin이 같은 개념으로 동작한다


width와 basis 무엇을 쓸까?

  • flex-basis 는 나머지 공간이 flex Items 에 분배되기 전에 flex Items의 초기 크기를 설정한다
  • 이렇게하면 컨텐츠에 따라 항목이 동적으로 늘어나거나 줄어들 수 있다

🔎 flexbox 에서 따로 basis를 쓰는 이유가 있을 것이다
🔎 flex-basis는 flexbox 내에서 더 유연하게 컨트롤 할 수 있다


방법의 다양성

🔎 실제 실무에서는 여러 방식을 사용해서 해결해야하는 경우가 다양하다
🔎 하나의 방법을 익히는 것이 아닌 여러가지의 방법을 익히려는 자세가 중요하다



✨ Today is …

네이버의 책임 리더이신 상훈님의 특강🌟

지금의 기술발전이 앞으로 내가 가고자하는 길에 어떤 영향을 미치는지
그렇다면 내가 어떤 자세를 취해야하는지 진지하게 고민 해볼 수 있는 시간이었다 💭

공부 할 때 ChatGPT를 자주 애용하곤 했는데
효율적으로 정보를 얻어낼 수 있어서 편리하면서도
한편으로는, 위기감에 미래에 대한 걱정도 있었다 😟
특강을 통해 걱정에 대한 해답을 얻을 수 있었던 것 같다

앞으로 어떤 자세로 언어를 다루고 어떤 관심을 가져야 하는지
그러한 노력이 없다면 왜 더더욱 도태될 수 밖에 없는지 디테일하게 알 수 있었던 특강… 🙇‍♂️

💡 관심을 가지고, 알아내서, 고민하고, 공부하자 ❗

댓글남기기

참고

Semantic Tag

시맨틱 태그 Semantic Tag HTML5에서 도입된 의미를 부여한 태그로, 웹 페이지의 구조와 콘텐츠를 설명하는 역할을 한다 시맨틱 태그는 요소의 역할과 의미를 더 잘 나타내므로 이러한 태그를 사용하면 웹 페이지의 내용을 더 명확하게 정의하고, 코드의 가...

React 에서의 Memoization

메모이제이션 Memoization 컴퓨터가 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로서 동일한 계산의 반복 수행을 최소화하고 재사용하는 것을 말한다 💡 어떤 이점이 있을까?  성능 향상 - 동일한 입력 값에 대한 결과를 캐시에...

React에서의 event handling

이벤트 핸들링 웹 애플리케이션에서 사용자의 상호작용에 대응하기 위해 이벤트(예: 클릭, 키보드 입력, 마우스 움직임 등)를 감지하고 처리하는 과정이다 💡 사용자의 액션에 반응하여 동적으로 동작하고  데이터를 업데이트하는 데 이벤트 핸들링이 중요한 역할을 한다 ...

transition과 animation 속성의 차이

animation과 transition transition과 animation 속성은 플래시의 기술이나 자바스크립트의 도움 없이 웹 요소에 직접 애니메이션 효과를 적용하는 CSS 기술이다 이러한 속성을 사용해서 웹 요소의 스타일 속성을 변경하고 애니메이션 효과를 부...