안녕, 세상!

1. CSS 개요 본문

It공부/CSS

1. CSS 개요

dev_Lumin 2020. 7. 30. 21:51

CSS(Cascading Style Sheets)는 문서의 모양을 정의하는 속성을 모아놓은 언어이며, html 문서의 색이나 모양 등 외관을 보완하는 역할로 문서를 픽셀 단위로 세밀하게 제어할 수 있어서 html로만 변형시키기 힘든 속성을 정의할 수 있습니다.

 

처음에 제공된 스타일시트는 CSS1으로 간단히 해결을 했지만 새로운 버전의 웹브라우저가 나타나면서 CSS2가 주로 사용되었습니다.

HTML5가 발표된 후 CSS 기술이 한층 발전하여 CSS3 체계를 이용하고 있습니다.

CSS3가 CSS2와 다른 점은 모듈 기반으로 개발된다는 점입니다.

또한 기존에 없었던 화려하고 역동적인 포토샵도 생겼으며 자바스크립트와 서버 측에 의존했던 기술들이 자체적으로 담겼습니다.

 

(1) CSS 특징

① 기능 확장성

HTML의 기능을 확장하고, HTML에서 지원하지 않는 다양한 폰트 사이즈 등의 기능을 사용할 수 있습니다.

 

 

 

② 양식의 모듈화

스타일 시트를 HTML에 부가적으로 활용함으로써 일정한 양식을 CSS로 작성해 놓고 사용할 때 부르기만 하면 같은 양식으로 표현할 수 있으며, CSS를 변경함으로써 관련된 모든 문서들의 표현 형식을 동시에 변경 가능합니다.

 

 

 

③ 간편성

문서를 다양하고 자유롭게 구성할 수 있습니다.

 

 

 

④ 일관성

사용 환경의 영향을 받지 않습니다.

 

 

 

⑤ 형식

<head>

    <style>

    ....스타일 정의....

    </style>

</head>

 

 

반드시 <head> .... </head> 에 지정합니다.

style 명령은 대소 문자를 구별하지 않습니다.

<style> .... </style> 태그로 정의의 시작과 종료를 나타내야 합니다.

같은 스타일을 중복해서 지정했을 때는 나중에 지정한 것이 적용됩니다.

 

 

html의 태그에 CSS의 속성을 직접 정의하는 방법은 태그내에 style=" .... " 형식으로 써져있으면 CSS를 사용한다는 의미입니다.

style 자체는 html 문법이지만 " ... " 사이에 들어갈 코드는 CSS 문법입니다.

 

 

(2) CSS 정의 방법

HTML 문서에서 CSS를 정의하는 방법은 크게 4가지가 있습니다.

 

① 엠베디드 스타일시트(Embedded Style Sheet) 형식

엠베디드 스타일 시트 형식은 4가지 형식으로 사용됩니다.

 

(1) 엠베디드 스타일시트 기본 형식

 

<head>

    <style type="text/css">               

        s1 { p1:v1; p2:v2 !important; .... }             

        s2 { p1:v1; p2:v2; .... }

        ....

    </style>

</head>

 

 

 

CSS의 경우 "text/css"를 사용하고 JSS의 경우 "text/javascript" 를 사용합니다.

p1,p2... - 속성 이름     v1, v2... - 속성 값      s1, s2.... : 선택자

스타일 지정은 { } 안에서 위와 같이 합니다.

선택자를 한 번에 여러 개를 동시에 선택함으로써 동시 지정을 할 수 있습니다.

중요하다는 표시는 "!important" 를 사용합니다.

 

 

다음은 예제입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<HTML>
<HEAD><title>sample</title>
  <meta charset="utf-8">
  <style>
  p {font-size:16pt; color:red; }
  h2, h3 {font-size:20pt; color: blue;}
  </style>
  </head>
<body>
  <h3> 엠베디드 스타일시트 기본형식 </h3>
  <p> 글자크기가 16이고 색상은 빨간색입니다. </p>
  <h2> 글자크기가 20이고 색상은 파란색입니다. </h2>
 </body>
</HTML>
 
 cs

h2, h3를 동시에 지정할 수 있는 것을 확인할 수 있습니다.

font-size나 color 같은 속성은 뒤에서 설명하겠습니다.

 

 

 

 

 

(2) 엠베디드 스타일시트 CLASS 형식

 Class 속성은 사용자가 선언한 태그에 적용되는 규칙을 의미하며, HTML 요소를 중복으로 적용할 수 있어서 다양한 selector의 형으로 사용됩니다.

형식은 다음과 같습니다.

 

 

s.Classname { 속성1 : 값1; .... }

....

<s class="Classname"> .... </s>

 

 

Classname은 클래스 이름으로 사용자가 임의로 작성합니다.

s는 선택자로 임의의 HTML 태그가 올 수 있습니다.

s가 생략되면 이 정의된 클래스 스타일은 HTML 문서 내에서 사용되는 모든 임의의 태그에 붙여서 사용할 수 있습니다.

 

예제는 다음과 같습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<HTML>
<HEAD><title>sample</title>
  <meta charset="utf-8">
  <style>
  p {font-size:16pt; color:red; }
  p.c1 {font-size:19pt; color:green;}
   .c2 {font-size:23pt; color: blue;}
  </style>
  </head>
