CSS에 대해 아무도 모르는 3 가지 (거의)

CSS 팁 테스트 : CSS를 정말로 이해하고 있습니까?

키 포인트의 검토

이중 선 높이를 설정하는 가장 좋은 방법은 단위가없는 숫자 (예 : 2)를 사용하여 글꼴 크기가 다른 하위 요소가 올바른 라인 높이 비율을 상속받을 수 있도록하는 것입니다.

자체가 겹치는 일반적인 오해가 겹치지 만, HTML 요소는 실제로

속성 (특히 음의 여백을 설정)에 의해 겹칠 수 있습니다.
• pseudo elements 및 pseudo-classes는 CSS에서 매우 다른 기능입니다. 의사 클래스는 특정 조건에서 실제 HTML 요소에 적용되며 의사 요소는 실제 HTML 요소가 아닌 문서의 일부를 스타일링 할 수 있습니다.
W3C는 의사 요소 선택기에 2 개의 콜론 ()을 사용하여 CSS3 선택기 사양의 의사 요소와 의사 클래스를 구별하려고 시도합니다. 후퇴성을 위해 브라우저는 두 버전을 모두 지원해야합니다.
• z-index CSS에 능숙하다고 생각하십니까? 지난 6 개월 동안 온라인으로 제공 한 무료 CSS 테스트 결과가 어떤 참조라면, 많은 숙련 된 개발자가 CSS에 대해 많이 알지 못합니다. 지금까지 시험에 참여한 3,000 명 이상의 사람들 중 평균 점수는 55%에 불과합니다. margin 그러나 평균 자체는 그다지 흥미롭지 않습니다. 사람들이 어디에서 잘못되었는지에 대해 더 알고 싶습니다. 이 기사를 작성하기 위해 데이터를 분석하고 사람들이 특히 낮은 점수를 얻은 세 가지 문제에 중점을 두었습니다. 각 질문을 하나씩 설명하고 대부분의 사람들이 선택한 답변을 보여주고 정답을 설명하겠습니다.
이 기사를 읽은 후 직접 테스트를 받으면 불공정 한 이점이 있다고 말하는 것이 안전합니다!
문제 1 : 라인-리이트를 설정하는 가장 좋은 방법
• 첫 번째 질문은 텍스트 스타일을 정기적으로 작업하는 사람들에게는 쉬워야합니다. ::first-line 웹 사이트의 텍스트가 기본적으로 이중선이되기를 원합니다. 다음 중 값 중 가장 좋은 방법은이를 달성하는 가장 좋은 방법은 무엇입니까? :hover

선택할 수있는 4 가지 답변이 있으며, 25%의 사람들이 운이 올바르게 대답 할 것으로 예상하지만 31% 만이이 질문에 올바르게 대답 할 것입니다! 시간을내어 스스로 답을 선택하고 계속 읽으십시오.

우선,

는 산만합니다. 유일하게 허용 된 키워드 값은 대부분의 사람들이 선택한 대답은

입니다 (39%는이 답변을 선택했습니다). 실제로

는 확실히 적용하는 요소에 대해 이중 선 높이를 제공 할 것입니다. EM은 백분율보다 인기가 높거나 사람들이 실제로 이해하지 못합니다. line-height 그러나 그러나 정답은

입니다.

나는 CSS를 처음 배웠을 때 오래 전에이 교훈을 주입했습니다. 항상

를 단위로 지정하면 다른 글꼴 크기의 자식 요소를 지정하면 고정 된 선 높이 대신 숫자가 상속됩니다. line-height 페이지의 기본 글꼴 크기가 12pt라고 가정하지만 글꼴 크기가 24pt 인 제목도 포함되어 있습니다. 신체의 를 (또는 )로 설정하면 해당 제목에서도 문서 전체에서 정확히 24pt (Body Font 크기의 크기) 라인 높이를 얻게됩니다. 따라서 제목은 이중 선 높이 대신 더블 라인 높이가됩니다!

대신 line-height로 설정하면 2em로 200%를 설정하면 글꼴 크기가 변경 되더라도 브라우저에 글꼴 크기/라인 비율을 유지하도록 지시합니다. 본문의 선 높이는 24pt이지만 제목의 24pt 글꼴의 경우 라인 높이가 자동으로 48pt로 증가합니다.

