WordPress용 CSS 학습을 위한 10가지 간단한 팁

CSS를 배우는 것은 특히 어디서부터 시작해야 하고 막혔을 때 어떤 용어를 검색해야 할지 모를 때 압도적일 수 있습니다.

CSS는 스타일 지정 언어이며 Javascript 또는 PHP와 같은 완전한 프로그래밍 언어가 아니기 때문에 특히 HTML 지식이 어느 정도 있는 경우(이 게시물의 목적을 위해 가지고 있다고 가정) 실제로 배우기가 매우 간단합니다.

블로그 설문조사에서 압도적인 수의 사용자가 게임을 향상하고 CSS에 더 익숙해지기를 원한다고 언급했습니다. 그래서 최근에 CSS 학습을 위한 150개 이상의 리소스 목록을 게시했습니다. 이 목록은 특히 시작하는 데 도움이 될 것입니다. 이 게시물.

오늘은 제가 몇 년 전 CSS를 처음 시작할 때 CSS를 배우는 데 도움이 된 작업 흐름과 팁을 보여 드리겠습니다. 첫 번째 팁부터 시작하여 CSS 숙달을 위해 목록을 아래로 내려갑니다.

계속 읽거나 다음 링크를 사용하여 건너뛰십시오.

• 기본 구성
• 단순 선택자와 속성으로 연습하기
• 상자 모델을 기억하십시오
• 함으로써 배우다
• 너비와 높이로 콘텐츠 정렬
• 플로트 및 포지셔닝
• 고급 CSS
• CSS로 사이트 복제
• 전처리기
• 프레임워크

1. 기본 구성

가장 먼저 해야 할 일: 자신의 CSS를 작성하는 방법을 배우려면 적절한 형식을 지정하는 방법을 알아야 합니다. 실제로 이를 수행하는 두 가지 올바른 방법이 있지만 그 중 하나는 보다 체계적으로 유지하는 데 도움이 됩니다.

HTML은 사람들이 WordPress 사이트에서 작업할 때 배우는 첫 번째 언어인 것이 일반적이므로 먼저 HTML과 유사한 방식으로 작성하여 CSS 구문을 배우는 것이 도움이 됩니다.

CSS가 취하는 기본 구조는 다음과 같습니다.

사이트의 요소에 대해 구현하려는 스타일이 많지 않은 경우에는 충분히 간단하지만 CSS에 더 익숙해지기 시작하면 요소에 대해 하나 이상의 스타일이 필요하게 됩니다. 이러한 구조는 빠르게 지저분해질 수 있습니다.

그렇기 때문에 CSS를 작성하는 더 효율적이고 조직적인 방법이 있습니다.

이제 이 예에서 사용된 용어를 파헤칠 수 있습니다. 이러한 각 용어는 CSS의 기본 빌딩 블록인 클래스, ID, 선택기, 속성 및 값입니다. 속성과 값은 또한 선언이라고 하는 것을 구성합니다.

이것은 자신의 CSS를 작성하는 방법을 배우기 위한 훌륭한 출발점이며 일단 시작하면 WordPress 파일 내에서 이 모든 것을 어디에 적어야 하는지 궁금할 수 있습니다.

WordPress 설치에서 .css 로 끝나는 모든 파일은 이미 짐작한 대로 CSS 파일입니다. 찾아야 할 기본 파일은 스타일시트이며 style.css 라는 레이블이 지정되어 있습니다. 이것은 테마 디자인의 대부분 또는 전체가 색상, 글꼴, 기본 이미지 및 테마 레이아웃의 일부로 유지되는 곳입니다.

또한 custom.css 라는 미리 만들어진 테마의 파일을 볼 수 있으며 일반적으로 이 파일에서 테마를 변경하기를 원합니다. 이 파일을 변경하면 테마의 스타일시트에 있는 기존 스타일을 덮어써야 합니다.

테마에 플러그인을 추가하면 폴더에 CSS 파일이 함께 제공될 수 있으며 플러그인의 룩앤필 스타일을 지정하는 데 사용됩니다.

2. 단순 선택자와 속성을 사용한 연습

다음은 기본 선택기 및 속성과 테마에서 작동하는 방식에 대해 알아봅니다. 예를 들어 머리글에는 h1 , h2 및 h3 , 단락 텍스트에는 p 와 같은 선택기뿐 아니라 font-family 및 background-color 와 같은 속성도 있습니다.

실제로 WordPress 블로그를 시작하지 않고도 이러한 새로운 기술을 연습하고 변경 사항을 실제로 볼 수 있는 쉬운 방법이 있습니다. W3Schools에는 CSS에 대한 수많은 정보와 코드를 변경할 수 있는 라이브 예제가 있으며 버튼을 누르면 변경 사항을 즉시 확인할 수 있습니다.

