CSS를 사용하는 방법 – 초보자를 위한 웹 디자인 팁 및 요령

초보자를 위한 CSS 팁을 통해 CSS를 사용하여 웹 페이지의 스타일을 지정하는 방법을 배울 수 있습니다.

컴퓨터 코드에 대해 아무것도 알 필요가 없습니다. 복사 및 붙여넣기 방법만 알면 됩니다.

그러나 먼저 CSS 란 무엇입니까?

CSS(Cascading Style Sheets)는 테마 개발자가 HTML 문서의 표현 또는 모양을 설명하고 변경하는 데 사용하는 스타일시트 언어 코드입니다.

CSS는 무엇을 합니까?

간단히 말해서 CSS 파일은 HTML 페이지를 보기 좋게 만듭니다.

사용 중인 블로깅 플랫폼에 관계없이 CSS 속성을 변경하여 블로그를 더욱 멋지게 만들 수 있습니다.

어떤 블로그 플랫폼을 사용하는지는 중요하지 않습니다.

맞춤 CSS 또는 추가 CSS 에 대한 테마 설정에 옵션이 있습니다.

이 옵션을 본 적이 없을 수도 있습니다.

또는 가지고 있다면 코딩 방법을 배우는 것이 너무 어렵다고 생각할 수 있습니다.

하지만 매우 쉽습니다.

웹 개발이나 CSS 구문에 대해 아무것도 모르지만 몇 초 만에 스타일 속성을 변경할 수 있습니다.

Chrome 또는 Firefox 웹 브라우저 개발자 도구를 사용하고 몇 가지 간단한 CSS 요령과 팁을 배우기만 하면 됩니다.

얼마나 쉬운지 봅시다.

블로그의 CSS를 편집하는 방법을 배우고 싶은 이유는 무엇입니까?

블로그 테마에 많은 설정이 있을 수 있습니다.

그러나 누락될 수 있는 더 작은 요소가 많이 있습니다.

WordPress의 프리미엄 테마에서도 일부 옵션은 표준 옵션에서 사용할 수 없습니다.

자신만의 편집 및 변경을 통해 CSS가 더 잘 작동하도록 도울 수 있는 이유입니다.

외부 스타일 시트를 변경하면 모든 HTML 페이지를 참조할 수 있습니다.

한 페이지에서 HTML 제목을 변경하면 모든 페이지에서 HTML 태그가 변경됩니다.

참조를 의사 요소라고 합니다.

즉, H2 제목의 모양을 변경하면 사이트의 모든 H2 제목도 변경됩니다.

그러나 이러한 합병증에 대해 모두 배울 필요는 없습니다.

당신이 알아야 할 것은 그것이 작동하고 코딩에 대해 전혀 알지 못하더라도 블로그를 원하는 모양으로 정확하게 스타일을 지정할 수 있다는 것입니다.

초보자를 위한 몇 가지 쉬운 CSS 팁을 시작하겠습니다.

인라인 CSS를 쉽게 변경하는 방법

첫 번째 단계는 Firefox, Chrome 또는 Microsoft Edge에서 블로그를 여는 것입니다.

아래 예에서는 Firefox를 사용했습니다. Chrome보다 사용하기가 조금 더 친숙합니다.

그러나 둘 다 비슷한 방식으로 작동합니다.

새 탭이나 창에서 블로그를 엽니다. 변경할 페이지로 이동할 수 있습니다.

이제 Firefox의 도구 메뉴 또는 Chrome의 보기 메뉴에서 개발자 도구인 Inspector를 엽니다.

Inspector를 클릭하여 도구 창을 엽니다.

도구 창의 왼쪽 상단에 있는 선택기 화살표를 사용하여 페이지에서 인라인 스타일 요소를 선택할 수 있습니다.

페이지에서 커서를 이동하여 요소를 선택합니다. 또는 목록에서 개별 요소를 클릭할 수 있습니다.

웹 페이지의 브라우저 보기에서 선택한 각 요소가 파란색으로 강조 표시되는 것을 볼 수 있습니다.

이제 페이지 모양을 변경할 준비가 되었습니다.

CSS 선택기 사용

내 예에서는 H2 제목 요소의 모양을 변경하겠습니다.

H1 요소, 본문 텍스트 또는 이미지 캡션을 변경하도록 선택할 수 있습니다.

글꼴 크기를 변경하여 시작하고 싶습니다. 스타일 태그 font-size를 클릭하고 숫자를 변경하기만 하면 됩니다.

크기를 33px에서 56px로 변경했습니다. 이제 제목의 크기가 더 커진 것을 볼 수 있습니다.

괜찮아요. 라이브 블로그 페이지를 변경하지 않았습니다. 브라우저 창에 표시되는 내용은 변경 내용의 미리보기일 뿐입니다.

