24 시간 동안 CSS 지식을 대폭 향상시키는 5 단계

/2015-11-29 09:39:19/
Daelynn
/사업/

당신은 한동안 코딩을 해왔고 CSS 파일에 대한 당신의 길을 알고 있습니다. 당신은 확실히 주인이 아니지만, 충분한 조정으로 당신이 가고 싶은 곳을 얻을 수 있습니다. CSS가 그렇게 어려운 곳을 지나칠 지 궁금합니다. 어떤 것이 효과가 있고 어떤 것이 효과가 없는지보기 위해 시행 착오에 의지하지 않고 복잡한 레이아웃을 만들어 낼 수 있습니까?

좋은 소식은 실제로 웹 사이트를 코딩하기에 충분한 CSS를 알고있는 실망스러운 지점을 지나칠 수는 있지만, 자신이 어디로 갈 것인지 정확하게 이해하지 못하는 번거 로움없이 코드를 작성할 수있는 견고한 기초가 부족하다는 것입니다. 다시이 지점은 생각보다 훨씬 가깝습니다. CSS에 대한 이해를 크게 높일 수있는 5 가지 주제가 있습니다. 다음 24 시간 동안 각각에 대해 약간의 시간을 보내면 코딩 방식이 영원히 바뀔 것입니다.

Envato Elements 살펴보기

1. 포지셔닝 컨텍스트 주위에 마음을 감싸십시오

CSS를 사용하여 HTML 요소를 원하는 위치로 옮기는 방법에 대한 확실한 이해를 원한다면 컨텍스트 위치 지정을 반드시 이해해야합니다. 그리고 나는 평범한 이해를 의미하는 것이 아니라 차이점, 행동, 기발한 것 등에 대한 깊은 지식을 의미합니다.

실제로 이해해야 할 5 개의 위치 값이 있습니다. 다섯 가지를 모두 보지 않고 이름을 지을 수 없다면, 당신은 분명히이 교육의 주요 후보입니다. 여기에는 정적, 고정, 상대, 절대 및 상속이 있습니다.

다섯 가지를 모두 이해하고 이해해야하지만 코딩 방식을 바꾸는 큰 두 가지는 절대적이고 상대적인 위치입니다. 이 두 가지 위치 지정 컨텍스트를 개별적으로 사용하고 함께 작동하는 방식으로 뛰어 들으면 CSS 레이아웃을 보는 방식이 근본적으로 변경됩니다. 그것은 당신의 일을 무한히 쉽게 만들어주는 계시입니다.

당신을 거기에 데려다 줄 자원

절대 대 상대 위치 결정
이것은 포지셔닝 컨텍스트의 주제에 대한 나의 깊은 잠수입니다. 나는 간단히 다섯 가지를 모두 언급하고 설명하지만 큰 차이점에 초점을 맞 춥니 다. 차이점, 차이점, 협력 방식. 이 기사를 읽으면 무료 CSS 포지셔닝에 어려움을 겪을 수 있습니다.

CSS 포지셔닝 101
이 작품은 훌륭한 A List Apart 블로그에서 나온 것이므로 철저하고 믿을 수 없을만큼 교육적이라는 것을 알고 있습니다. 이 기사는 2010 년에 다시 출판되었지만 정보는 여전히 완벽하게 관련되어 있으며 다섯 가지 포지셔닝 컨텍스트에 대한 훌륭한 소개 역할을합니다. 매우 시각적 인 기사는 아니지만 각 개념을 쉽게 이해할 수있는 간단한 코드 예제가 많이 있습니다.

10 단계로 CSS 포지셔닝 배우기
이것은 다양한 포지셔닝 컨텍스트에 대한 환상적인 개요입니다. 이 페이지에는 긴 기사 하나 대신 10 개의 탭이있는 작은 상자가 있습니다. 각 탭에는 작은 코드 스 니펫과 코드를 설명하는 한두 문장이 있습니다. 오른쪽에는 각 탭으로 업데이트되는 라이브 예제 레이아웃이 있습니다. 이 형식은 코드 스 니펫을 생성하는 레이아웃에 시각적으로 연결하는 데 환상적이며 위의 ALA와 같은 텍스트 설명으로 어려움을 겪는 경우 모양을 제공하는 것이 좋습니다.

