CSS의 세 가지 필수 요소

반응형

아, CSS, 웹의 위대한 화가. CSS를 사용하면 원하는 만큼 웹을 예쁘거나 못생기게 만들 수 있습니다. CSS는 Cascading Style Sheets의 줄임말이며, 그것의 이름은 말할 것도 없이 그것이 실제로 하는 일을 나타냅니다. 이것은 브라우저가 웹의 스타일을 맞추기 위해 읽는 텍스트의 한 장입니다.

캐스케이드

이제 이 필수 사항들에 대해 알아보겠습니다. 내가 이전에 암시했듯이 첫 번째는 이름에서 찾을 수 있다. 캐스캐이딩은 첫 번째이자 가장 중요한 개념인데, 다른 두 가지는 불완전하고 그것 없이는 이치에 맞지 않기 때문이다. 캐스케이딩은 브라우저가 파일을 읽는 방식을 말합니다. 폭포 위로 물이 폭포처럼 쏟아지는 것을 생각해 보세요. 물은 높은 곳에서 낮은 곳으로 흐릅니다. 그리고 우리 인간이 한 페이지를 읽는 것처럼 브라우저는 CSS 파일을 위에서 아래로 읽습니다. T to B라는 말이 있어요. 충분히 쉬워요. 그렇다면 이것이 왜 중요한가요? 음, 소통할 때, 우리 인간들은 우리 자신을 반복하는 경향이 있습니다. 컴퓨터들은 이것을 좋아하지 않고 우리의 마지막 말을 인용할 것이다. 예는 다음과 같습니다.

이 시나리오의 디자이너는 제목이 주의를 끌며 치열해야 한다고 생각하여 빨간색으로 만들기로 결정했습니다. 그러면 섹션의 톤이 너무 많이 바뀌어서 빨간색 표제는 더 이상 적절하지 않습니다. 개발은 코드로 돌아가서 페이지 상단의 파란색 값을 가볍게 친다. 이어 제목 색이 여전히 붉은색일 때는 당혹감을 감추지 못하고 있다. 이것은 어리석은 예이지만 컴퓨터가 어떻게 추론을 할 수 없는지를 보여준다. 그것은 지켜야 할 엄격한 규칙이 있고 벗어나지 않을 것입니다. CSS에 반복되거나 충돌하는 정보가 있을 경우 브라우저는 항상 위에서 아래로 읽을 때 마지막으로 나열된 키-값 쌍을 기본값으로 유지합니다. 이는 아래와 같이 동일한 셀렉터 블록에서 충돌이 발생하더라도 유효합니다.

특이성

 

이 시점에서 좀 더 경험이 많은 CSS 사용자들은, 음, 네, 하지만… CSS의 두 번째 필수 개념인 특수성에 대해 알아보겠습니다. 알다시피, 내가 어떤 반복이나 갈등이든 항상 마지막이 될 거라고 주장했을 때, 나는 거짓말을 했어. 구체성은 갈등을 뛰어넘을 것이고, 당신이 그것을 어떻게 사용하는지 이해한다면 그것은 꽤 가치 있을 수 있다. 내 이전 예를 들어보자. 디자이너는 페이지의 다양한 제목에 대해 기본적으로 녹색과 특정 인스턴스에 대한 파란색 및 빨간색 글꼴의 세 가지 다른 색상을 사용하려고 의도했습니다. 그럼 이걸 어떻게 해내지? 좀 더 구체적으로. 보다 특정적인 것은 다양한 방법으로 이루어질 수 있지만, 가장 간단한 것은 클래스 및/또는 ID를 통해서이다. 검사:

이 예에서 (짧은 시간에 비해) blue-font 클래스가 있는 h2 헤딩은 파란색이 될 것이다. 레드-폰트 클래스가 있는 h2 헤딩은 녹색으로 파일에서 h2 셀렉터가 마지막에 표시되었음에도 불구하고 빨간색으로 표시됩니다. 이것은 조금 헷갈릴 수 있고, 바로 위의 파일의 구조(또는 순서)가 형편없는 이유입니다. 구체성은 폭포보다 우선할 것이다. Ergo, 가장 광범위하게 정의된 셀렉터를 맨 위에서 가장 구체적으로 나열하여 파일을 읽는 당신과 다음 개발자의 혼란을 줄이는 것이 가장 좋습니다.

상속

좋아, 너는 CSS의 폭주하는 특징과 그것의 질적인 특성을 파악했고, 그 모든 것을 하나로 모으는 활을 잡았다 - 유전. 상속은 간결한 CSS를 작성하는 열쇠이다. 이 개념을 이해하면 CSS 작성량을 대폭 줄이고 선택기를 재사용할 수 있습니다. 본질적으로 일부 더 구체적인 선택기는 동일한 유형의 더 일반적인 선택기의 지정 값을 상속합니다. 또는, 더 엄밀히 말하면, 몇몇 자식 요소들은 그들의 부모를 위해 정의된 특성들을 물려받을 것이다. 내가 some이라고 말한 것에 주목해봐, 이것은 매우 어렵고 빠른 규칙이 아니야. 하지만 나는 빗나갔어. 신뢰할 수 있는 예를 들어 몇 가지 값을 추가하겠습니다.

두 조각 모두 동일한 작업을 수행하지만 첫 번째 조각은 두 번째 조각보다 훨씬 장황합니다. 이러한 동일성은 유산의 결과입니다. h2 요소에 적용되면 지정된 두 클래스가 h2 요소의 글꼴 및 테두리 값을 상속하므로 각 클래스에 대해 규칙을 재정의할 필요가 없습니다. 이제 나는 네가 약간의 아하! 순간을 보내고 있기를 바란다. 만약 우리가 덜 장황한 방법을 고수한다면, 그것은 우리의 색 클래스가 우리의 두 가지 다른 제목과 우리가 각각의 색을 만들고자 하는 다른 글꼴에 사용될 수 있다는 것을 의미한다. 간단히 말해서, 그것은 다양한 요소들에 걸친 수업의 재사용성을 허용한다.

 

씌우다

당신이 CSS를 쓸 때, 당신은 항상 이 세 가지 개념을 마음속 깊이 새겨야 합니다. CSS를 구성할 때 브라우저는 항상 파일을 위에서 아래로 읽습니다. 따라서 컴퓨터를 포함한 모든 사용자를 위해 파일을 가장 일반적인 선택기가 맨 위에 있고 이후 모든 특정 선택기가 그 위에 오도록 내림차순으로 구성합니다. 이 작업을 수행한 후에는 어떤 선택기가 어떤 값을 상속하는지 더 잘 인식할 수 있습니다. 특정 작업을 수행할 수 있는 더 구체적인 선택기가 있는 경우 단순하게 유지하십시오. 만약 그 선택자가 부모로부터 원하는 특성을 물려받는다면, 그 가치들을 다시 지정할 필요가 없다. 간단히 말해서, 다음 목록에서는 전자가 후자를 압도할 것이다.

• 특이성
• 상속
• 소스 순서( 계단식)

이것이 도움이 되었기를 바랍니다! 읽어주셔서 감사하고 다음 시간까지…

gm!

 

요시야