CSS 상자 모델 학습 팁/요령

그래서 저는 거의 1년 동안 이 글을 쓰려고 했으나 끝내 쓰지 못했습니다. 배운 것을 굳히기 위해 노력하고 있기 때문에 여행과 경험에 대해 더 많이 쓸 계획입니다.

내가 처음 HTML과 CSS를 배우기 시작했을 때, 나는 때때로 내가 원하는 곳에 요소를 배치하는 데 어려움을 겪었습니다. 내 말은, 내가 무엇을 하든 올바른 위치에 놓이지 않거나 전혀 움직이지 않는다는 것입니다. 그 좌절감은 Peter Griffin이 블라인드를 위해 두 줄을 당기고 고르게 상승하기 전에 50번을 해야 하는 CSS gif를 항상 생각나게 합니다. CSS 투쟁은 현실입니다.



MemeGuy.com

HTML 요소가 움직이지 않는 이유를 파악하는 데 몇 시간이 걸린 것 같습니다. 마지막으로 마진, 패딩, 너비, 높이 등과 같은 요소의 속성이 요소의 이동을 방해하는지 알아낼 것입니다. 어떤 경우에는 페이지 상단에 있는 요소에 영향을 미치는 페이지 하단에 있는 요소이거나 그 반대일 수 있습니다. 후자는 문제가 발생할 것으로 예상되지 않았기 때문에 가장 실망스러운 상황이었습니다.

2주에 한 번씩 스타벅스에서 친구를 만나 어떤 프로젝트를 진행 중인지, 프론트엔드 개발을 위해 eCourse를 진행하고 있는지, 면접은 어떤 것인지에 대해 논의했습니다. 그러던 어느 날 화창한 오후, 스타벅스에서 제이크와 함께 커피를 마시는 동안 하늘이 갈라졌습니다. 그는 Quora에서 문제를 훨씬 더 쉽게 찾을 수 있는 CSS에 대한 멋진 작은 트릭을 발견했다고 생각합니다.

기사를 쓴 사람이 누구인지 기억나지 않거나 그 사람이 트릭을 생각해낸 사람인지도 기억나지 않습니다. 트릭은 background 속성을 사용하여 각 HTML 요소의 여백과 패딩에 다른 색상을 적용합니다. 각 요소의 속성을 시각적으로 표현하면 내 CSS에서 어떤 일이 일어나고 있는지 더 잘 이해할 수 있습니다. 아래 구문은 일반적으로 처음부터 CSS 맨 아래에 붙여넣고 필요할 때까지 구문을 주석 처리하는 것입니다.

*{ background-color: rgba(255,0,0,0.3);}
* * { background-color: rgba(0,255,0,0.3);}
* * * { background-color: rgba(35,0,55,0.3);}
* * * * { background-color: rgba(255,0,0,0.3);}
* * * * * { background-color: rgba(0,33,255,0.3);}

2018년 9월Medium 에 이 글을 게시했을 때 Firefox가 이와 유사한 CSS 그리드 기능을 방금 출시했다고 생각하지만 현재(2022년 4월) 대부분의 브라우저에는 개발 도구에 이 기능이 내장되어 있습니다. VS Code에서 아주 빠르게 무언가를 미리 볼 때 여전히 편리합니다.
내가 사용하는 색상이 마음에 들지 않으면 CSS에서 RGB 값을 변경하여 색상을 변경할 수 있습니다.

얼마 전에 코딩 교육을 시작했는데 개인적인 사정으로 잠시 자리를 비웠습니다. 저는 이제 막 2022년에 여정을 계속하고 있으며 이제 막 코딩 여정을 시작하는 다른 사람들을 돕기 위해 이 팁을 편집하고 여기에 게시하기로 결정했습니다. 이것이 Front-End Dev 여정에 도움이 되기를 바랍니다. 좋아요와 공유를 잊지 마세요.