2. 마스터 플로트

CSS를 처음 배울 때, float는 상상할 수있는 가장 조잡한 레이아웃 시스템 중 하나처럼 보입니다. 일단 기본 수준에서 사용하는 법을 배우면 부유 자녀 만 포함 된 부모가 어떻게 키가 무너 지는지에 대해 모든 것을 배워야합니다. 그러면 명확한 수정 및 오버플로 조작을 통해 문제를 해결하는 47 가지 방법이 있습니다.

운 좋게도 장기적으로는 수레의 개념에 익숙해 져있어 사용하기 쉬워 져 전혀 생각하지 않아도됩니다. 당신과 그 목표 사이에 서있는 유일한 것은 실제로 플로트 동작과 기술을 파헤 치고 철저히 설명하는 견고한 기사입니다.

당신을 거기에 데려다 줄 자원

CSS 플로트에 대해 결코 알지 못하는 모든 것
이 기사에서는 CSS 플로트에 관한 거의 모든 주제를 다룹니다. 플로트의 정의와 작동 방식에 대한 기본 토론으로 시작합니다. 그런 다음 플로트가 관련 요소의 상자에 미치는 영향, 다양한 높이의 요소로 플로트가 이상하게 보이는 방법, 플로트 동작을 다루는 9 가지 규칙 및 물론 붕괴 높이 파괴 및 수정 방법에 대해 이야기합니다.

수레에 관한 모든 것
Chris Coyier는 CSS 관련 주제와 관련하여 항상 내가 가장 좋아하는 작가였습니다. 수레에 대한 그의 소개는 실망스럽지 않습니다. 수레 작업 방법에 대한 간단하면서도 간단한 토론을 찾고 있다면이 부분을 살펴보십시오. 나는 기사 전체에 사용 된 단순하고 매력적인 삽화를 특히 좋아한다.

CSS Float 속성의 미스터리
Chris Coyier의 작품은 일반적으로 간단하고 요점이지만 Smashing Magazine의 내용은 일반적으로 수많은 예제와 관련 토론으로 상당히 광범위합니다. 이 기사에서는 플로트 개념을 소개하고, 플로트를 사용하고 지우는 방법에 대해 설명하고 실제 사이트에서 플로트가 일반적으로 사용되는 위치에 대한 토론을 시작합니다. 당신의 이론이 살아있는 것을 볼 필요가 있다면, 이것은 당신을위한 것입니다.

3. 선택자 알기

깔끔한 CSS를 작성하는 열쇠 중 하나는 사용 가능한 CSS 선택기, 작동 방식 및 다양한 브라우저에서 지원되는 정도를 잘 이해하는 것입니다. 충분히 간단한 주제처럼 들리지만 실제로 CSS 선택기의 세계는 매우 복잡합니다.

속성 값 선택기 사용 및 클래스 이름의 키워드 타겟팅에서 범용 선택기가 코드 디버깅에 도움이 될 수있는 방법에 이르기까지 여기에서 배울 점이 다양합니다. 멋진 선택기를 많이 이해하지 않고도 개인적으로 얻을 수 있다고 생각하더라도 진실은 다른 코더가 매일이 물건을 사용하고 뷰 소스를 칠 때보 고있는 것을 이해할 수 있어야한다는 것입니다!

당신을 거기에 데려다 줄 자원

CSS 선택기 : 까다로운 비트
이것은 CSS 선택기의보다 복잡한 측면을 주로 살펴 보는 재미있는 기사입니다. 지면 수준의 내용을 건너 뛰고 DOM 개념이 CSS를 사용하여 문서의 다양한 측면을 대상으로 변환하는 방법에 대해 바로 설명합니다. 자녀와 형제 자매 선택, 선택기 연결 방법 등에 대해 배우게됩니다.

