스타일과 스타일 시트
왜 스타일을 사용할까?
웹문서에서 스타일이란 HTML 문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소들의 배치 방법 등 문서의 겉모습을 결정 짓는 내용들을 가리킨다. 줄간격이나 표의 테두리 모양을 바꾸는 것도 스타일의 예가 된다. HTML뿐만 아니라 스타일도 사용하는 이유는 다음과 같다.
웹문서의 내용과 상관없이 디자인만 바꿀 수가 있다.
HTML은 웹문서의 내용을 나열하고, CSS는 웹문성의 디자인을 구성하므로, 웹문서의 내용과 디자인이 구분되어있다. 따라서 내용만 수정해야 하거나, 디자인만 수정해야할 때, 서로의 영역에 영향을 미치지 않고, 원하는 부분만 수정할 수 있다는 편리함이 있다.
다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수가 있다.
CSS를 이용하면 HTML로 작성된 내용을 그대로 두고 대상 기기에 맞게 CSS만 바꾸어 주면 같은 내용을 여러 기기에 어울리게 적용시킬 수가 있다.
스타일 형식
스타일의 형식은 다음과 같다. p는 선택자(selector)라고 하며, 앞으로 만들 스타일 규칙을 어디에 적용할 지를 나타낸다. 앞의 예시는 HTML에서 <p> 태그가 적용된 요소, 즉 텍스트 단락에 중괄호 사이의 스타일을 적용하겠다는 의미이다. 중괄호 안에서 콜론 왼쪽에 위치하는 것은 속성이고, 오른쪽에 위치하는 것은 속성값이다.
p {text-align:center;}속성과 속성 값 쌍 다음에는 세미콜론으로 구분한다. 따라서 중괄호 안에 속성 두개를 적용한다면 다음과 같이 작성할 수 있다.
h2 {font-size:20px; color:orange;}스타일을 표기하는 방법
스타일 규칙은 세미콜론으로 구분해 중괄호 안에 나열하면 상관없으나 앞에서 본 것처럼 한줄로 길게 쓰면 속성이 여러개일 경우, 구별하기 쉽지 않다. 따라서 개발자가 읽기 쉽고 유지 보수가 쉬우려면 여러 줄에 걸쳐 작성하는 것이 좋다.
h2 {font-size:20px;
color:orange
}스타일 주석
스타일에도 주석을 덧붙일 수가 있다. 주석을 표시할 때에는 /*와 */ 사이에 내용을 입력하는데 주석을 한 줄만 입력하거나 여러 줄을 입력할 수도 있다. 스타일 소스를 작성할 때는 주석을 이요해 어떤 용도로 사용한 규칙인지 표시하는 것이 좋다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* h2 제목과
텍스트 단락의
스타일을 조절해보자 */
h2 {
font-size:20px;
color:orange;
}
p {
color:blue;
}
</style>
</head>
<body>
</body>
</html>스타일과 스타일 시트
웹 문서 안에는 여러 개의 스타일 규칙이 사용되는 경우가 많다. 이런 스타일 규칙들을 한 눈에 확인하고 필요할 때마다 수정하기도 쉽도록 한 군데 묶어놓은 것을 스타일 시트라고 한다. 스타일 시트는 다음 두 가지로 나뉜다.
- 내부 스타일 시트 : 문서 안에서 사용할 규칙들을 정의
- 외부 스타일 시트 : 별도의 스타일 파일을 만들어 연결해 사용
내부 스타일 시트
먼 웹 문서 안에서 사용할 스타일을 문서 안에 정리한 것을 내부 스타일 시트라고 부른다. 스타일 정보는 웹 문서를 브라우저 화면에 표시하기전에 결정되어야 하므로 모든 스타일 정보는 <head> 태그 안에서 <style> 태그로 정의되어야 한다.
다음 예제는 내부 스타일 시트 예로서 <section> 태그 안에 있는 텍스트 주위에 테두리를 그리는 스타일을 문서 안에 삽입했다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
section {
width:500px;
padding:15px;
border:5px solid gray;
}
</style>
</head>
<body>
<section>
<h2>Who am I?</h2>
<p>프론트엔드 웹 기술(Front-end Web Tech.)에 관심이 많습니다. <br>
현재 제주의 한 시골 마을에서 코딩 중입니다.</p>
</section>
</body>
</html>외부 스타일 시트
한가지 스타일 시트를 웹 사이트를 만들 때 필요한 여러 웹문서에 적용하기 위해 스냥 스타일을 별도의 파일로 저장해놓고 필요할 때마다 파일에서 가져와 사용하는 것일 일반적이다. 이렇게 따로 저장해놓은 스타일 정보를 외부 스타일 시트라고 하고, '.css'라는 파일 확장자를 사용한다.
외부 스타일 시트를 사용할 때는 <style> 태그 없이 <link> 태그만을 사용해 미리 만들어놓은 외부 스타일 시트 파일을 연결한다.
<link rel="stylesheet" href="외부 스타일 파일 경로"다음 예제는 style.css라는 외부 스타일 시트 파일을 링크한 웹문서이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
section {
width:500px;
padding:15px;
border:5px solid gray;
}
</style>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<h2>Who am I?</h2>
<p>프론트엔드 웹 기술(Front-end Web Tech.)에 관심이 많습니다. <br>
현재 제주의 한 시골 마을에서 코딩 중입니다.</p>
</section>
</body>
</html>그리고 이 style.css 파일은 제목 글자와 색과 본문 글자 크기, 줄 간격에 대한 정보를 담는다.
h2 {
color:blue;
}
p {
font-size:0.9em;
line-height:2.0;
}인라인 스타일
간단한 스타일 정보라면 스타일 시트를 사용하지 않고, 스타일을 적용할 대상에 직접 표시할 수도 있는데, 이 방법을 인라인 스타일이라고 한다. 스타일을 적용하고 싶은 태그에 style 속성을 사용해 style="속성:속성 값;" 이렇게 작성하면 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>블루베리와 항산화 효능</h1>
<p style="color:blue;">블루베리는 항산화제인 .....</p>
<p> 매사츄세츠인 보스톤에 .......</p>
</body>
</html>
주요 선택자
전체 선택자 - 모든 요소에 스타일 적용하기
전체 선택자(universal selector)는 스타일을 모든 요소에 적용할 때 사용한다. 주로 모든 하위 요소에 한꺼번에 스타일을 적용할 때 사용하는데, 전체 선택자로는 *를 사용한다.
* {
속성:속성 값; 속성:속성값;....
}전체 선택자는 문서의 여백이나 글꼴 크기 등 기본 스타일을 초기화할 때 사용한다. 브라우저 창에 문서 내용이 창에 바짝 붙지 않도록 내용 바깥 쪽에 마진을 두고 문서 내용 안쪽에는 패딩이라는 기본 여백을 두는데, 이런 여백 때문에 디자인이 깔끔하지 않을 경우, 전체 선택자를 이용해 웹 문서 전체에 마진과 패딩 여백을 0으로 지정할 수 있다.
태그 선택자 - 특정 태그를 사용한 요소에 스타일 적용하기
태그 선택자(tag selector)는 특정 태그가 쓰인 모든 요소에 스타일을 적용한다. 예를 들어, p 선택자를 정의하면 웹 문서의 모든 p요소들 즉 모든 문단에 스타일이 적용된다.
웹 문서의 모든 텍스트 단락의 글자 크기(font-size)를 12픽셀로 하고 글꼴을 돋움으로 하겠다면 p 태그 선택자를 다음과 같이 정의하면 된다.
p {
fontsize: 12px;
font-family: 돋움;
}다음 예제에서 한가지 태그 선택자는 <h2> 태그가 쓰인 요소의 텍스트 색상을 파란색으로 지정하는 것이고, 다른 한 가지 태그 선택자는 <p> 태그가 적용되는 모든 텍스트의 크기를 12px로 지정하고 20px 정도의 여백을 두는 것이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
<style>
h2 {
color:blue;
}
p {
font-size:12px;
margin-left:20px;
}
</style>
</head>
<body>
<h1>블루베리에 관한 연구</h1>
<h2>블루베리와 항산화 효능</h2>
<p>블루베리는 ..... 합니다.</p>
<h2>블루베리와 노화</h2>
<p>USDA ..... 발견하였습니다.</p>
</body>
</html>태그와 요소는 어떻게 다를까?
태그는 태그 자체를 기리키며, 요소는 태그가 적용된 것을 가리킨다. 다음 소스를 확인해보자.
<p> 텍스트 단락을 지정하는 태그는 p 태그 </p>이 소스에서 <p> 태그와 </p> 태그가 '태그'이고 태그를 포함해 <p> 태그가 적용된 텍스트 단락 부분이 p 요소이다. p 태그에 적용되는 스타일이라는 표현은 엄밀히는 p 태그 자체게 적용된다는 뜻이 되므로 틀린 표현이며, p 요소에 적용되는 스타일이라고 표현하는 것이 옳다.
클래스 선택자 - 특정 부분에 스타일 적용하기
만약 같은 종류의 태그라도 어떤 곳에서는 다른 스타일을 사용하고 싶다면 어떻게 해야할까? 이처럼 특정 부분에만 스타일을 적용할 때 사용하는 것이 클래스 선택자(class selector)이다. 클래스 선택자는 클래스 이름을 사용하는데, 클래스 이름은 기억하기 쉬우면서도 태그 이름과 겹치지 않는 이름을 임의로 지정하면 된다. 또한 클래스 이름 앞에는 반드시 마침표가 있어야 한다. 다음 소스는 .bluetext라는 클래스 스타일이다.
.bluetext {
color:blue;
}이렇게 작성해놓고 나중에 이 스타일을 적용하고 싶은 요소의 태그에서 class="bluetext"처럼 속성을 지정하면 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.bluetext {
color:blue;
}
</style>
</head>
<body>
<h2 class="bluetext">이지스퍼블리싱의 미션</h2>
<p>사람에게 구체적으로 도움을 주는 책</p>
<p class="bluetext"> 정보의 지름길을 만들어 빠르게 원하는 곳으로 가도록 도와주는 책.
손에 잡히는 이익을 얻을 수 있도록 도움이 되는 책을 만들고 싶습니다.</p>
</body>
</html>텍스트 일부에만 클래스 스타일을 적용할 수도 있다. 이 때는 <span> 태그를 사용해서 스타일을 적용할 텍스트를 묶고 클래스 스타일을 지정한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.bluetext {
color:blue;
}
</style>
</head>
<body>
<h2 class="bluetext">이지스퍼블리싱의 미션</h2>
<p>사람에게 구체적으로 <span class="bluetext">도움</span>을 주는 책<br>
우리는 열심히 사는 사람들에게 도움이 되고 싶습니다.</p>
</body>
</html>만약 특정 태그에만 클래스 선택자를 적용하고 싶다면 클래스 선택자 앞에 태그 이름을 함께 써서 클래스 스타일을 적용할 수도 있다. 예를 들어 어떤 클래스 스타일을 만들 때, 이 클래스 스타일을 특정 태그에만 적용하고 싶다면, "태그명.클래스명" 이렇게 하나의 선택자로 작성이 가능하다. 이 스타일은 다음 소스처럼 지정된 태그에서 해당 클래스 스타일을 사용했을 때만 적용된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h2.accent {
background-color:#222;
color:#fff;
padding:5px;
}
.bluetext {
color:blue;
}
</style>
</head>
<body>
<h2 class="accent">"사람을 구체적으로 도와주는 책"</h2>
<h2 class="bluetext">이지스퍼블리싱의 미션</h2>
<p>사람에게 구체적으로 <span class="bluetext">도움</span>을 주는 책</p>
</body>
</html>한번에 둘 이상의 클래스 스타일을 적용할 수도 있다. 이 경우에는 공백으로 구분해서 두 개의 스타일을 나란히 적는다.
다음 소스는 글자색을 갈색으로 지정하는 .browntext 스타일과 글자를 굵게 표시하는 .boldtext 스타일을 따로 만든 후, 필요한 텍스트에 .browntext 스타일과 .boldtext 스타일을 함께 지정한 예제이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.browntext {
color:brown;
}
.boldtext {
font-weight:bold;
}
</style>
</head>
<body>
<h2 class="accent">사람을 구체적으로 도와주는 책</h2>
<p>이지스 퍼블리싱(주)의 책에는 <span class="browntext boldtext">'사람들에게...'</span></p>
</body>
</html>id 선택자 - 특정 부분에 선택자 적용하기
id 선택자(id selection)도 클래스 선택자와 마찬가지로 웹 문서 안의 특정 부분에 스타일을 지정할 때 사용하지만 마침표 대신 # 기호를 사용한다. 클래스 선택자는 문서 안에서 여러번 적용이 가능하지만, id 선택자는 문서 안에서 한번만 사용 가능하다. 주로 문서의 레이아웃과 관련된 스타일을 지정하거나 자바스크립트 프로그램에서 웹 요소들을 구별하기 위해 자주 사용한다.
다음 예제에서는 문서의 내용 부분을 중앙에 배치하기 위해 내용 부분을 <div id="container"> 요소로 묶어놓고, 스타일 시트에서 #container라는 id 선택자를 사용해 문서 중앙에 배치하고 점선 테두리를 그리도록 스타일을 정의하고 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
#container {
width:600px;
padding:15px;
border:1px dotted gray;
}
h2.accent {
background-color:#222;
color:#fff;
padding:5px;
}
.bluetext {
color:blue;
}
</style>
<body>
<div id="container">
<h2 class="accent">"사람을 구체적으로 도와주는 책"</h2>
<h2 class="bluetext">이지스퍼블리싱의 미션</h2>
<p>사람에게 구체적으로 <span class="bluetext">도움</span>을 주는 책</p>
</div>
</body>
</html>그룹 선택자 - 둘 이상 요소에 같은 스타일 적용하기
여러 선택자에 같은 스타일이 사용되는 경우에는, 쉽표로 구분하여 여러 선택자를 나열한 후, 스타일을 한번만 정의할 수가 있다. 예를 들어, <h1> 태그를 사용한 제목과, <h2> 태그를 사용한 제목을 화면 중앙에 정렬하려면 그룹선택자를 이용해 한꺼번에 정의가 가능하다.
h1, h2 {
text-align:center;
}캐스케이딩 스타일 시트(CSS)
캐스 케이딩(Cascading)의 의미
CSS에서 C는 Cascading의 약자로, 위에서 아래로 흐르는 스타일 시트라는 의미를 내포한다. 즉, 캐스 케이딩은 선택자에 적용된 많은 스타일 중, 어떤 스타일을 나타낼지를 결정함을 뜻한다.
가령, 텍스트 단락의 글자 색은 미리 정해놓은 스타일 규칙을 따를 수도 있고, 브라우저에서 기본적으로 정해놓은 글자 색을 따를 수도 있고, 웹 제작자가 정해놓은 p선택자의 글자 색을 따를 수도 있다. 이때 텍스트 단락의 글자 색이 어떤 스타일 규칙을 따를 것인지에 관해서 스타일 간의 충돌을 막기위해 사용된 방법이 위에서 아래로 흐르며 적용하는 방법인 것이다. 이 방법에는 두 가지 규칙이 있다.
- 스타일 우선순위 - 스타일 규칙의 중요도, 적용 범위에 따라 우선순위가 결정되고, 그 우선순위에 따라 위에서 아래로 스타일이 적용된다.
- 스타일 상속 - 태그들의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달한다.
스타일 우선순위
스타일 우선순위는 캐스케이딩에서 가장 중요하다. 우선순위란 어떤 스타일을 먼저 적용할 것인지 결정하는 규칙을 말한다. 우선 순위는 다음 세가지 개념에 따라 지정된다.
얼마나 중요한가?(Importance)
CSS 선언의 중요성은 스타일이 어디서 선언되었는 가에 따라 달라진다. 아래 순서는 가장 중요한 것부터 차례로 나열한 것이다.
- 사용자 스타일 시트의 중요 스타일
사용자 스타일 시트란 저시력자나 색약자 등과 같이 특별한 조건이 필요한 사용자에게 맞게 구성해놓은 스타일 시트를 말한다. 만약 저시력자가 고대비 설정 기능을 이용할 경우, 검정 배경과 흰색 글자가 바뀌고 이것이 사용자 스타일 시트로 저장된다. 이 스타일 시트는 시스템을 통해 만들어졌으므로 제작자가 제어할 수 없다. - 제작자 스타일 시트의 중요 스타일
제작자 스타일 시트는 사이트를 제작하면서 만든 스타일 시트를 말한다. 이 스타일 시트에서 가장 최우선으로 적용해야할 스타일에는 !important를 붙일 수 있다. 이런 중요 스타일은 다른 어떤 스타일보다 우선시 된다. - 제작자 스타일 시트의 일반 스타일
사이트를 제작하면서 만든 스타일 시트로, 제작자가 만든 스타일 사이에서 우선 순위는 적용 범위에 따라 달라진다. - 기본적인 브라우저 스타일 시트
브라우저의 스타일 시트는 브라우저마다 기본적으로 지정하고 있는 스타일이다. 우리가 스타일 시트에서 글자 색을 따로 지정하지 않으면 검은색으로 표시되는 데, 브라우저에서 기본적으로 글자색을 검정색으로 정하고 있기 때문이다.
적용 범위가 어디까지인가?
하나의 요소에 여러 스타일이 적용될 경우, 스타일이 충돌한다면 스타일 적용 범위에 따라 우선순위를 정할 수도 있다. 스타일 적용 범위가 좁을수록, 즉, 정확히 필요한 요소에만 적용할 스타일일 수록 우선순위가 높아진다. 다음 순서는 가장 중요한 것부터 차례대로 나열한 것이다.
- 인라인 스타일
- id 스타일
- 클래스 스타일
- 태그 스타일
소스에서의 순서(Source Order)
스타일 시트에서 중요도와 적용 범위가 모두 같다면 스타일 우선순위를 정하는 것은 소스에서의 스타일 순서이다. 소스에서 나중에 온 스타일이 먼저 온 스타일을 덮어쓴다.
다음 예제는 글자 색을 지정하는 blue로 지정했지만 마지막 <p> 요소에는 인라인 스타일을 사용하고 있기 때문에 이 인라인 스타일이 대신 적용된다. 인라인 스타일의 우선순위가 더 높기 때문이다. <h2>의 요소인 이지스퍼브리싱의 미션이란 텍스트가 있는 요소에도 인라인 스타일을 사용했지만 브라우저에서 확인해보면 이 스타일과 달리 갈색으로 나타나고 있다. 왜냐하면 <h2> 태그 스타일을 지정할 때 !important를 사용하여 인라인 스타일보다 우선순위를 높였기 때문이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
color:blue;
}
h2 {
color:brown !important;
}
</style>
</head>
<body>
<div id="container">
<h2 style="color:green;">이지스퍼블리싱의 미션</h2>
<p>사람에게 구체적으로 도움을 주는 책,<br>
우리는 열심히 사는 사람들에게 도움이 되고 싶습니다.</p>
<p>우리는 책을 출간하기 전에 질문할 것입니니다</p>
<p style="color:red; font-style:italic;">"이 책이 사람들에게 도움이 됩니까?"</p>
</div>
</body>
</html>스타일 상속
웹 문서에서 사용하는 여러 태그들은 서로 포함 관계가 있는데 포함하는 태그를 부모 요소, 포함된 태그를 자식 요소라고 한다. 스타일 시트에서는 자식 요소에서 별도로 스타일을 지정하지 않으면 부모 요소에 있는 스타일 속성들이 자식 요소로 전달되는데 이것을 '스타일 상속'이라고 한다.
예를 들어, 다음 예제에서 <body> 태그는 <h1> 태그와 <h2> 태그, <p> 태그의 부모 요소이다. 그래서 body 태그 스타일이 그대로 그 자식 태그에도 그대로 적용된다. 하지만 <h2> 태그의 경우에는 스타일 시트 안에 h2 태그 스타일이 정의되어 있기 때문에 우선순위에 따라 h2 태그에는 갈색이 적용된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
color:blue;
}
h2 {
font-size:20px;
color:brown;
}
</style>
</head>
<body>
<h1>CSS</h1>
<h2>웹 문서의 디자인과 내용을 분리합니다.</h2>
<p>웹 표준에 의한 웹 문서는 디자인과 내용이 분리되어 있다.</p>
<p>내용은 HTML을 이용해 구성하고, 디자인은 CSS를 이용해 꾸미는 것입니다.</p>
</body>
</html>주의할 점은 부모 요소의 스타일의 모든 속성이 자식 요소로 상속되는 것은 아니라는 점이다. 위의 소스에서 보듯이 글자 색은 자식 요소로 상속되나 부모 요소에 배경 이미지나 배경색이 있었다면 자식 요소에 상속되지 않았을 것이다. <body> 태그에 배경 이미지가 사용되었을 때 자식 요소에도 배경 이미지가 상속되도록 설계되었다면, 배경 이미지가 수없이 반복해 표시되었을 것이다. 따라서 배경 이미지나 색은 상속되지 않고 기본값인 투명으로 지정된다.
CSS3와 CSS 모듈
CSS3란?
CSS3는 이전 CSS2나 CSS1보다 정교하고 화려한 화면을 구성할 수 있고, 애니메이션까지 지원한다. CSS2 규약 안에는 스타일과 관련된 것이 한꺼번에 담겨있으므로 덩치가 크고 복잡하여 한 번에 업데이트가 힘들다는 단점이 있었다. 그래서 CSS3부터는 배경이나 글꼴, 박스 모델 등 수십 개 기능을 주제별로 규약을 따로 만들었다. 이것을 CSS모듈이라고 한다. 모듈 중 일부는 완성된 것도 있지만 아직 개발 중인 것도 있다. 이제 막 제안 단계인 것도 있다. 따라서 브라우저에 따라 지원하는 모듈이 조금씩 다르다.
CSS 표준 규약도 CSS3부터는 모듈 별로 결정되므로 CSS3는 CSS3 표준이라고 묶어 말하기가 어렵다. 이 사이트로 들어가면 CSS 관련 소식과 함께 완료되었거나 진행 중인 CSS 규약을 볼 수가 있다.
[Completed work] 항목은 표준안이 이미 정해진 것이고, [Stable drafts]도 거의 표준안에 가까운 초안들이다.
목록 아래에 있는 [More] 버튼을 클릭하면 현재까지 완료되었거나 진행중인 CSS 규약들, 새로 제안되는 CSS 규약들이 나열되어있는데, 초록색에 가까울수록 안정화된 규약이다.
W3C 표준화 단계
W3C 문서를 보면 그 문서가 표준화 단계 중 어디까지 와 있는지 표시되어 있다. 표준화 단계는 다음의 단계를 거친다. 진행 중이던 내용들은 끝까지 토론을 거쳐 권고안(REC)로 발표되거나 중간에 중단되는데, 중단되었을 경우에는 Note 상태로 공개된다. Note인 것들은 나중에 다시 초안부터 새로 시작할 수 있고, 완전히 폐기될 수도 있다.
- LC(Last Call Working Draft, 최종 검토) - 초안을 최종 검토하는 단계
- WD(Working Draft, 초안) - W3C가 그 멤버뿐만 아니라, 대중, 다른 기술 단체 등 여러 커뮤니티에게 검토를 받기 위해 공개한 문서이다.
- CR(Candidate Recommedation, 후보 권고안) - 광범위하게 검토받고 워킹 그룹의 기술적 요구사항을 만족시킨 것이 검증된 문서로 W3C는 더 많은 구현 경험을 얻기 위해 이 문서를 대중에게 공개한다.
- PR(Proposed Recommendation, 제안 권고안) - 광범위한 기술적 구현과 검토가 끝나 거의 완성된 문서로 최종 승인을 받기 위해 자문 위원회에 보내진다.
- REC(W3C Recommedation, 권고안) - 모든 합의를 끝낸 후, W3C 멤버들과 감독의 승인을 받은 문서로 W3C에서 이 문서가 널리 쓰이길 권장하는 표준 권고안이다.
CSS3와 브라우저 접두사(prefix)
CSS3에서 아직 표준 규약이 아닌 속성들은 브라우저에 따라 다른 방식으로 지원되므로 속성 이름 앞에 접두사를 붙여 브라우저별로 구분해야 한다. 또한 표준 규약이 만들어졌더라도 모든 종류의 브라우저 사용자를 고려해 게속 브라우저 접두사를 붙여 사용하기도 한다. 주로 사용하는 브라우저 접두사는 다음과 같다.
| 접두사 | 설명 |
| -webkit- | 웹키트 방식 브라우저용(사파리, 크롬 등) |
| -moz- | 게코 방식 브라우저용(모질라, 파이어폭스 등) |
| -o- | 오페라 브라우저 |
| -ms- | 마이크로 소프트 인터넷 익스플로러 |
브라우저 접두사를 붙여 사용할 때는 각 브라우저 접두사를 붙인 속성을 먼저 쓰고 표준이 정해진 후 사용할 속성을 맨 마지막에 사용한다. 이렇게 하면 나중에 표준 속성이 결정된 후 앞에 썼던 브라우저 접두사가 붙은 속성들만 지우면 된다.
-webkit-column-count:3;
-moz-column-count:3;
column-count:3;이렇게 접두사를 사용하는 방법은 스타일 시트를 지저분하게 만들고, 디자인을 일관성없게 할 수는 있으나, 모든 브라우저에서 똑같은 결과를 만들어내려면 현재로서는 이것이 최선이다.
브라우저 접두사 자동으로 붙이기
브라우저 접두사를 자동으로 붙이는 방법이 있다. -prefix-free라는 자바스크립트 파일을 이용하면 매번 브라우저 접두사를 붙이지 않고도 편리하게 CSS3 속성을 사용할 수가 있다. 이 사이트에 접속한 후 화면 왼쪽 위에 있는 [Only 2KB gzipped] 부분을 클릭해 js 파일을 다운받아보자. 그리고 html 파일에서 <script> 태그로 다음과 같이 웹 문서에 연결만 하면 브라우저 접두사를 붙이지 않고 CSS3 속성을 사용할 수가 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="prefixfree.min.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box:hover {
transform: rotate(15deg);
}
</style>
</head>
<body>
<div class="box">Mouse Over</div>
</body>
</html>'Front-end > HTML&CSS' 카테고리의 다른 글
| Do it! HTML5 + CSS3 : 3장 이미지와 하이퍼링크 (0) | 2020.11.01 |
|---|---|
| Do it! HTML5 + CSS3 : 2장 텍스트 관련 태그들 (0) | 2020.10.26 |
| Do it! HTML5 + CSS3 : 1장 HTML 기본 다지기 (0) | 2020.10.19 |