HTML 요소로 원하는 만큼 놀 수 있습니다.

브라우저 창에 표시되는 모든 것은 CSS 규칙에 대한 변경 사항의 미리 보기일 뿐입니다.

이제 텍스트의 색상을 변경하고 싶습니다.

색상 태그 와 숫자 사이의 색상 점을 클릭하면 색상 선택기가 열립니다.

이제 사용하려는 색상을 선택하기만 하면 됩니다.

HTML 속성 색상을 변경하는 것은 간단합니다. 여기서는 검은색에서 파란색으로 변경했습니다.

좋아 보이지만 줄 높이가 더 좋을 수 있습니다. 내가 바꿀게.

현재 설정은 1.2로 줄 사이에 너무 많은 공간이 있습니다. 라인을 더 가깝게 만들고 싶습니다.

그래서 1.0으로 변경하겠습니다.

훨씬 좋아 보입니다.

미리 보기 모드에서 내 H2 표제가 어떻게 보이는지 세 가지를 변경했습니다. 글자 크기, 색상, 줄 간격을 변경했습니다.

이제 내 라이브 사이트에 이러한 변경 사항을 추가할 차례입니다.

사이트에 대한 코드를 얻는 방법

수정한 코드 줄을 복사해야 합니다.

모든 코드를 선택하고 복사합니다. 마지막 대괄호를 포함하여 모든 행을 복사했는지 확인하십시오.

이제 텍스트 편집기에 붙여넣습니다. PC에서 메모장을 사용하거나 Mac에서 텍스트 편집기를 사용할 수 있습니다.

우리가 만든 다른 변경 사항은 색상이었습니다. 이 줄도 복사해야 합니다.

색상에 대한 선만 복사하면 됩니다.

위 이미지에서 H2 요소가 굵게 표시된 것을 볼 수 있습니다. 이는 첫 번째 코드와 동일한 의사 요소임을 의미합니다. 따라서 함께 사용할 수 있습니다.

줄을 복사하십시오.

이제 텍스트 편집기에 줄을 추가하십시오.

색상 선이 동일하게 들여쓰기되도록 몇 개의 공백을 추가하거나 삭제해야 할 수 있습니다.

이제 이 세 가지 변경 사항을 라이브 사이트에 추가할 준비가 되었습니다.

사이트에 코드 추가

테마 옵션으로 이동하여 CSS 옵션을 선택합니다.

WordPress 테마에서는 Theme Customizer에 있으며 추가 CSS 또는 사용자 정의 CSS라고 합니다.

다른 블로깅 플랫폼에서도 비슷한 이름으로 불릴 것입니다.

이제 텍스트 편집기에서 모든 코드를 복사하여 Customizer 탭에 붙여넣습니다.

코드를 붙여넣는 즉시 미리 보기에 변경 사항이 표시됩니다.

게시를 클릭하면 완료됩니다.

다음은 변경 전과 후를 비교한 것입니다.

당신은 훨씬 더 많은 것을 할 수 있습니다

초보자를 위한 내 CSS 팁은 HTML CSS 스타일 편집에 대한 단계별 소개는 시작에 불과합니다.

다른 요소를 실험하고 변경하려는 경우 훨씬 더 많은 작업을 수행할 수 있습니다.

이미지에 테두리나 그림자를 추가하거나 텍스트를 왼쪽 또는 오른쪽으로 이동하거나 본문 텍스트 너비를 조정하는 것은 쉽습니다.

여백을 이동하거나 패딩을 줄이거나 늘리고 정렬을 수정할 수 있습니다.

편집하기 위해 선택할 수 있는 수백 가지 옵션이 있습니다.

개발자 도구에서 작업할 때는 사이트에 영향을 미치지 않는다는 점을 기억하십시오.

모든 변경 사항은 미리 보기이며 해당 브라우저 창 내에서만 볼 수 있습니다.

무엇을 시도하든, 효과가 있든 없든 상관없습니다.

웹사이트나 블로그의 스타일을 지정하기 위해 얼마나 더 많은 일을 할 수 있는지 배울 수 있는 놀이터라고 생각하세요.

호기심을 가지면 초보자를 위한 CSS 팁을 통해 이 새로운 기술을 재미있게 배울 수 있습니다.

개발자 도구에 대한 큰 보너스 팁

이제 개발자 도구 프레임을 열었으므로 수행할 수 있는 매우 깔끔한 작업이 하나 있습니다.

사이트 속도를 테스트할 수 있습니다.

네트워크 탭을 클릭하기만 하면 됩니다.

그런 다음 CTRL + R을 클릭합니다.

화살표로 표시된 하단의 선에 완전히 로드된 페이지 속도 시간이 빨간색으로 표시됩니다.