CSS는 나의 적이었다… 그렇지 않을 때까지

처음 웹 개발의 세계에 뛰어들었을 때 저는 JavaScript 정복이라는 악명 높은 도전에 대비했습니다. CSS가 곧 나의 궁극적인 인내심 테스트가 될 것이라는 사실은 거의 몰랐습니다.

처음에는 CSS가 나에게 개인적인 복수를 하는 것처럼 느껴졌습니다. div를 중앙에 배치하시겠습니까? 잊어버리세요. 레이아웃을 조정하시나요? 완전한 혼란. 스타일링은 눈을 감고 루빅스 큐브를 맞추는 것과 같았습니다.

하지만 반전이 있습니다. CSS 자체는 문제가 아니었습니다. 문제는 나였다. 저는 핵심 개념, 즉 CSS를 클릭하게 만드는 구성 요소를 이해하지 못했습니다. 기본을 파악하기 시작하자 모든 것이 제자리에 맞춰지기 시작했고, 스타일링이 관리하기 쉬울 뿐만 아니라 정말 즐거워졌습니다.

이 게시물에서는 CSS에 대한 두려움에서 이를 수용하는 데 도움이 된 세 가지 기본 CSS 개념을 안내해 드리겠습니다.

1. 선택자: 타겟팅 요소의 핵심

선택기를 사용하면 CSS에 "이봐, 내 HTML의 특정 부분에 스타일을 지정해 주세요."라고 말할 수 있습니다. 가장 많이 사용하게 될 기능은 다음과 같습니다.

• 범용 선택기(*): 페이지의 모든 요소를 ​​대상으로 합니다. 재설정에 적합합니다.
• 클래스 선택기(.classname): 특정 클래스로 요소의 스타일을 지정합니다.
• 유형 선택기(요소):

  와 같은 특정 유형의 모든 요소를 ​​대상으로 합니다. 또는

  .
• 속성 선택기([attr=value]): 특정 속성을 가진 요소에 중점을 둡니다.
• 유사 클래스(요소:상태): :hover 또는 :focus와 같이 상태에 따라 요소의 스타일을 지정합니다.

이것을 마스터하면 이미 CSS 게임에서 앞서 나갈 수 있습니다.

2. 박스 모델: 모든 요소의 보이지 않는 틀

모든 HTML 요소는 상자입니다. 박스 모델을 이해하면 간격, 여백 및 테두리에 대한 이해가 쉬워집니다.

• 내용: 상자의 가장 안쪽 부분(텍스트 또는 이미지)입니다.
• 패딩: 콘텐츠와 상자 가장자리 사이의 공간입니다.
• 테두리: 상자의 가장자리 자체입니다.
• 여백: 상자를 다른 요소와 구분하는 상자 외부 공간입니다.

이 개념이 마음에 들었을 때 위치 지정과 간격 지정이 훨씬 쉬워졌습니다.

3. 포지셔닝 및 레이아웃: 요소 배열의 예술

위치는 레이아웃을 만들거나 망칠 수 있습니다. 이에 대해서는 다음 게시물에서 더 자세히 다루겠습니다. 티저는 다음과 같습니다.

• 1차원 레이아웃에는 Flexbox를 사용하세요.
• 복잡한 2차원 디자인에는 그리드를 사용해 보세요. 이 도구를 통해 CSS는 나의 적이 아니라 나의 동맹이라는 사실을 깨닫게 되었습니다.

최종 생각

CSS는 처음에는 부담스러울 수 있지만 겁을 주지 마세요. 기본에 충실하고 계속 연습하다 보면 어느새 자신감 있는 스타일링을 할 수 있게 될 것입니다. 완벽함이 아니라 발전이 중요하다는 점을 기억하세요.

Flexbox와 Grid에 대해 더 자세히 알아볼 다음 게시물을 기대해 주세요. 그때까지 즐거운 코딩하세요.