CSS를 배우는 방법

많은 사람들이 저에게 CSS의 다양한 부분에 대한 자습서를 추천하거나 CSS를 배우는 방법을 묻습니다. 또한 부분적으로는 언어에 대한 구식 아이디어 때문에 CSS의 일부에 대해 혼란스러워하는 많은 사람들을 봅니다. CSS가 지난 몇 년 동안 상당히 많이 바뀌었다는 점을 감안할 때 지금이 지식을 새로 고칠 수 있는 좋은 기회입니다. CSS가 당신이 하는 일의 작은 부분일지라도(스택의 다른 곳에서 일하기 때문에), CSS는 당신이 화면에 원하는 대로 보이게 하는 방법이므로 합리적으로 최신 정보를 얻을 가치가 있습니다.

따라서 이 기사는 CSS의 핵심 기본 사항과 현대 CSS 개발의 핵심 영역에 대한 추가 읽기 자료를 설명하는 것을 목표로 합니다. 그 중 많은 것들이 바로 여기 Smashing Magazine에 있지만, CSS의 주요 영역에서 따라야 할 다른 리소스와 사람들도 선택했습니다. 완전한 초보자 가이드가 아니거나 모든 것을 절대적으로 다루기 위한 것이 아닙니다. 제 목표는 몇 가지 핵심 영역에 초점을 맞춰 현대 CSS의 폭을 다루는 것입니다. 그러면 나머지 언어의 잠금을 해제하는 데 도움이 됩니다.

언어 기초

CSS의 대부분은 속성과 값을 암기하는 것에 대해 걱정할 필요가 없습니다. 필요할 때 찾아볼 수 있습니다. 그러나 언어의 몇 가지 핵심 토대가 있기 때문에 이해하기 어려울 것입니다. 장기적으로 많은 시간과 좌절을 절약할 수 있으므로 이러한 사항을 확실히 이해하는 데 시간을 할애할 가치가 있습니다.

선택자, 단순한 클래스 그 이상

선택기는 주석에 표시된 대로 수행하고 CSS 규칙을 적용할 수 있도록 문서의 일부를 선택 합니다. 대부분의 사람들은 클래스를 사용하거나 body 과 같은 HTML 요소의 스타일을 직접 지정하는 데 익숙하지만 문서 내 위치에 따라 요소를 선택할 수 있는 고급 선택기가 많이 있습니다. 또는 테이블의 홀수 행입니다.

레벨 3 사양의 일부인 선택기(레벨 3 선택기라고 하는 것을 들었을 수 있음)는 뛰어난 브라우저 지원을 제공합니다. 사용할 수 있는 다양한 선택기에 대한 자세한 내용은 MDN 참조를 참조하세요.

일부 선택기는 문서의 항목에 클래스를 적용한 것처럼 작동합니다. 예를 들어 p:first-child 는 마치 첫 번째 p 요소에 클래스를 추가한 것처럼 동작하며 이를 의사 클래스 선택기라고 합니다. 유사 요소 선택기는 요소가 동적으로 삽입된 것처럼 작동합니다. 예를 들어 ::first-line 은 텍스트의 첫 번째 줄 주위에 span 를 래핑하는 것과 유사한 방식으로 작동합니다. 그러나 해당 줄의 길이가 변경되면 다시 적용되며 요소를 삽입한 경우에는 그렇지 않습니다. 이러한 선택기를 사용하면 상당히 복잡해질 수 있습니다. 아래 CodePen은 의사 클래스와 연결된 의사 요소의 예입니다. :first-child 의사 클래스로 첫 번째 p 요소를 대상으로 지정하면 ::first-line 선택기가 해당 요소의 첫 번째 줄을 선택하여 마치 첫 번째 줄 주위에 범위가 추가된 것처럼 작동하여 굵게 만들고 색상을 변경합니다.

상속과 캐스케이드

