2018. 1. 8. 11:53ㆍ웹 표준 퍼블리싱 바이블
1. CSS는 적용할 대상인 선택자(selector)를 지정해야 하고, 중괄호({, })로 감싼 영역에 속성(Attribute)과 값(value)을 작성합니다. 속성은 얼마든지 작성할 수 있으며 '세미콜론(;)'으로 구분합니다. 선택자(selector)에는 적용하고자 하는 요소의 태그명, 클래스 명, 아이디명 등을 지정할 수 있습니다.
selector{Attribute: value;}
|
1-1. 각 요소에 직접 적용하는 CSS
각 HTML 시작 요소에 직접 CSS를 적용할 수 있습니다. 이방법은 웹 표준의 관점에서 본다면 아주 나쁜 방법인데요, 각 요소마다 스타일을 적용한다는 것을 구조를 작성하는 HTML과 표현을 담당하는 CSS를 분리해야 한다는 웹 표준 규정을 무시하는 것이기 때문입니다. 그럼에도 불구하고 이 방법은 일부 문서나 게시판의 내용을 만들 때 제한적으로나마 유용하게 사용됩니다.
※E-mail을 확인할 경우 "네이버 메일"이나 "다음 메일", 혹은 "지메일" 등 여러 서비스를 사용하게 됩니다. 이 경우 해당 사이트의 CSS가 적용될 가능성이 있는데 시작 요소에 직접 스타일을 작성하면 우선순위가 높아 메일 내용이 의도하지 않은 상태로 보이는 문제를 줄일 수 있습니다.
<p style="color: pink; background: beige;"> <span style="font-weight: bold;">앙큼한유채`s Story</span> </p>
|
단락의 글자 색상과 배경 색상을 지정했고, 단락 내에서 시작 부분의 글씨를 두껍게 처리했습니다.
1-2. style요소를 활용한 적용방법
CSS스타일링의 내용만 따로 모아두면 관리가 용이할 텐데요. <head>요소 안에 <style>요소를 사용하면 CSS스타일링을 모아둘 수 있습니다. 단, 주의할 것은 <style>요소 안에는 html 태그가 들어갈 수 없으므로 주석을 표현하는 경우 CSS의 주석(/*주석의내용*/)을 사용한다는 점입니다.
앞서 만들어 본 예제를 <style>요소를 이용해서 만들면 다음과 같습니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title>앙큼한유채`s Story</title> <style type="text/css"> p{color: pink; background: beige;} span{font-weight: bold;} </style> </head> <body> <p> <span>앙큼한유채`s Story</span> </p> </body> </html>
|
※HTML5에서는 <style>요소가 <body>요소 안에 있어도 되며, "type"속성 또한 생략 가능합니다.
1-3. SCOPED 속성의 적용
HTML5에서는 <style>요소에 "scoped"속성을 사용할 수 있습니다. "scoped"속성은 해당 <style>요소의 부모요소 안에서만 적용되는 스타일을 지정할 경우 사용합니다. "scoped" 속성은 아직 대부분의 브라우저에서 적용되지 않아, 파이어폭스 브라우저에서만 확인할 수 있습니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title>앙큼한유채`s Story</title> </head> <body> <div> <style scoped=""> /*scoped속성은 이 스타일이 적용될 범위를 지정합니다.*/ p{background: pink; color: beige;} </style> <p> <span>앙큼한유채`s Story</span> </p> </div> <p> <span>앙큼한유채`s Story</span> </p> </body> </html>
|
※파이어폭스 브라우저에서만 지원하고 있습니다.
1-4. CSS 내용을 외부 파일로 만들어 연결하는 방법
앞서 적용한 <style>의 내용을 외부 파일로 작성하여 연결하는 방법이 있습니다. 외부에 만들게 되는 파일은 확장자가 ".css"로 지정된 CSS파일입니다. 이때, 연결은 <link>요소를 활용합니다.
index.html
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title>앙큼한유채`s Story</title> <link rel="stylesheet" type="text/css" href="css/yuchae.css"> </head> <body> <p> <span>앙큼한유채`s Story</span> </p> </body> </html>
|
※ "rel"속성은 현재 문서와의 관계를 나타내는 속성이며, "href"속성으로 CSS파일의 경로를 지정하고, "type"속성으로 연결한 문서의 타입을 지정합니다. 이 경우, 앞서 언급한 바와 같이 HTML5 문서라면 "type"속성을 생략할 수 있습니다.
외부에 만들게 되는 CSS 파일의 내용은 다음과 같습니다.
yuchae.css
@charset "utf-8"; p{background: pink; color: beige;} p span{font-weight: bold; color: brown;} |
시작부분에 문자 코드셋을 반드시 지정하도록 합니다. 문자 코드셋을 지정하지 않았을 경우, 연결된 CSS파일이 일부 브라우저에서 제대로 적용되지 않는 경우가 있습니다.
※ 문자 코드셋은 HTML 파일에서 지정한 것과 같은 형식을 지정합니다. 웹 표준에서는 많은 문자 코드를 표현할 수 있는 "utf-8"을 지정하도록 권장하지만, 경우에 따라 "euc-kr"과 같이 특정 문자셋을 지정하기도 합니다.
'웹 표준 퍼블리싱 바이블' 카테고리의 다른 글
| 4-1. CSS의 적용 방법과 기본문법 - 3 (0) | 2018.01.12 |
|---|---|
| 4-1. CSS의 적용 방법과 기본문법 - 2 (0) | 2018.01.11 |
| 3-12. 아이프레임(<iframe>)의 다양한 속성 알아보기 (0) | 2017.12.26 |
| 3-11. 이미지와 관련된 요소들 (0) | 2017.12.26 |
| 3-10. 앵커(Anchor)의 표현 (0) | 2017.12.25 |