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 만으로 블로그 꾸미기에 대해 작성할 예정입니다. 다음에는 더 자세한 설명과 함께 찾아뵙겠습니다.

구글 블로그 만들기