CSS가 혼란스럽나요? 당신은 혼자가 아닙니다

저는 다른 사람들과 마찬가지로 웹 개발 여정을 시작할 때 HTML, CSS, JavaScript를 배우는 기본부터 시작했습니다. 저는 단지 가능한 한 빨리 무언가를 만들고 싶었기 때문에 프로젝트 구축을 시작할 수 있을 만큼만 배웠고, 우연히 발견하거나 필요하다고 생각되면 새로운 것을 찾아보곤 했습니다.
이 방법의 장점 중 하나는 소규모 프로젝트를 빠르게 구축할 수 있다는 점이었지만, 학습에 공백이 많이 남는다는 큰 결점도 있습니다.

현재로 돌아가서 저는 ReactJS를 배우는 중이고 즐기고 있습니다. 하지만 스타일링 구성 요소에 관해서는 CSS가 제게 명확하게 느껴지지 않았기 때문에 항상 실망스럽고 직관에 어긋났습니다. 내 머리. 원하는 결과를 얻기 위해 속성을 추가하기만 하면 되지만 어딘가에서 한 번의 잘못된 움직임으로 무너지기를 기다리는 고대 다리 위를 걷는 것처럼 느껴졌습니다.

알고 보니 CSS는 제가 생각했던 것만큼 혼란스럽거나 어렵지 않습니다. 실제로는 CSS에 대한 올바른 정신 모델이 없었습니다.
일반적으로 사람들은 CSS를 원하는 모양이나 배열을 얻기 위한 속성(키:값 쌍)의 모음으로 생각합니다. 하지만 이제는 이것이 바뀌었고 이 기사가 끝날 때까지 여러분도 그렇게 되길 바랍니다.

1. CSS를 속성 모음으로 생각하지 마세요. 오히려 CSS를 레이아웃 모드의 모음으로 생각하세요

• CSS는 레이아웃 모드라고 불리는 다양한 레이아웃 알고리즘으로 구성되어 있습니다.
• 각 레이아웃 모드는 CSS 속성이 사용되는 방식을 재정의하고 변경할 수 있는 CSS 내의 자체 하위 언어와 같습니다. 즉, CSS 속성이 이러한 알고리즘에 입력됩니다. 따라서 여러 속성을 외우기보다는 이러한 알고리즘이 이러한 속성을 어떻게 사용하는지 집중해 보세요.

2.각 레이아웃은 특정 문제를 해결하도록 설계되었습니다

• 기본 레이아웃 모드: 일반 흐름은 디지털 문서를 생성하기 위한 것입니다.
• MS Word 레이아웃 알고리즘과 유사합니다. 즉. 제목과 단락은 수직으로 블록으로 쌓이고, 텍스트, 링크, 이미지 등은 이러한 블록 안에 위치합니다.
• 일반 흐름 외에도 가장 자주 사용하게 될 두 가지 다른 레이아웃 모드는 Flexbox 및 그리드 레이아웃입니다.

3.Flexbox 및 그리드 레이아웃 모드

• 다시 말하지만, 모든 레이아웃 모드는 특정 문제를 해결하기 위해 만들어졌습니다. 다음과 같이 생각해보세요. Flexbox는 어떤 문제를 해결하나요?

• Flexbox는 각 항목이 그룹 내에서 배포 및 정렬되는 방식을 제어하고 엄청난 유연성을 통해 항목 그룹을 행 또는 열로 배열하는 것입니다.

• 그리드는 어떤 문제를 해결하나요?
  CSS 그리드를 사용하면 항목 그룹을 2차원으로 더 쉽게 배열하고 정렬할 수 있습니다. 각 개별 항목 또는 항목의 행/열을 유연하게 제어하고 배열을 조작할 수 있습니다.

레이아웃 모드 모음과 CSS 속성에 영향을 미치고 수정하는 방식 측면에서 CSS를 생각하기 시작하면 CSS가 여러 줄에 걸쳐 있더라도 상황이 어떻게 진행되는지에 대한 보다 명확한 정신 모델을 얻을 수 있습니다.

위 내용은 CSS가 혼란스럽나요? 당신은 혼자가 아닙니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!