css 적용방식은 3가지가 있습니다. 적용 방식을 알아보기 위해 일단 2가지 css 속성을 알려 드리겠습니다.
background-color : green; /* 해당 요소의 배경색을 설정합니다. */
color : white; /* 해당 요소의 글자 색을 설정합니다. */
css 속성과 값에 대해서는 적용 방식을 알아본 후에 차근차근 설명드리도록 하겠습니다. 일단은 배경색을 초록색으로 지정하고 글자색은 하얀색으로 지정했다는 것만 알아두시고 아래 내용을 봐주세요
1. 인라인 스타일 적용 방식
인라인 스타일(inline style) 방식은 html 태그 요소에 style 속성을 이용하여 css를 태그 요소의 속성처럼 사용하는 방식입니다.
<body>
<h1>css 적용방법</h1>
<h2>1. 인라인 스타일 방식</h2>
<p>인라인 스타일(inline style) 방식은 html 태그 요소에 style 속성을 이용하여 css를 태그 요소의 속성처럼 사용하는 방식입니다.</p>
<p style="background-color:green; color:white">태그 안에서 사용 되었기 때문에 해당 요소에만 적용됩니다.</p>
</body>
html 문서의 두 번째 P 요소를 보시면 지난 강좌처럼 style 속성 안으로 css가 들어와 있습니다. 바로 이렇게 사용하는 것이 인라인 방식입니다.
개발자 도구로 확인한 빨간 박스를 봐주세요 background-color와 color가 잘 적용이 되었습니다. 밑줄 친 부분은 element.style이라고 나오네요. 이렇게 인라인 방식으로 작성한 css는 이 element.style에 나오게 됩니다. 하단 파란 박스는 user agent stylesheet입니다. html 강좌에서 각 태그마다 기본사이즈를 확인했었습니다. 설정하지 않아도 브라우저가 기본적으로 설정한 css 가 바로 user agent stylesheet입니다.
2. 내부 스타일 시트 적용 방식
내부 스타일 시트(internal style sheet) 방식은 html 문서의 head 태그 안에 style로 지정하여 사용하는 것입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css 적용방법</title>
<style>
p{
background-color: green;
color: white;
}
</style>
</head>
<body>
<h1>css 적용방법</h1>
<h2>1. 인라인 방식</h2>
<p>인라인(inline) 방식은 html 태그 요소에 style 속성을 이용하여 css를 태그 요소의 속성처럼 사용하는 방식입니다.</p>
<p>태그 안에서 사용 되었기 때문에 해당 요소에만 적용됩니다.</p>
</body>
</html>
head 태그 안에 style 태그가 작성되었습니다. 스타일 태그 안에 css를 확인하시면 p 태그 요소 style은 이렇게 하라라고 브라우저에게 알려준 게 됩니다. 이렇게 사용하는 방식이 바로 내부 스타일 시트 방식입니다.
개발자도구의 빨간 박스를 보시면 style 태그로 지정한 것이 똑같인 Styles 탭에 적용된 게 확인됩니다. 빨간 밑줄을 보시면 howinternal.html 문서의 9번째 라인에 이속성이 선언 됐다는 것을 알려주고 있습니다. 파란 박스 user agent stylesheet는 인라인 스타일 방식과 마찬가지로 확인됩니다. 그리고 인라인 스타일 적용방식이 아니니 초록 박스 element.style은 비어 있는 것입니다.
하지만 인라인 스타일 방식과는 다르게 스타일이 두 군데에 사용되었습니다.
일단 기본 사용법을 보겠습니다.
기본적인 사용법은 위와 같이 선택자와 선언블럭으로 나누어집니다.
선택자에서 어떤 요소를 선택할지 정하고 중괄호({})를 통해 선언블럭을 만듭니다. 중괄호(선언블록) 안에 적용할 style의 속성명과 속성값을 정하고 선언의 종료를 알리는 세미콜론으로 마무리하면 하나의 선언이 끝나며 선언은 같은 방법으로 계속적으로 선언을 할 수 있습니다. 속성명과 속성값은 콜론(:)으로 구분합니다. 그리고 선언 블럭에 마지막 선언의 세미콜론(;)은 생략해도 됩니다.
간혹 선언이 끝난 후 세미콜론(;)을 잊고 작업할 경우가 있는데 이럴 경우 style을 익식 하지 못합니다. 계속적으로 다른 선언의 속성명이 붙어서 나오기 때문에 속성값을 알 수 없게 되는 것이죠. 마지막 선언이 아니라면 반드시 세미콜론을 사용해야 합니다. 무조건 선언이 끝나면 ";"를 붙인다라고 기억하시는 것이 좋습니다.
위의 경우 p 태그로 사용된 요소는 초록색 배경에 하얀색 글씨로 나타내라라고 브라우저에게 알려주었습니다. 그런데 html 문서를 보니 p태그가 두 번 사용되었습니다. 그러니 p 태그의 스타일이 두 번 바뀐 것입니다. 인라인 스타일 적용 시에는 해당 요소에 style 속성에 선언블럭을 바로 사용했기 때문에 해당 요소만 적용됐던 것이고요. 위처럼 head 태그 안에서 style 태그가 미리 선언되는 경우에 p 태그가 10개 사용되었다면 마찬가지로 10개 모두 위의 스타일이 적용 됐을 겁니다.
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
그렇다면 인라인스타일처럼 내가 원하는 tag요소에 스타일을 지정하려면 어떻게 해야 할까요? 이 경우에 등장하는 것이 마크업입니다. 마크업에 대해서는 html 강좌에서 이미 알아본 적 있습니다. id와 class를 이용하는 방법이었죠 그럼 다시 html 요소에 마크업 하고 class를 통해 원하는 요소에만 style을 지정해 보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css 적용방법</title>
<style>
.greenbox-whitetxt {
background-color: green;
color: white;
}
</style>
</head>
<body>
<h1>css 적용방법</h1>
<h2>2. 내부 스타일 시트 방식</h2>
<p>내부 스타일 시트(internal style sheet) 방식은 html 문서의 head 태그 안에 style로 지정하여 사용하는 것입니다.</p>
<p class="greenbox-whitetxt">모든 해당 요소에 적용됩니다.</p>
</body>
</html>
위 소스를 보시면 p 태그 두 번째 요소에 class="greenbox-whitetxt"라고 클래스를 마크업 했습니다. 이렇게 class로 마크업 한 요소는 css에서 "."으로 표현합니다. 다시 말해 css에서 선택자가 "."으로 시작했다면 html 문서에서 태그와는 무관하게 class를 지정한 요소를 선택한 것이 됩니다. 즉 css에서 ". abcd"라는 선택자는 태그명과는 무관하게 class='abcd'로 마크업 한 요소를 선택한 것입니다.
이렇게 원하는 작업이 잘 이루어졌습니다.
그런데 또 의문이 생길 수 있습니다. 인라인 스타일 적용 방식으로 할 수 있는데 왜 굳이 이 방법을 사용할까요?
지금 해 온 방식을 생각해 보시면 답이 있습니다. user agent stylesheet에서 확인하면 p 태그는 바깥쪽 상하여백이 한 글자 크기만큼 존재하고 있습니다. 그런데 여백을 없애고 싶습니다. 이 경우에 인라인 스타일로 하자면 모든 p 태그를 찾아다니면서 style 속성을 지정해 줘야 됩니다. 여간 귀찮은 일이 아니겠죠. 그리고 모든 p태그에 글자 크기를 2배 크게 하고 싶을 수도 있습니다. 인라인 스타일 방식을 생각만 해도 끔찍합니다.
위처럼 class로 마크업 한 장점은 또 있습니다.
태그와는 무관하기 때문에 다른 태그 요소에도 같은 스타일을 적용할 수 있습니다. h1, h2에도 적용해 보면
그대로 초록배경색에 하얀 글씨가 h1, h2, p 태그에 적용된 것이 확인됩니다. 나머지는 글자 크기와 두께 등은 user agent stylesheet에서 상속되고 있습니다.
선택자에 대해서는 따로 강좌가 마련될 것이고요. 지금은 내부 스타일 시트 방식과 인라인 스타일 방식이 잘 구분되면 좋겠습니다.
3. 외부 스타일 시트 적용 방식
외부 스타일 시트(external style sheet) 방식은 style 태그를 외부에서 css파일로 만들고 html 문서에서 불러와서 사용하는 방식입니다. 이 방식이 실제로 가장 많이 사용되고 있는 방식이고 가장 좋은 방식입니다. 반드시 이해하고 사용하시 길 바랍니다.
내부 스타일 시트 방식은 인라인 스타일 방식의 코딩을 획기적으로 줄일 수 있습니다. 하지만 하나의 웹문서의 경우겠죠. 만약 100개의 웹문서가 위와 같은 .greenbox-whitetxt라는 클래스를 가진 html문서라고 가정하겠습니다. 근데 어느 날 누가 보고 "야! 이건 노란색이 좋겠어! 노란색이 딱이야! 그럼 완벽해!"라고 한다면, 아니 직장 상사가 "노란색으로 바꿔!"라고 한다면 100개의 웹문서를 열어서 color:white를 color:yellow로 바꿔야 합니다. 100번 해야 하지요..
그런데 위 html 요소에서 style태그만 따로 분리해서 하나의 파일로 가질 수만 있다면 단 한 번의 수정으로 100개의 웹문서가 모두 수정이 되는 것이 됩니다. 어떠신가요? 반드시 이 방식으로 선택하시겠죠.
그럼 css 파일을 만들어 보겠습니다.
@charset "utf-8";
/* CSS Document */
p {
margin-block: 0px;
}
.greenbox-whitetxt {
background-color: green;
color: white;
}
작성법은 간단합니다. css 기본 문법대로 작성하면 됩니다. 단지 최상단에 문자 인코딩 방식만 위와 같이 선언해 주시면 됩니다. 나머지는 선택자와 선언블록을 통해 style을 연속적으로 작성하시면 됩니다. 그리고 html 문서의 확장자가 html이었듯이 css파일의 확장자는 css로 저장해 주시면 끝입니다.
만약 위와 같이 작성하고 파일명을 style1.css로 저장했다면 이제 html 문서에서 위 css파일을 불어와야 합니다.
불러오는 방식은
위의 link 태그를 html 문서의 head 태그 안으로 작성하시면 됩니다.
link 태그는 html head 태그에서 언급한 적이 있습니다. 반드시 head 태그 안에서만 사용되며 외부 소스와 의 관계를 지정하는 태그입니다.
rel 속성은 불어올 소스의 형태이고, type 속성은 미디어 타입을 지정, href는 css 파일 경로를 입력하면 됩니다.
css 파일을 가지고 올 때 위 소스 그대로 사용하면 되고요 href만 경로지정하시면 되겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css 외부 스타일 시트 방식</title>
<link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
<h1>css 적용방법</h1>
<h2>3. 외부 스타일 시트 방식</h2>
<p>외부 스타일 시트(external style sheet) 방식은 style 태그를 외부에서 css파일로 만들고 html 문서에서 불러와서 사용하는 방식입니다. </p>
<p class="greenbox-whitetxt">모든 해당 요소에 적용됩니다.</p>
</body>
</html>
위와 같이 head안에 style을 지정하지 않고 style1.css 파일을 불러와서 사용했습니다.
적용된 페이지를 개발자 도구로 확인해 보시면 .greenbox-whitetxt가 잘 적용된 것을 확인할 수 있습니다.
혹시 눈치채셨나요? style1.css에서 p 태그 요소에 style을 하나 더 지정했습니다. 바깥 여백을 모두 0px로 지정했습니다.
css는 적용 순서도 매우 중요합니다. 일단 웹브라우저에서 페이지가 로딩되면 먼저 user agent stylesheet의 스타일이 먼저 적용됩니다. 그리고 불러드린 style1.css 파일의 스타일이 적용됩니다.
위 style1.css파일을 보시면 p태그 요소에 margin-block을 0px로 했습니다. 원래 user agent stylesheet에서 위아래 여백으로 1em을 갖고 있었으나 나중에 style1.css에서 0px로 지정했으니 ①에서 취소 됐다는 표현으로 취소선이 들어간 겁니다. 앞으로는 이 취소선을 자주 만나실 수 있으실 겁니다. 다음에 태그 style이 ② 로 적용. 그다음에 클래스 스타일이 ③ 으로 적용이 되었습니다. 인라인 방식이 있었다면 최종 ④ element.style에 내용이 들어 있었을 겁니다.
개발자 도구 Styles 탭에선 아랫부분부터 적용된 것이 확인됩니다. 아래에서 위의 순서로 적용된다 것을 알 수 있습니다.
'강좌 및 설정 > CSS 기본 강좌' 카테고리의 다른 글
| CSS 선택자 네번째 (그룹 선택자) (1) | 2022.12.09 |
|---|---|
| CSS 선택자 세번째 (결합자) (0) | 2022.12.08 |
| CSS 선택자 두번째 (class 다중 적용) (0) | 2022.12.07 |
| CSS 선택자 첫번째 (기본 선택자와 우선순위) (0) | 2022.12.04 |
| CSS 의 이해 및 맛보기 (0) | 2022.11.30 |