계단식 배열은 여러 규칙이 하나의 요소에 적용될 수 있는 경우 어떤 규칙이 우선하는지 정의합니다. 일부 CSS가 적용되지 않는 것처럼 보이는 이유를 이해할 수 없는 상황에 처한 적이 있다면 계단식으로 걸려 넘어질 가능성이 있습니다. 캐스케이드는 상속과 밀접하게 연결되어 있으며, 상속은 해당 속성이 적용되는 요소의 자식 요소에 의해 상속되는 속성을 정의합니다. 또한 특이성과 관련이 있습니다. 다른 선택자는 하나의 요소에 적용할 수 있는 여러 선택자가 있을 때 승리하는 것을 제어하는 ​​다른 특이성을 갖습니다.

참고 : 이 모든 것을 이해하려면 MDN Introduction to CSS에서 The Cascade and Inheritance를 읽는 것이 좋습니다.

일부 CSS를 요소에 적용하는 데 어려움을 겪고 있다면 브라우저 DevTools가 시작하기에 가장 좋습니다. 요소 선택기 h1 이 대상으로 하는 h1 요소가 있고 제목을 주황색으로 만드는 아래 예를 살펴보세요. 나는 또한 h1 을 rebeccapurple로 설정하는 클래스를 사용하고 있습니다. 클래스가 더 구체적이므로 h1 은 보라색입니다. DevTools에서는 요소 선택기가 적용되지 않아 그어진 것을 볼 수 있습니다. 브라우저가 CSS를 가져오고 있음을 알 수 있으면(그러나 다른 것이 이를 무효화함) 그 이유를 알아낼 수 있습니다.

박스 모델

CSS는 모두 상자에 관한 것입니다. 화면에 표시되는 모든 것에는 상자가 있으며 상자 모델은 여백, 패딩 및 테두리를 고려하여 해당 상자의 크기가 어떻게 계산되는지 설명합니다. 표준 CSS 상자 모델은 요소에 지정한 너비를 가져온 다음 해당 너비에 패딩과 테두리를 추가합니다. 즉, 요소가 차지하는 공간이 사용자가 지정한 너비보다 큽니다.

더 최근에는 요소의 주어진 너비를 화면에 보이는 요소의 너비로 사용하는 대체 상자 모델을 사용하도록 선택할 수 있었습니다. 패딩이나 테두리는 가장자리에서 상자의 내용을 삽입합니다. 이것은 많은 레이아웃에서 훨씬 더 의미가 있습니다.

아래 데모에는 두 개의 상자가 있습니다. 둘 다 너비가 200픽셀이고 테두리가 5픽셀이고 패딩이 20픽셀입니다. 첫 번째 상자는 표준 상자 모델을 사용하므로 총 너비가 250픽셀입니다. 두 번째는 대체 상자 모델을 사용하므로 실제로 너비는 200픽셀입니다.

브라우저 DevTools는 사용 중인 상자 모델을 이해하는 데 다시 한 번 도움을 줄 수 있습니다. 아래 이미지에서 Firefox DevTools를 사용하여 기본 content-box 상자 모델을 사용하여 상자를 검사합니다. 도구는 이것이 사용 중인 상자 모델임을 알려주고 크기와 테두리 및 패딩이 내가 할당한 너비에 추가되는 방법을 볼 수 있습니다.

참고 : IE6 이전에 Internet Explorer는 패딩 및 테두리가 지정된 너비에서 멀어지는 내용을 삽입하는 대체 상자 모델을 사용했습니다. 그래서 한동안 브라우저는 다른 상자 모델을 사용했습니다! 오늘날 상호 운용성 문제로 좌절할 때 상황이 개선되어 브라우저가 사물의 너비를 다르게 계산하지 않도록 하게 되어 기쁩니다.

CSS Tricks의 Box Model 및 Box Sizing에 대한 좋은 설명과 함께 사이트에서 대체 상자 모델을 전역적으로 사용하는 가장 좋은 방법에 대한 설명이 있습니다.

정상적인 흐름

