CSS(Cascading Style Sheets) 스타일 시트

한마디로, CSS는 HTML을 지원 (장식)하는 언어이며, 홈페이지의 스타일을 지정하는 스타일 시트 전반의 하나입니다.

HTML 페이지에서 요소(태그)에 적용되는 색상, 글꼴, 이미지, 콘텐츠의 배치 등 모든 스타일을 설명하는 데 사용됩니다.

왜 CSS가 중요한가?

HTML 태그만으로는 의도한대로의 홈페이지 스타일링 작성에 한계가 있으며, 그렇다고 해서 HTML만으로 페이지의 스타일 등을 컨트롤하면 HTML 본래의 기능과는 다른 방향의 페이지가 될 수도 있습니다.

그래서 복잡한 코딩이 되는 경향이 있는 웹 사이트를, CSS를 사용하면 HTML과 병행하여 작성함으로써, 페이지 전체의 디자인의 일관성을 유지할 수 있습니다.

페이지 디자인 최적화가 가능함으로써 정보 전달은 HTML로, 페이지의 디자인은 CSS를 사용하는 것으로, 이후 페이지에 기재된 정보를 변경하게 되었을 때, 쉽게 내용을 수정할 수가 있습니다.

반대로 페이지의 레이아웃과 디자인을 업데이트하고 싶을 때는 CCS만 수정하면 됩니다.

스폰서 링크

CSS의 간단한 예

 <html>
 <style type="test/css">
  body {
   font-family:"Meiryo", sans-serif;
 }
   h1{
      color:red;
      font-size:50px;
   }
   .sub{
      color:blue;
   }
   #link{
      color:green;
      text-decoration:none;
   }
 </style>
 <body> 
   <h1>CSS/스타일 시트</h1>
   <h2>CSS/스타일 시트</h2>
   <h3>CSS/스타일 시트</h3>
   <a id="link" href="http://www.tabmode.com/">
   즐거운 인생</a>
  </body>
 </html>

▼　아래와 같은 결과가 됩니다. 이렇게 CSS를 사용하면 간단하게 문자의 크기 및 색상 등을 지정할 수 있습니다.

CSS/스타일 시트

즐거운 인생

CSS 작성법

p {
   color: blue
   }
   /*p：선택자(selector)
     color：속성(property)
     blue：값(value)*/

CSS 스타일 시트는 대체로 다음의 3가지로 활용되고 있습니다.

CSS 인라인 ：태그를 직접 작성

아래와 같이 스타일 속성을 HTML 문서에 직접 삽입합니다. 이것은 비효율적인 스타일 시트의 활용 예(Sample)일지도 모릅니다.

불필요한 것이 겹치거나 하기 때문에 HTML 요소에 CSS 속성을 인라인화하는 것은 가능한 한 피하는 것이 좋다고 생각합니다.

또한 Web 페이지의 레이아웃과 디자인을 업데이트 할 때 하나 하나 페이지를 업데이트해야 하기에 페이지 수가 많으면 상당한 시간이 걸려 버립니다.

단지, 외부 CSS 링크와는 달리 HTML에 인라인함으로써 브라우저는 페이지의 렌더링을 계속할 수 있습니다.

　<p style="color: blue">파란색</p>

스폰서 링크

<head>〜</head>태그 내부에 기술하기

스타일 정보를 하나의 Web 페이지의<head>〜</head>태그에 정의해 두면, 웹 페이지의 모든 단락에 CSS 스타일을 적용할 수 있습니다.

위의 인라인 CSS보다 더 강력이지만, 이것은 하나의 페이지에만 영향을 주는 것으로, 다른 Web 페이지에 모든 스타일에 지정하려면 해당 페이지 모두에 그 CSS 코드를 넣을 필요가 있기 때문에, Web 페이지 수가 방대한 경우 시간이 걸리는 단점이 있습니다.

 <head>
 <style type="test/css">

 .redmoji{
          color;red;
          font-size:1.5em;
         }

 </head>
 <body>
 
   <p class="redmoji>CSS 강좌 </p>

 </body>

외부 CSS 파일과 연계시키기

외부 스타일 시트 파일과 연계합니다. 확장자명 ".css" 의 파일을 아래와 같이 <head> 태그 내에서 링크시킵니다.

외부 스타일 시트 파일에 링크하여 모든 Web 사이트의 페이지에는 같은 CSS 스타일을 더 빨리 적용시킬 수 있습니다.

예를 들어, "p" 태그에 빨간색 문자를 지정한 선택자가 있는 경우 사이트의 모든 페이지를 통해 그 p 태그로 지정된 문장은 똑같은 스타일이 적용됩니다.

다만, 브라우저는 콘텐츠를 화면에 표시하기 전에 외부 CSS 파일을 차단하고 있기 때문에 이로 인해 추가 지연이 발생할 수 있으며, 화면에 표시되는 시간이 길어지기도 합니다.

 <head>
 .
 .
 <link href="common.css" rel="stylesheet" type="text/css">
 .
 . 
 </head>

파일 이름(common.css)의 명명은 자유입니다.

<html>
<head>
<title>テスト</title>
<style type="text/css">
<!--
.title { color:blue }
-->
</style>
</head>
<body>
<h1 class="title">즐거운 인생</h1>
</body>
</html>

스폰서 링크