기억해야 할 30 가지 CSS 선택기
Jeffrey Way는 웹 개발자 락스타이며 이와 같은 기사가 그 이유를 입증합니다. 이 Nettuts + 기사는 브라우저 지원에 중점을 둔 간단하고 간단한 형식의 방대한 CSS 선택기들을 다룹니다. 놀랍게도 Jeff는 30 개의 선택기 각각에 대한 라이브 예제 페이지를 코딩하기까지했습니다.

CSS 속성 선택기 : 사용 방법 및 이유
속성 값 선택기는 CSS 선택기의 가장 강력한 하위 집합 중 하나이며 CSS3는 실제로 그 기능을 향상시킵니다. 약간의 속성 값 마법으로 선택기가 얼마나 다재다능해질 수 있는지 믿을 수 없습니다. 이 기사를 읽은 후에는 "임의 하위 문자열 속성 값 선택기"와 같은 문구를 전문가처럼 다루게됩니다.

4. DRY 코딩 개념 배우기

“자신을 반복하지 마십시오.” 이 간단한 문구는 코딩과 관련하여 큰 영향을 미칩니다. DRY 코딩 실습에 실제로 뛰어 들면 결과는 더 깔끔한 코드, 적은 작업량 및 멋진 새 워크 플로가 가능합니다.

상당히 좁은 위의 다른 주제와 달리, 이것은 다른 방식, 기법 및 아이디어의 모든 방식을 다루는 꽤 광범위한 주제입니다. 흥미롭게도, 최근 DRY 코딩 관행에 초점을 둔 것들 중 하나는 CSS 프리 프로세서를 사용하는 것입니다.

많은 사람들이 전처리 기가 코딩 방식이 좋지 않다고 주장하지만 실제로는 그 반대입니다. 분명히 전 처리기 자체는 수동 반복을 피하는 데 도움이되지만 그 이상은 아닙니다. LESS 및 SASS와 같은 도구의 출력과 일반적인 언어 목표를 살펴보면 실제로 더 나은 CSS를 작성하게되었습니다! Sass에서 @extend와 같은 개념을 익힌 후에는 CSS 만 사용하여 코딩 할 때의 의미에 대해 생각할 수 없습니다.

당신을 거기에 데려다 줄 자원

CSS를 건조하십시오 : CSS를 반복하지 마십시오
이 기사에서 Steven Bradley는 DRY CSS 주제를 소개하고 주요 원칙과 목표 중 일부를 다룹니다. 그는 연습을 세 가지 간단한 아이디어로 요약하고 이러한 아이디어를 실제 워크 플로에서 구현하는 방법을 보여줍니다. 이 개념은 같은 주제를 다루는 Jeremy Clarke 프레젠테이션에서 크게 차용되었습니다.

객체 지향 CSS (OOCSS) 소개
앞에서 언급했듯이 DRY CSS 동작에 내재 된 아이디어는 다른 구성의 개념과 거의 관련이 있으며 직접 관련이 있습니다. OOCS는 구성이 우수하고 반복 횟수가 적은보다 빠르고 효율적인 스타일 시트를 작성하는 데 도움이되는 점차 인기있는 방법입니다. OOCS에는 두 가지 주요 원칙이 있습니다 : 피부에서 구조를 분리하고 용기와 내용물을 분리합니다. Smashing Magazine의이 기사는 기본 아이디어를 안내하고 자신의 작업에 적용하는 데 도움이됩니다.

CSS 작성을위한 SMACSS 지침 소개
DRY CSS의 첫 번째 기사에서 Steven Bradley를 기억하십니까? 그는 또한이 작품을 썼습니다. OOCS와 비슷하지만 별개의 프로젝트 인 SMACSS (Jonathan Snook의 프로젝트)를 설명합니다. OOCSS와 마찬가지로 SMACSS에는 두 가지 주요 목표가 있습니다. 첫 번째는 HTML 및 컨텐츠 섹션의 의미 론적 가치를 높이는 것이고, 두 번째는 특정 HTML 구조에 대한 기대를 줄이는 것입니다. 이 기사에서는 두 가지 목표를 자세히 설명하고 유용한 코드 예제를 제공하여 SMACSS가 실제로 작동하는지 확인할 수 있습니다.