<body>
  <h3>엠베디드 스타일의 클래스형식</h3>
  <p>엠베디드 스타일의 기본형식입니다.</p>
  <p class="c1">c1 클래스는 엠베디드 스타일 클래스형식으로 &lt; p &gt; 태그에서만 사용할 수 있습니다.</p>
  <p class="c2">c2 클래스는 임의의 태그에서 사용 가능합니다.</p>
  <h4 class="c2">c2 클래스를 &lt; h4 &gt; 에서 사용하기 </h4>
 </body>
</HTML>
 
 
 cs

 

 

 

 

 

(3) 엠베디드 스타일 ID 형식

Class 연결자와 마찬가지로 ID연결자는 특정한 HTML 요소에 적용할 수 있으며, 자바스크립트에서 function을 이용하여 객체를 생성할 때 주로 사용합니다.

class 형식과 차이점은 class 형식은 정의된 클래스를 하나의 웹페이지 파일에서 여러 번 참조할 수 있지만 ID 형식은 기본 의미가 "유일성"의 의미이므로 하나의 웹페이지 파일에서 한 번만 참조할 수 있습니다.

형식은 다음과 같습니다.

 

 

#idname { 속성1 : 값1; .... }

....

<s id="idname"> .... </s>

 

 

s는 선택자고 idname은 id 이름입니다.

 

 

 

 

 

(4) 엠베디드 스타일시트의 문장 선택자 형식

특정 상황에서 태그들에 둘러싸여 있는 글자들에 대해서만 스타일을 적용하고자 하는 경우에 사용하는 형식입니다.

형식은 다음과 같습니다.

 

 

s1 s2 ... { 속성1 : 값1; .... 속성n : 값n }

 

 

s1이라는 태그 안의 s2의 태그 부분만 스타일시트를 적용한다고 생각하면 됩니다.

 

예제는 다음과 같습니다.

1
2
3
4
5
6
7
8
9
10
11
<HTML>
<HEAD><title>sample</title>
  <meta charset="utf-8">
  <style>
  p i {color:blue;}
  </style>
  </head>
<body>
  <p> p태그내의 <i>i태그로 둘러싸여 있는 글자들만</i>&nbsp스타일을 적용합니다.</p>
 </body>
</HTML>
 cs

 문장 선택자에서 선택된 문장만 스타일시트가 적용된 것을 확인할 수 있습니다.

 

 

 

 

 

② Inline Style Sheet 형식

기본적인 CSS의 선언은 <head>와 </head> 태그 사이에 sytle 태그를 통해서 정의해서 모든 문서의 어느 곳이라도 일관성 있게 정의합니다.

Inline Style Sheet는 <body>와 </body> 태그 사이에 스타일시트가 필요할 때 즉석에서 사용하는 방법입니다.

이 방식은 문서 전체에 영향을 주지 않습니다.

형식은 다음과 같습니다.

 

 

<tagname sytle="속성1 : 값1; .... 속성n : 값n;"> .... </tagname> 

 

 

 

 

 

③ External Style Sheet 형식

외부 파일의 스타일시트를 선언하여 사용하는 형식입니다.

외부 파일로 선언하면 html 안에서는 별도의 로딩 과정을 다음과 같이 선언해야 합니다.

 

 

<head>

    <link rel="stylesheet" href="externalsheet.css">

</head>

 

 

 

예제는 다음과 같습니다.

1
2
p i {color:blue;}
h2 {font-size:20pt; color:green;}
 cs

 externalsheet.css 파일

 

 

1
2
3
4
5
6
7
8
9
10
11
<HTML>
<HEAD><title>sample</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="externalsheet.css">
  </head>
<body>
  <h2> 외부파일로 부터 스타일시트 적용 받기 </h2>
  <p> p태그내의 <i>i태그로 둘러싸여 있는 글자들만</i>&nbsp스타일을 적용합니다.</p>
 </body>
</HTML>
 
 cs

 

 

 

 

④ important Style Sheet 형식

External Style Sheet와 마찬가지로 외부 파일의 스타일시트를 선언하여 사용합니다.

차이점은 HTML 안에서 별도의 로딩 과정을 표현하는 법이 다릅니다.

 

 

<head>

<style type="text/css">

    @import url("externalsheet.css");    또는   @import "externalsheet.css"

</style>

</head>

 

 

위의 예제에서 로딩 과정 형식만 위의 형식처럼 바꿔주면 됩니다.

 

 

 

위의 CSS 정의 방법들은 결국 선택자를 정의하는 방법입니다.

선택자(Selector)의 종류는 위 뿐만 아니라 다양하게 있으며 아래 자료를 참고하면 좋을 것 같습니다.

https://code.tutsplus.com/ko/tutorials/the-30-css-selectors-you-must-memorize--net-16048

 

반드시 기억해야 하는 CSS 선택자 30개

여러분은 id, class, descendant 기초를 알고 있겠죠. 과연 그게 전부일까요? 그렇다면, 여러분은 폭넓게 적용하지 못하고 있네요. 이 글에서 설명하는 선택자 중에 다수가 CSS3 명세서에 있으며 모던 ��

code.tutsplus.com

 

 

 

 

CSS는 웹브라우저에 따라 적용이 될 수도 있고 안될 수도 있는데 아래 웹브라우저에서 속성을 입력함으로써 알 수 있습니다.

https://caniuse.com/#search=grid

 

Can I use... Support tables for HTML5, CSS3, etc

About "Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers. The site was built and is maintained by Alexis Deveria, with occasional updates provided by the web development commu

caniuse.com

 

저작자표시 비영리 변경금지

'It공부 > CSS' 카테고리의 다른 글

3. CSS3  (0) 2020.08.02
2. CSS 속성  (0) 2020.07.31
'It공부/CSS' Related Articles more
Comments