CSS는 굉장해요!

내가 배우고 있는 것

CSS는 페이지에 활기를 불어넣는 역할을 합니다. 수년에 걸쳐 CSS는 더욱 강력해졌으며 이전에는 JavaScript가 필요했던 애니메이션을 수행하는 데 성공했습니다. 이번 주에는 좀 더 고급 속성을 살펴봤습니다.

미디어 쿼리

미디어 쿼리는 새로운 디바이스 시대에 거의 필수가 되었습니다. 스마트폰의 등장으로 인해 다른 어떤 기기보다 휴대전화를 통해 미디어를 소비하는 사람들이 더 많아졌습니다. 따라서 사이트는 모바일에서 보기에도 좋아야 하지만, 더 큰 화면에서도 보기 좋게 표시되어야 합니다. 어떻게 그렇게 할 수 있나요? 뭐, 부분적으로는...

플렉스박스!

미디어 쿼리를 Flexbox와 결합하면 CSS는 도구 상자를 위한 강력한 도구가 됩니다. (작은 도구를 하나의 큰 도구로 결합하는 UNIX와 유사한 철학) 이제 우리는 정말 멋진 작업을 수행할 수 있습니다.

효과적으로 Flexbox는 사용자가 설정한 Flexbox 규칙에 따라 상자의 첫 번째 하위 항목을 처리합니다.

.flexbox {
    /* Turns on flexbox */
    display: flex;
    /* How would you like stuff displayed? Rows, columns... maybe display the items in reverse order?*/
    flex-direction: row;
    /* How do you want to spacing between your items to work? */
    justify-content: flex-end;
    /* How do you want items arranged on the main axis? */
    align-items: center;
    /*And so on...*/
}

Flexbox를 실제로 사용해 보는 것은 이번이 처음이므로 위의 간략한 설명보다 더 완전한 정보를 제공할 수 있는 몇 가지 자료를 제공하고 있습니다. 여기서 다룰 수 있는 것보다 더 많은 내용이 있습니다.

추가 참고 자료

MDN: 미디어 쿼리 사용
MDN: 플렉스박스
CSS 트릭: Flexbox 가이드

Flexbox를 가지고 놀기

확인: https://flexboxfroggy.com
또한: https://mastery.games/post/flexboxzombies2/
이제 말 그대로 Flexbox를 사용해 플레이할 수 있습니다!

나에게 다음은 무엇입니까?

이제 재미있는 부분으로 넘어갑니다. 지금까지 배운 기본 도구 중 일부를 사용하여 이제 포트폴리오 만들기를 시작하겠습니다. 포트폴리오는 고용주와 다른 사람들에게 귀하가 하고 있는 일을 보여주는 방법입니다. 앞으로 진행하면서 이것이 여러 번 바뀔 것으로 예상됩니다. 하지만 시작하려면 포트폴리오가 보기 좋게 보일 수 있는지 살펴보겠습니다! CSS가 제가 그렇게 하는 데 도움이 될 것입니다. 밀어서 내가 무엇을 할 수 있는지 보는 것이 재미있을 것입니다. 몇 가지 장애물에 부딪힐 것으로 예상하고 다음에 글을 쓸 때 일부 이해를 수정해야 할 수도 있으므로 이것을 CSS와 Flexbox에 대한 최종적인 해석으로 보지는 않겠습니다.

무작위 이별 생각

Lorem Ipsum 자리 표시자가 필요하십니까? 약간의 양념을 더해 보세요!

• https://baconipsum.com/ -- 육식동물에게 딱 맞습니다
• http://officeipsum.com -- 나를 크게 화나게 하고 싶다면 이것을 사용하세요.
• https://cupcakeipsum.com -- 단 것을 좋아하는 우리를 위해.

VSCode 사용자의 경우 일부 확장:

• lotus-ipsum: Magic The Gathering 자리 표시자 텍스트
• 호라드림 입숨: 디아블로 팬 여러분!

위 내용은 CSS는 굉장해요!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!