콘텐츠를 표시하는 HTML이 포함된 문서가 있고 브라우저에서 문서를 보면 읽을 수 있을 것입니다. 제목과 단락은 새 줄에서 시작되며 단어는 그 사이에 공백이 하나 있는 문장으로 표시됩니다. em과 같은 서식 지정을 위한 태그는 문장 흐름을 끊지 않습니다. 이 콘텐츠는 일반 흐름 또는 블록 흐름 레이아웃으로 표시됩니다. 콘텐츠의 각 부분은 "inflow"로 설명됩니다. 나머지 내용에 대해 알고 있으므로 겹치지 않습니다.

이 행동에 반대하기보다 함께 일하면 인생이 훨씬 쉬워집니다. 올바르게 마크업된 HTML 문서로 시작하는 것이 많은 의미를 가지는 이유 중 하나입니다. 정상적인 흐름과 브라우저가 이를 존중하는 내장 스타일시트로 인해 콘텐츠가 읽을 수 있는 곳에서 시작되기 때문입니다.

서식 컨텍스트

정상적인 흐름의 콘텐츠가 포함된 문서가 있으면 해당 콘텐츠의 일부가 표시되는 방식을 변경할 수 있습니다. 요소의 서식 컨텍스트를 변경하여 이 작업을 수행합니다. 아주 간단한 예로서, 모든 단락을 함께 실행하고 새 줄에서 시작하지 않으려면 p 요소를 변경하여 display: inline 블록에서 인라인 서식 컨텍스트로 변경할 수 있습니다.

서식 컨텍스트는 기본적으로 외부 및 내부 유형을 정의합니다. 외부는 페이지의 다른 요소와 함께 요소가 작동하는 방식을 제어하고 내부는 자식이 표시되는 방식을 제어합니다. 예를 들어, display: flex 라고 하면 외부를 블록 서식 컨텍스트로 설정하고 자식이 플렉스 서식 컨텍스트를 갖도록 설정하는 것입니다.

참고 : 최신 버전의 디스플레이 사양은 display 값을 변경하여 내부 및 외부 값을 명시적으로 선언합니다. 따라서 미래에는 display: block flex; ( block 이 외부이고 flex 가 내부입니다).

MDN에서 display 오버에 대해 자세히 알아보세요.

흐름에 있거나 빠져 있음

CSS의 요소는 '흐름에 있음' 또는 '흐름에서 벗어남'으로 설명됩니다. 흐름의 요소에는 공간이 주어지고 그 공간은 흐름의 다른 요소에 의해 존중됩니다. 플로팅 또는 위치 지정을 통해 요소를 흐름에서 빼면 해당 요소의 공간은 흐름 항목의 다른 항목에서 더 이상 존중되지 않습니다.

이것은 절대 위치 항목에서 가장 두드러집니다. item position: absolute 를 제공하면 흐름에서 제거됩니다. 그러면 out of flow 요소가 겹치고 레이아웃의 다른 부분을 읽을 수 없게 만드는 상황이 없도록 해야 합니다.

그러나 플로트된 항목도 흐름에서 제거되고 다음 콘텐츠가 플로트된 요소의 단축된 라인 상자를 둘러싸는 동안 다음 요소의 상자에 배경색을 배치하여 상승하고 무시하고 있음을 알 수 있습니다. 부동 항목이 사용하는 공간입니다.

MDN에서 유입 및 유출 요소에 대해 자세히 읽을 수 있습니다. 기억해야 할 중요한 점은 요소를 흐름에서 제외하면 블록 흐름 레이아웃의 일반 규칙이 더 이상 적용되지 않으므로 중첩을 스스로 관리해야 한다는 것입니다.

형세

15년 이상 동안 우리는 작업 레이아웃 시스템용으로 설계되지 않은 CSS로 레이아웃을 수행해 왔습니다. 이 변경되었습니다. 우리는 이제 Grid 및 Flexbox를 포함하는 완벽하게 유능한 레이아웃 시스템뿐만 아니라 실제 목적에 사용되는 다중 열 레이아웃 및 이전 레이아웃 방법도 가지고 있습니다. CSS 레이아웃이 미스테리한 경우 MDN Learn Layout 튜토리얼로 이동하거나 여기 Smashing Magazine에서 내 기사 Getting Started With CSS Layout을 읽으십시오.