질문 2 : 요소를 겹치게하는 방법

line-height 이 질문은 약간 까다 롭습니다. CSS 레이아웃이 종종 필요한 "기술"경험이 필요합니다. 2 다음 중 CSS 속성 중 HTML 요소가 겹칠 수있는 것은 무엇입니까?

• 답을 선택 했습니까? 좋아, 더 깊이 들어가자. z-index 다시, 배제하기 쉬운 옵션이 있습니다. 테스터의 2%를 제외한 모든 사람은 배경색과 이미지를 제어한다는 것을 알았 기 때문에 피했습니다.
불행히도, 대부분의 사람들은
• 직접 선택합니다. 최대 46% 가이 답을 선택했습니다. 아무도 margin의 작동 방식을 실제로 이해하지 못하기 때문입니다. 실제로 속성을 ​​단독으로 설정하면
가 작동하도록 요소의 속성을 설정해야합니다. 요컨대
• 를 사용하면 겹치는 요소의 스태킹 순서를 제어 할 수 있지만 먼저 겹쳐야합니다. MDN에는“CSS Z-Index 이해”라는 제목의 아주 좋은 기사가 있으며 자세한 내용은 읽을 가치가 있습니다. overflow 당신이
를 사용한 적이 있다면, 배제하기 쉽습니다. 상자 크기에 적합하지 않은 컨텐츠의 동작을 제어합니다. 잘린지, 상자 가장자리에서 흘러 나오든 등. 다시, 이것은 상자 크기가 다른 특성에 의해 제한되는지 여부에 따라 다릅니다. 그럼에도 불구하고 22%는 그렇게 생각합니다.
• 이것은 우리에게 background만으로도 정답입니다. 사람들의 30%만이 올바르게 대답했습니다. 요소 사이에 거리를 생성하는 속성이 어떻게 겹칠 수 있는지 궁금 할 것입니다. 실제 CSS 레이아웃을 수행 한 경우 답은 분명해야합니다. 음수 마진으로 인해 요소가 겹치게됩니다.
이를 보여 주려면 두 개의 div 요소가있는 페이지를 만듭니다. 두 번째 div의 를 와 같은 음수 값으로 설정하십시오. 쾅! 두 번째 div는 이제 첫 번째 div의 바닥 100 픽셀을 덮습니다.

실제로, 당신은 의도적으로 이와 같은 블록을 겹치지 않지만, 부정적인 마진은 HTML 요소를 일반적으로 가지 않는 곳에 압박하는 데 매우 유용합니다. 나는 종종 그것들을 사용하여 부모 상자의 채우기 영역에 왼쪽 또는 오른쪽으로 떠 다니는 요소를 푸시하는 데 사용합니다. margin-top -100px

웹 디자인 이력 애호가의 경우, 2005 년 음수 마진 중첩 요소를 사용하면 소위 하나의 실제 레이아웃 (및 이후 성배 레이아웃)을 포함하여 3 개의 열 페이지 레이아웃이 만들어졌습니다.
문제 3 : 의사 요소와 의사 클래스

나는 마지막 질문은 약간 비열하다. 그러나 테스터의 23% 만이이 질문에 올바르게 대답 할 수 있었으며 (이것은 운이 더 나쁩니다!) 혼란스러운 지점을 만졌습니다 : .

다음 중 유사 요소를 사용하여 구현하는 데 가장 적합한 효과는 무엇입니까?
하이퍼 링크 위로 호버링 할 때 사용자에게 그림자를 추가하십시오.

확인란이 선택되면 확인란의 레이블이 다른 색상으로 표시됩니다. 다른 배경색을 테이블의 홀수 및 짝수 행에 할당합니다. 유연한 페이지 레이아웃에서 단락의 첫 번째 줄을 굵은 텍스트로 표시하십시오.

이 세 가지 선택은 의사 클래스를 사용하여 구현 된 모든 효과입니다. 당신은 그들을 구별 할 수 있습니까?

의사 클래스는 실제 HTML 요소가 들어올 수 있다고 특정한 상태입니다. 브라우저가 특정 조건에서 요소에 자동으로 적용되는 가상 클래스로 생각하십시오.

의사 요소는 문서의 일부이며 실제 HTML 요소가 아니더라도 CSS를 통해 스타일을 지정할 수 있습니다. 그것은 가상 HTML 요소와 같습니다. 주변에 실제 HTML 태그가 없더라도 스타일링 할 수 있습니다.