5. 브라우저 지원을 알고

CSS를 향상시키는 다섯 번째이자 마지막 열쇠는 무엇이 작동하는지 아는 것입니다. CSS3는 우리 대부분이 무시하기에는 너무 유혹적이지만 어려운 사실은 특정 브라우저에서 작동하지 않는다는 것입니다 (물론“확실한 브라우저”로 IE를 의미 함).

초보자 웹 개발자가 머리에 들어가야 할 큰 비밀은 모든 단일 CSS 기능과 사람에게 알려진 모든 브라우저가이를 처리하는 방법을 암기해야한다는 것이 아니라, 이 정보를 제공 할 수있는 놀라운 리소스가 있다는 것입니다. 자유롭게, 당신은 어디를 볼지 알아야합니다.

당신을 거기에 데려다 줄 자원

CSS3 및 HTML5의 네일 링 브라우저 지원 : 오늘날 사용할 소중한 리소스
이 기사에서는 브라우저 지원을 확인하기 위해 책갈피로 지정한 비교적 적은 수의 사이트를 소개합니다. 이 자료는 환상적이고 시각적이며, 필요한 정보를 순식간에 제공하므로 코딩으로 돌아갈 수 있습니다. 그들이 무엇인지 살펴보십시오!

CSS3에 대한 브라우저 지원 : 현재 상태는 무엇입니까?
이 기사는 1 년 전에 작성되었으므로“현재 상태”부분은 논쟁의 여지가 있지만이 기사에서 정보를 쓸모 없게 만들 정도로 이번에는 충분히 변경되지 않았습니다. 다양한 CSS3 속성에 대해 매우 유용한 개요로 사용되며, 모든 곳에서 작동하는 내용과주의해야 할 사항을 기반으로 섹션으로 나뉩니다. 통과하는 데 몇 분 밖에 걸리지 않으며 읽을 가치가 있습니다.

크로스 브라우저 호환성의 중요성 : 팁 및 리소스
CSS를 처음 접하고 브라우저 호환성 주제와 그것이 중요한 이유에 대한 기본 소개가 필요한 경우이 Noupe 기사에서 다룰 것입니다. 단순히 호환성이라는 아이디어를 판매하는 것 외에도 최대한의 호환성을 보장하는 데 사용할 수있는 훌륭한 리소스가 많이 있습니다. 다양한 브라우저에서 사이트를 테스트하는 데 도움이되는 도구 목록이 특히 중요합니다.

이 모든 것을 24 시간 안에 읽어야합니까?

나는 당신에게 당신이 알아야 할 원리를 배울 수있는 15 가지 이상의 기사를 연구하기 위해 절대적으로 중요한 5 가지 주제를 제시했습니다. 이것은 모두 훌륭하고 훌륭하지만 내 제목에서 나는 당신이 하루에 더 나아질 것이라고 약속했으며 모든 사람이 앉아서 15 개의 긴 기사를 읽을 시간이있는 것은 아닙니다!

좋은 소식은 각 주제에 대해 3 가지 기사를 제공하여 선택할 수있는 다양성이 있다는 것입니다. 각 내용에 대해 자세히 설명 했으므로 필요에 가장 적합한 것을 선택할 수 있습니다. 아는 것이 아니라 모르는 것에 기초하여 읽을 기사를 선택하십시오. 지식의 격차를 메우는 것을 목표로 삼으십시오.

내 제안은 위의 내용을 탐색하고 읽을 다섯 기사를 선택하는 것입니다 (각 섹션에서 하나씩). 그것도 하루에 많은 일을하지만 대부분은 천 단어 정도가 넘지 않으며, 대부분은 적습니다. 나는 당신이 그것을 뽑을 수 있다고 확신합니다. 당신이 할 수 없다면, 문제 없습니다. 일주일에 CSS 기술 향상 목표를 변경하고 다음 5 일 동안 매일 5 개의 선택된 기사 중 하나를 읽으십시오. 다음 주에 명확하고 간결하며 호환 가능하고 재사용 가능한 CSS를 작성하는 것이 훨씬 나아질 것입니다.