예제가 표시되면 직접 시도 버튼을 클릭하기만 하면 몇 가지 기본 CSS를 테스트할 수 있는 창이 열립니다.

3. 상자 모델 암기

저는 모든 정보를 기억하는 것보다 가장 일반적인 정보를 참조하는 것을 옹호합니다. 아마도 기억력이 많이 부족하기 때문일 수도 있지만 온라인에 훌륭한 참고 자료가 너무 많기 때문이라고 말하고 싶습니다.

하트비트 내에서 모르는 선택기 및 속성을 쉽게 조회할 수 있습니다. Google이나 Bing과 같은 즐겨찾는 검색 엔진에 간단히 문의하기만 하면 필요한 모든 정보가 클릭 한 번이면 됩니다.

운 좋게도 배우기가 어렵지 않고 솔직히 외울 수만 있다면 문제가 없을 것입니다. 본질적으로 콘텐츠 영역, 패딩, 테두리 및 여백이 포함됩니다.

4. 함으로써 배우기

CSS에 익숙해지기 시작하면 완전히 기본 디자인이 있는 테마를 선택하고 스타일시트를 편집하여 스타일을 변경하여 실제로 적용하는 것이 좋습니다.

간단한 변경이 테마에 어떤 때는 크게 영향을 미칠 수 있고 어떤 때는 그다지 영향을 미치지 않을 수 있다는 것을 이해하는 것이 중요합니다. 궁극적으로, 변경 사항을 시각적으로 확인하고 코드 작성 작업을 최종 결과에 연결하는 데 도움이 될 수 있는 한 많이 연습하십시오.

더 큰 틀에서는 점을 연결할 수 있게 되면 CSS를 빠르게 작성할 수 있을 뿐만 아니라 웹 디자인 및 개발에 중요한 작업이 되는 향후 문제를 해결할 수 있어야 합니다.

다음은 WordPress 사이트에 무료로 설치할 수 있는 연습할 수 있는 몇 가지 훌륭한 테마입니다. 그들 모두가 테마의 모양과 기능에 대한 완벽한 표현은 아니지만 간단한 CSS로 테마를 변경하는 방법을 배우기 위한 훌륭한 출발점입니다.

화이트 스펙트럼

White Spektrum 테마는 기본 콘텐츠 영역, 사이드바, 머리글 및 바닥글을 포함하는 공통 레이아웃의 간단한 테마입니다.

글꼴 및 링크와 관련하여 색상이 튀는 것 외에는 작업하기에 단순하고 단순한 테마입니다.

설립자

위의 이러한 미니멀리스트 테마를 사용하더라도 아직 인식하지 못하는 것들이 얼마나 많은지 압도당할 수 있으며 괜찮습니다. 이 게시물의 각 섹션을 확인하면 모든 것이 조금 더 모이기 시작할 것입니다.

5. 너비와 높이로 콘텐츠 정렬

이러한 테마 중 하나를 설치한 후에는 콘텐츠 영역 및 선택기의 다른 길이와 너비를 입력하여 레이아웃 변경을 시작할 수도 있습니다.

다음 단계의 전조이며 WordPress 테마의 다양한 레이아웃 영역에 익숙해집니다.

6. 플로트 및 포지셔닝

이것은 순전히 CSS, 특히 float 및 위치 지정을 사용하여 레이아웃을 만들 수 있기 때문에 CSS가 약간 까다로워지는 경향이 있습니다. 문제는 이러한 속성이 전체 레이아웃을 생성하도록 설계되지 않았으며 CSS 레이아웃을 업데이트하기 위한 초안이 있다는 것입니다.

현재로서는 많은 사람들이 레이아웃 을 바로 잡는 일반적인 방법입니다. 위의 목록을 포함하여 이미 존재하는 테마를 관찰하고 부동 소수점 및 위치 사용과 어떻게 다른지 확인하는 것이 좋습니다.

7. 고급 CSS

이 시점에서 CSS를 실제로 사용하기 시작했지만 더 많은 것을 발견할 수 있습니다.

• 의사 클래스 – 마우스를 가져갈 때와 같은 요소의 특정 상태를 정의하고 다른 요소와 관련된 특정 위치에 이미지를 배치하는 데 사용됩니다.
• 복잡한 선택기 – 고급 선택기를 사용하여 스타일을 지정하면 더욱 구체적으로 지정할 수 있습니다.
• CSS3 애니메이션 – 이미지 및 버튼 위로 마우스를 가져갈 때 페이드, 팝 또는 기타 전환을 생성합니다.
• CSS3 미디어 쿼리의 반응성 – 반응형 테마를 만드는 가장 쉬운 방법 중 하나는 미디어 쿼리를 사용하는 것입니다.
• 변형 – 선택한 콘텐츠 영역의 크기와 모양을 제어합니다.
• At-rules – 글꼴 및 스타일시트와 같은 항목을 테마로 가져오는 데 사용됩니다.
• 그라디언트 – 이미지를 사용할 필요 없이 테마에 그라디언트를 추가합니다.