grid 및 flexbox와 같은 방법이 어떻게든 경쟁하고 있다고 상상하지 마십시오 . 레이아웃을 잘 사용하기 위해 때로는 구성 요소가 플렉스 구성 요소로, 때로는 그리드로 가장 적합하다는 것을 알 수 있습니다. 경우에 따라 다중 열의 열 흐름 동작을 원할 것입니다. 모두 유효한 선택입니다. 무언가가 행동하는 방식에 대해 싸우고 있다고 느낀다면 일반적으로 한 발 물러서서 다른 접근 방식을 시도해 볼 가치가 있다는 매우 좋은 신호입니다. 우리는 CSS를 해킹하여 우리가 원하는 것을 수행하는 데 너무 익숙해서 시도할 수 있는 다른 여러 옵션이 있다는 사실을 잊어버리기 쉽습니다.

레이아웃은 제 주요 전문 분야이며 Smashing Magazine 및 다른 곳에서 새로운 레이아웃 환경을 길들이기 위해 여러 기사를 작성했습니다. 위에서 언급한 레이아웃 기사 외에도 Flexbox에 대한 전체 시리즈가 있습니다. Flexbox Flex 컨테이너를 만들면 어떻게 됩니까? Grid By Example에는 CSS Grid에 대한 여러 가지 작은 예제와 비디오 스크린캐스트 튜토리얼이 있습니다.

또한 특히 디자이너의 경우 Jen Simmons와 그녀의 Layout Land 비디오 시리즈를 확인하십시오.

조정

우리 대부분이 Flexbox의 일부로 Alignment에 도입되었지만 이러한 속성은 모든 레이아웃 방법에 적용되며 "Flexbox Alignment" 또는 "CSS 그리드 정렬." 가능한 한 일반적인 방식으로 작동하는 Alignment 속성 집합이 있습니다. 그런 다음 다른 레이아웃 방법이 작동하는 방식으로 인해 약간의 차이가 있습니다.

MDN에서 Box Alignment와 Grid, Flexbox, Multicol 및 Block Layout에 대해 어떻게 구현되는지 자세히 알아볼 수 있습니다. 여기 Smashing Magazine에 Flexbox의 정렬을 구체적으로 다루는 기사가 있습니다: Flexbox의 정렬에 대해 알아야 할 모든 것.

사이징

저는 2018년의 대부분을 Intrinsic 및 Extrinsic Sizing 사양, 특히 Grid 및 Flexbox와 어떻게 관련되는지에 대해 이야기했습니다. 웹에서는 길이나 백분율로 크기를 설정하는 데 익숙합니다. 이것이 float를 사용하여 그리드 유형 레이아웃을 만들 수 있었던 방법이기 때문입니다. 그러나 현대적인 레이아웃 방법은 우리가 허용한다면 많은 공간 분배를 수행할 수 있습니다. Flexbox가 공간을 할당하는 방식(또는 Grid fr 단위의 작동 방식)을 이해하는 것은 시간을 할애할 가치가 있습니다.

여기 Smashing Magazine에서 일반적인 레이아웃의 크기 조정과 Flexbox의 경우 How Big Is The Flexible Box?에 대해 썼습니다.

반응형 디자인

Grid 및 Flexbox의 새로운 레이아웃 방법은 종종 이전 방법에서 필요로 했던 것보다 적은 수의 미디어 쿼리로 벗어날 수 있음을 의미합니다. 요소의 너비. 그러나 디자인을 더욱 향상시키기 위해 일부 중단점을 추가하려는 위치가 있을 것입니다.

다음은 반응형 디자인에 대한 몇 가지 간단한 가이드이며 일반적으로 미디어 쿼리의 경우 2018년 반응형 디자인을 위한 미디어 쿼리 사용하기 기사를 확인하세요. 미디어 쿼리가 어떤 용도로 유용한지 살펴보고 앞으로 나올 새로운 기능도 보여줍니다. 사양의 레벨 4에 있는 미디어 쿼리.

글꼴 및 타이포그래피

