heeney.log

[CSS] westagram - inline 속성에서 발생하는 여백에 대해 westagram 구현 도중 main 페이지에서 피드에 사용자의 아이디와 댓글 사이에 여백을 주지 않았는데 자동으로 여백이 생성되는 문제가 발생했다. 문제 되는 자동 여백 🤯 이게 뭐야잇!!! 동일한 CSS와 동일한 class, 동일한 레이아웃 구조인데 이런 문제가 발생했다. 아니 대체... 왜? 나는 일단 저 둘 사이에 여백을 준 적이 없습니다 (결백) 새로 생성된 댓글에 여백이 없는 것은 이해가 되는데 왜 그 전에 미리 HTML 안에서 생성해둔 요소들 사이에는 여백이 있을까? 그로 인해 왜 나에게 혼돈을 주는가...? 시도해본 것들 🛠 우선 자바스크립트를 살펴보자. 자바스크립트를 리팩토링 했을 때는 또 정상적으로 4px정도의 ..

display inline, block, inline-block display 속성에서 자주 쓰이는 inline, block, inline-block에 대해 알아보자. 왜 자주 쓰이냐면 시맨틱 웹을 구현하면서 의미 있는 태그를 사용하려고 할 때 inline 요소와 block 요소들의 특징으로 인해 레이아웃 배치에 영향이 있기 때문이다. inline 태그를 썼지만 block 특징을 가져야 하는 경우가 있고 그 반대의 경우(잘 안쓰이긴 함)도 있기에 display 속성으로 이 값들을 부여하면 태그를 더 자유롭게 사용할 수 있고 배치도 쉽다. inline 줄바꿈 없이 다른 요소들과 함께 한줄로 나란히 콘텐츠가 정렬된다. inline요소는 width, height가 무시된다. 해당 컨텐츠가 차지하고 있는 크기만..

🔖 position 레이아웃을 변경할 수 있는 방법 중 하나인 position을 알아보자. position은 브라우저 내에서 컨텐츠를 둥둥 띄운다고 생각하면 된다. 그래서 간혹 그냥 모든 컨텐츠를 position으로 다 정렬해버리는 경우도 있는데.... 정말 필요한 경우가 아니라면 쓰지 않는 것이 좋다. 왜냐하면 그렇게 하게되면 유지보수 하는데 정말 귀찮고 힘들기 때문이다. 어차피 기본값은 컨텐츠가 왼쪽->오른쪽 그리고 위->아래로 정렬되기 때문에 그에 맞춰 다른 속성으로 정렬해주어도 충분한 경우가 많다. static은 기본값(왼쪽->오른쪽, 위->아래)이라 생략하였다. 💡 모든 position 속성들은 top, left, right, bottom을 통해 위치하게 할 수 있다. position: rela..

vw, vh, vmax, vmin, rem, em, max-width, min-width 차이 쓸때마다 그냥 어렴풋이 알고 있는 지식으로 감 아닌 감으로 사용해서 아예 제대로 정리해볼 시간을 가졌다. vw & vh vw 브라우저 너비 값이 100px일때 1vw는 1px이다. (100분의 1) 퍼센트(%)로 계산할때 이해가 더 쉽다. ex) viewport의 너비가 1000px이고 컨텐츠 요소가 80vw라면 1000px의 viewport에서 80%를 차지한다는 뜻이고 즉 요소의 너비는 800px이다. vh 브라우저 높이 값이 100px일때 1vh는 1px이다. (100분의 1) vw와 동일하게, ex) viewport의 높이가 1000px이고 컨텐츠 요소가 80vh라면 1000px의 viewport에서 8..