이 차이 로이 옵션을 살펴 보겠습니다. 하이퍼 링크 위로 호버링 할 때 사용자에게 그림자를 추가하십시오.

하이퍼 링크는 실제 HTML 요소입니다. 특정 경우에만 스타일을 적용하면 (마우스가 맴돌고있을 때) 의사 클래스를 사용하고 있음을 의미합니다. 이 경우, 당신이 사용할 의사 클래스는
• 입니다.
테스터의 22%는 이것을 의사 요소로 간주했습니다.
• 확인란이 선택되면 확인란의 레이블이 다른 색상으로 표시됩니다.
마찬가지로, 태그는 가상 요소가 아닌 실제 HTML 요소입니다. 확인란이 선택되면 브라우저는
• pseudo 클래스를 적용합니다. 그런 다음 선택기에서이를 사용하여 확인란을 스타일링하거나 옆에있는 레이블을 스타일링 할 수 있습니다 (예 : 인접한 형제 자매 선택기 ).
• 테스터의 20%가 이것을 의사 요소로 간주했습니다.
다른 배경색을 테이블의 홀수 및 짝수 행에 할당합니다.

이것은 실제로 사람들을 속이는 질문이지만, 다시 말하지만, 우리는 실제 HTML 요소에 스타일을 적용하는 것에 대해 이야기하고 있습니다 (이 경우

요소). 는 부모 요소의 자식 요소 세트에서 이상하거나 심지어 의사 클래스와 일치 할 수있는 또 다른 경우입니다.

이 경우 의사 클래스는 홀수 요소의 경우 (또는 tr)이고 홀수 요소의 경우 (또는 tr)입니다.

나는 이것이 단순히

와 의사 요소가 일반적으로 매우 모호한 CSS 기능처럼 들리기 때문에 단순히 생각하지만, 테스터의 36%가 이것을 의사 요소로 선택했습니다. :nth-child(even) 유연한 페이지 레이아웃에서 단락의 첫 번째 줄을 굵은 텍스트로 표시하십시오. :nth-child(2n) 물론 이것은 정답입니다. 지금까지 차이가 ​​분명해졌습니다. 유연한 페이지 레이아웃에서는 페이지의 HTML 코드를 볼 수 없으며 "요소에는 단락 텍스트의 첫 번째 줄만 포함"입니다. 브라우저는 단락의 너비에 따라 선을 감싸며 유연한 페이지 레이아웃에서 제어 할 수 없습니다. :nth-child(odd) :nth-child(2n 1) 는 첫 번째 줄이 두 번째 줄로 고장날 위치에 관계없이 블록의 첫 번째 텍스트 줄에 스타일을 적용 할 수있는 의사 요소입니다.

"좋아요, 합리적으로 들리지만 의사 요소와 의사 클래스의 차이점을 알지 못한다"고 생각한다면 W3C는 당신과 동의합니다. CSS3 선택기 사양에서,이 둘을 구별하기 위해, 의사 요소 선택기가 두 개의 콜론 ()을 사용하도록 구문을 변경하고, 의사 클래스는 여전히 하나의 결장 ()을 사용하도록했습니다. 물론 뒤로 호환성을 위해 브라우저는 두 버전을 모두 지원해야합니다.

그렇습니다. 내가 말했듯이 : 평균 질문. 하지만 당신이 나와 같은 CSS 괴짜라면, 의사 요소와 의사 급의 차이점을 알게 될 것입니다. :nth-child 점수는 어떻습니까?

테스트에서 3 개의 퍼즐입니다. 이 질문들 중 하나에 자신있게 대답한다면, 당신은 좋은 일을하고 있습니다. 두 가지에 올바르게 대답 했습니까? 나쁘지 않습니다. 세 가지를 모두 올바르게 대답했다면, 나는 당신의 생각을 듣고 싶습니다! 특히이 답변을 한 후에는 더 까다로운 CSS 질문이 필요합니다. 의견에 게시하십시오!

이 질문이 마음에 들면 나머지 테스트를 시도하고 싶을 수도 있습니다. 안심하십시오. 다른 질문은 이것보다 훨씬 쉽습니다…

위 내용은 CSS에 대해 아무도 모르는 3 가지 (거의)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!