레이아웃과 함께 웹에서 글꼴 사용은 작년에 큰 변화를 겪었습니다. 단일 글꼴 파일을 무제한으로 변형할 수 있는 가변 글꼴이 여기에 있습니다. 그것들이 무엇이고 어떻게 작동하는지에 대한 개요를 얻으려면 Mandy Michael의 훌륭한 짧은 강연: 가변 글꼴과 웹 디자인의 미래를 보십시오. 또한 Jason Pamental의 Dynamic Typography With Modern CSS 및 Variable Fonts를 추천합니다.

가변 글꼴과 그 기능을 살펴보기 위해 Microsoft의 재미있는 데모와 가변 글꼴을 사용해 볼 수 있는 여러 플레이그라운드가 있습니다. 가장 잘 알려진 Axis Praxis(저는 Font Playground도 좋아합니다).

가변 글꼴 작업을 시작하면 MDN의 이 가이드가 매우 유용할 것입니다. 가변 글꼴을 지원하지 않는 브라우저에 대한 대체 솔루션을 구현하는 방법을 배우려면 Oliver Schondorfer의 대체 웹 글꼴로 가변 글꼴 구현을 읽으십시오. Firefox DevTools 글꼴 편집기는 가변 글꼴 작업도 지원합니다.

변환 및 애니메이션

CSS Transforms와 Animation은 제가 꼭 알아야 하는 기준으로 제가 찾는 것입니다. 나는 그것들을 자주 사용할 필요가 없으며 구문은 사용 사이에 내 머리에서 바로 튀어 나오는 것 같습니다. 고맙게도 MDN에 대한 참조가 도움이 되며 CSS 변환 사용 및 CSS 애니메이션 사용에 대한 가이드부터 시작하는 것이 좋습니다. Zell Liew에는 CSS 전환에 대한 훌륭한 설명을 제공하는 멋진 기사도 있습니다.

가능한 것들 중 일부를 발견하려면 Animista 사이트를 살펴보십시오.

애니메이션에 대해 혼란스러울 수 있는 것 중 하나는 어떤 접근 방식을 취해야 하는지입니다. CSS에서 지원하는 것 외에도 JavaScript, SVG 또는 Web Animation API를 포함해야 할 수 있으며 이러한 것들은 모두 하나로 묶이는 경향이 있습니다. Val Head는 An Event Apart에서 녹음한 Choose Your Animation Adventure의 대화에서 옵션에 대해 설명합니다.

학습 도구가 아닌 알림으로 치트 시트를 사용하십시오

Grid 또는 Flexbox 리소스를 언급할 때 특정 치트시트 없이는 Flexbox를 수행할 수 없다는 응답을 종종 봅니다. 나는 구문을 조회하기 위한 메모리 도우미로 치트시트를 사용하는 데 문제가 없으며 내 자신의 일부를 게시했습니다. 그것들에 전적으로 의존하는 것의 문제는 구문을 복사할 때 작동하는 이유를 놓칠 수 있다는 것입니다. 그런 다음 해당 속성이 다르게 동작하는 것처럼 보이는 경우에 해당하는 명백한 불일치가 당혹스럽거나 언어의 결함으로 보입니다.

CSS가 매우 이상한 일을 하는 것처럼 보이는 상황에 처했다면 이유 를 물어보십시오. 문제를 강조하는 축소된 테스트 사례를 만들고 사양에 더 익숙한 사람에게 문의하세요. 내가 묻는 CSS 문제의 대부분은 그 사람이 속성이 실제로 작동하는 방식과 다른 방식으로 작동한다고 믿기 때문입니다. 이것이 바로 정렬 및 크기 조정과 같은 문제에 대해 많은 이야기를 하는 이유입니다. 이러한 혼란이 자주 발생하는 곳이기 때문입니다.

예, CSS에는 이상한 것이 있습니다. 그것은 수년에 걸쳐 진화한 언어이며 우리가 타임머신을 발명할 때까지 변경할 수 없는 것이 있습니다. 그러나 몇 가지 기본 사항을 숙지하고 상황이 왜 그렇게 작동하는지 이해하면 까다로운 장소에서 훨씬 더 쉽게 시간을 보낼 수 있습니다.