이것들은 테마 디자인이 실제로 형성되는 것을 실제로 볼 수 있는 많은 요소입니다. 당신의 기술을 테스트하기 시작하기에 완벽한 시간입니다.

8. CSS로 사이트 복제

벨트에 대한 이 모든 지식이 있으면 더 튼튼한 벨트가 필요할 수도 있지만 더 중요한 것은 테마의 기본 셸을 사용하고 처음부터 자신의 CSS 스타일을 추가하여 기술을 실제로 연습할 수 있다는 것입니다.

학습을 향상시키기 위해 할 수 있는 가장 유용한 일 중 하나는 실제 응용 프로그램에서 지식을 연습하는 것입니다. 마음에 드는 사이트를 찾은 다음 빈 WordPress 테마에서 순수하게 CSS를 사용하여 최대한 복제하는 것이 좋습니다.

물론 모든 것을 완벽하게 만들 수는 없으며 CSS만으로 복제할 수 없는 요소가 많이 있을 수 있지만 CSS에 익숙해지는 데는 좋은 방법입니다.

다음은 사용할 수 있는 훌륭한 무료 시작 테마입니다.

• 빈 슬레이트

  

  이것은 그것이 얻을만큼 맨발입니다. 이 테마에는 HTML5만 있으므로 스타일 충돌에 대해 걱정하지 않고 CSS를 자유롭게 추가할 수 있습니다. 하지만 테마 스타일 지정을 시작하는 데 필요한 모든 것이 포함되어 있습니다.

• HTML5 공백

  

  HTML5 Blank는 몇 가지 스타일을 포함하는 상용구 WordPress 테마입니다. CSS를 처음부터 시작하는 데 너무 열중하지 않는다면 좋은 시작입니다.

• 밑줄

  

  약간의 모험심이 있고 고급 시작 테마를 시도하고 싶다면 Underscores가 훌륭한 옵션이지만 두 가지 미리 로드된 테마 샘플 스타일이 함께 제공되기 때문에 마음이 약한 사람에게는 적합하지 않습니다. 또한 훌륭한 학습 도구가 되는 몇 가지 고급 기술과 코딩이 포함되어 있습니다.

GitHub에는 HTML5 Reset WordPress Theme도 있습니다. 여기에는 좀 더 발전된 기능이 포함되어 있지만 궁극적으로 이것이 가치 있는 시작 테마가 되는 것입니다.

9. 전처리기

CSS의 내용을 알고 나면 전처리기, 특히 SASS 및 LESS에 대해 배우는 것이 좋습니다. 이 두 가지 모두 CSS를 구성하는 데 도움이 되므로 작성하기가 훨씬 쉽고 향후 편집에 더 쉽게 액세스할 수 있습니다.

전처리기는 CSS를 깔끔하고 따라하기 쉽게 만들어주며 웹 개발자들 사이에서 빠르게 필수 기술이 되었습니다. 어느 것이 가장 좋은지에 대한 지속적인 논쟁이 있지만 SASS는 현재까지 가장 많이 사용되는 전처리기인 경향이 있습니다.

WordPress의 맥락에서 SASS에 손을 대고 싶다면 Bones 테마를 확인하십시오. 대부분 HTML5로 구성되어 있으므로 이미 포함된 SASS의 내장 비트로 스타일링을 시도할 수 있습니다.

10. 프레임워크

웹 개발에서 프레임워크는 동적 웹사이트를 만들기 위한 구조입니다. 궁극적으로 프레임워크의 목표는 기능을 잃지 않고 사이트를 더 빠르게 만드는 것입니다.

CSS가 있으면 프레임워크를 사용하여 테마 개발 속도를 높일 수 있습니다.

가장 인기 있는 프레임워크 중 하나는 Twitter Bootstrap입니다. 그것은 즉시 반응하도록 만들어졌으며 SASS와 LESS는 물론 많은 사용자 정의 CSS 구성 요소를 사용합니다.

마무리

학습을 위한 강의 계획서와 그 과정에서 도움이 되는 팁으로 무장한 CSS는 다루기에 너무 압도적이어서는 안 됩니다. 또한, 이제 WordPress 테마를 직접 스타일링할 수 있는 준비가 되어 있어야 합니다.

CSS 및 WordPress 학습에 대한 추가 리소스는 다른 게시물(A Mega Guide to Learning and Referencing CSS for WordPress: 150+ Resources and From WordPress Beginner to Pro: 200+ Career-Boosting Resources)을 확인하세요.

• CSS