Home
Blogger
Tips

CSS 사용을 극대화, 블로그 로딩 속도 향상

CSS 사용 극대화하여 블로그 로딩 속도 향상시키는 방법.
CSS 사용을 극대화하여 구글 블로그 로딩 속도 향상시키는 방법

CSS는 HTML 또는 XHTML을 기반으로 하는 블로그나 웹 사이트의 중요한 구성 요소 중 하나입니다.

HTML만으로 웹 페이지를 표시하기에는 충분하지 않기 때문에 HTML의 모양새를 개선하기 위해서 CSS가 꼭 필요합니다. 반대로 HTML 없이 CSS만 사용하도 페이지가 표시되지 않습니다. HTML과 CSS는 둘 다 서로 밀접한 관련이 있다고 말할 수 있겠습니다.

CSS (Cascading Style Sheet)
웹페이지에서 여러 구성 요소를 배열하여 보다 구조화되고 깔끔하게 만듭니다. CSS는 프로그래밍 언어가 아닙니다.
— en.wikipedia.org

jQuery 꼭 써야 될까?

jQuery는 코드 작성을 용이하게 하는 다양한 함수를 포함하는 자바스크립트 라이브러리입니다.

물론 jQuery는 매우 유용하지만 웹의 사용자 경험 및 최적화에 나쁜 영향을 미칩니다. UX 측면에서 jQuery는 블로그의 로딩 속도를 느리게 합니다. 웹 사이트 측면에서는 검색 엔진 로봇에 의한 렌더링 프로세스를 방해합니다. 더 이상 jQuery는..

jQuery 없이 멋진 기능과 특별한 효과를 만들 수 있을까?

CSS3 출시 이후에는 Show Hide, Pop Up, Smooth Scroll 등 의 효과를 표시할 수 있는 기능이 생겨서 CSS가 jQuery와 거의 동일하다고 말할 수 있습니다.

HTML 구성 요소들을 호출자로 적절하게 활용하면 CSS로 다양한 기능과 효과를 만들어 블로그 / 웹 사이트의 외관을 멋지게 꾸밀 수 있습니다. 믿거나 말거나 이 블로그의 모양과 일부 기능은 CSS로만 만들어져 있습니다.

CSS 사용 극대화, 블로그 로딩 속도 향상

1. CSS 압축 / 축소하기

CSS의 크기를 줄이면 블로그나 웹의 로딩 속도를 빠르게 할 수 있습니다. 아래와 같이 모든 코드를 한 줄에 결합하여 CSS 크기를 줄일 수 있습니다. 

div {
  display: table;
  position: relative;
  padding: 20px 0;
}
h1 {
  display: block;
  margin-bottom: 20px;
  font-size: 25px;
}

모든 CSS 항목을 한 줄로 병합하여 다음과 같이 만듭니다.

div {display: table;position: relative;padding: 20px 0}
h1 {display: block;margin-bottom: 20px;font-size: 25px}

CSS 사용에 대한 전문가이거나 능숙하다면 다음과 같이 모든 코드를 한 줄에 쓸 수도 있습니다. 

div {display: table;position: relative;padding: 20px 0} h1 {display: block;margin-bottom: 20px;font-size: 25px}

2. CSS 선택자 사용하기

CSS 의 사용을 늘릴 수 있는 두 번째 방법은 CSS 선택자(Selector)를 사용하여 자바스크립트에 해당하는 함수를 만드는 것입니다. W3Schools.com에는 약 55 개의 CSS 선택자가 있지만 여기서 중요한 역할을 하는 선택자는 몇 가지밖에 되지 않습니다.

div > p

div의 직계 하위 요소 인 모든 p 요소를 선택 하는 데 사용됩니다 . div p 와 달리 이와 같이 작성하면 직계 자식 요소인지 여부에 관계없이 div에 포함 된 모든 p 요소가 선택됩니다.

div + p

div 코드 바로 뒤에 배치되는 p 요소를 선택하는 데 사용됩니다. div 와 p 사이에 다른 Html 코드가 있으면 작동하지 않습니다. 예를 들면 다음과 같습니다. 

<div></div>
<p>페이지_텍스트_입력</p> <!-- p 요소는 div 요소 바로 아래에 있으므로 선택됩니다. -->

하지만 아래와 같이 작성하면 작동하지 않습니다.

<div></div>
<h2>제목_입력</h2>
<p>페이지_텍스트_입력</p>

대신 위의 경우에서 <p> 요소를 선택하려면 div ~ p 를 사용하면 됩니다.

[attribute=value]

지정된 속성이 있는 요소만 선택할 수 있습니다. 예를 들어 아래와 같은 CSS 및 HTML 코드에서 

<style>
  p[style='display:block'] {background: #ea6d23}
</style>

<p>페이지_텍스트_입력</p>
<p style='display:block'>위의 CSS 코드는 style = 'display : block'속성이 지정된 <p> 줄에서만 작동합니다.</p>

:checked

이 코드는 Checkbox 또는 Radio 유형 입력(input)에 대해 작동하며, 클릭하거나 선택하면 CSS 코드가 작동합니다. 예제는 별도의 게시글에서 이어집니다.

:focus

일반적으로 동일한 기능을 가진 텍스트상자 또는 textarea 유형 입력(input)에 사용되며, 클릭하거나 사용자가 입력(input)에 무언가를 작성하면 CSS 코드가 활성화됩니다. 예제는 별도의 게시글에서 이어집니다.

:target

이 코드는 타겟 링크에 표시됩니다. 예를 들어 google.com/#header , 즉 ( #header 등 )과 같은 링크를 클릭하면 CSS 코드가 활성화됩니다.

:first-of-type

동일한 유형의 첫 번째 하위 요소에 사용됩니다. 예를 들면 다음과 같습니다.

<style>
  p:first-of-type {background: #ea6d23}
</style>

<div>
  <p>위의 CSS는 해당 요소의 첫 번째 자식 요소에서만 작동합니다. CSS 코드가 p:last-of-type으로 변경되면 CSS 코드는 <p> 마지막 요소에서만 활성화됩니다.</p>
  <p>두 번째 단락의 예</p>
  <p>세 번째 단락의 예</p>
</div>

위의 여러 선택자를 이용해서 CSS 만으로 블로그 꾸미기에 대해 작성할 예정입니다. 다음에는 더 자세한 설명과 함께 찾아뵙겠습니다.

Post a Comment