CSS 소개, 뜻, 그리고 사용 방법 알아보기
안녕하세요
오늘부터 CSS (Cascading Style Sheet)를 알아볼게요
그럼 먼저 CSS가 뭘까요?
CSS는 Cascading Style Sheet의 약자로 HTML를 예쁘게 꾸밀수있게 도와주는 웹 스타일링 언어 입니다
HTML이 민낯이라면 CSS는 민낯에 화장을 하는거라고 생각하면 됩니다
좀더 자세하게 풀어보자면
C - Cascading(카스케이딩)
카스케이딩의 사전적 의미는 '아래로 흘러가다' 입니다
S - Style(스타일)
디자인측면에서의 스타일을 말합니다
S - Sheet(시트)
문서를 말합니다
이렇게 '아래로 흘러가는 디자인 스타일 문서' 라고 풀수 있습니다?
뭔 개소리인가 싶죠?
CSS의 특성상 제일 마지막에 작성된 스타일이 HTML요소에 적용됩니다
예를 들어서
<p>나는 어떤 색 일까요?</p>이 문장의 색을 바꾼다고 할게요
그러면 CSS에서는
p {
color: red;
}이렇게 스타일을 정합니다
그러면 문장의 글 색이 빨간색으로 되죠
그런데 만약에 CSS가
p {
color: red;
}
p {
color: blue;
}이렇게 되있으면 어떨까요?
CSS의 C 인 Cascading을 여기서 볼수 있습니다
위에서 처럼 스타일이 중복될경우 스타일이 위에서 아래로 적용되기때문에 제일 마지막에 작성된 스타일이 문장에 적용됩니다
그래서 문장의 글 색이 파랑으로 되는거죠
그럼 CSS를 사용하는 방법들을 알아볼까요?
CSS를 사용하는 방법에는 3가지가 있습니다
-
Inline (인라인)
-
<style> 요소
-
CSS 문서
CSS Inline Style | CSS 인라인 스타일
이라인 스타일은 HTML요소에 직접 스타일을 적는 방법입니다
예를 들어서
<p>색을 바꿔주세요</p>이 문장의 색을 인라인 스타일 방법을 사용해서 바꾸려면 <p>요소에 style 속성을 사용하면 됩니다
<p style="color: red;">색을 바꿔주세요</p>이렇게 style속성에 내가 원하는 부분(색)과 그 값(색상)을 제공하면 문장의 글 색이 바뀌죠
style속성으로 글 색만 바꿀수 있는건 아닙니다. 거의 원하는 모든것들을 바꿀수 있습니다. 예를 들어서 바탕 색, 테두리 색, 글꼴, 등등
여기서 퀴즈:
이 방법의 문제점은 뭘까요?
.
.
.
.
.
네, 요소 하나하나 일일이 style속성을 사용해서 스타일을 해야한다는 거죠
이게 뭐가 문제냐고요?
만약에 웹 페이지에 <p>요소가 100개가 있어요, 그런데 그중 80개가 같은 스타일이어야 해요
80개 뭐 금방 하지않아? 라고 생각하셨나요?
그럼 그 80개가 800개 라면요?
이런 이유로 인라인 스타일이 제일 비효율적인 방법입니다
그럼 인라인보다 좀더 편한 방법을 볼까요?
CSS using <style> tag | <style>요소를 사용한 CSS
<style>요소는 HTML문서에서 <head>안에서 사용되는 요소입니다
요소 이름에서 알수있듯이 CSS를 작성할수 있는 요소입니다
이 요소가 <head>안에서 사용되는 이유는 CSS가 먼저 로딩되야 웹 페이지의 디자인이 적용되기 때문입니다
그럼 <style>을 사용하는 방법을 볼까요?
우선 <head>안에 <style>을 만들어 주세요
<head>
<style>
</style>
</head>
그리고 <style>안에 CSS를 작성하면 됩니다
<style>
p {
color: red;
}
img {
width: 100%;
}
</style>*CSS 작성하는 방법은 다음편에서 보실수 있습니다*
이 방법은 인라인보다는 훨씬 편하죠
<p>요소가 몇개가 있든지 그냥 <style>안에서 모든 <p>요소의 스타일을 한번에 지정할수있으니까요
여기서 퀴즈:
이 방법의 문제점은 무었일까요?
.
.
.
.
.
각 웹 페이지에 <style>을 복붙해야 한다는 단점이 있습니다
이게 뭔 단점인가 싶죠?
웹사이트의 페이지가 3페이지 미만이면, 뭐 이 방법을 사용해도 그렇게 큰 문제/불편함이 없는데
웹사이트의 페이지가 많은경우는 번거로운 작없이죠
그리고 다른 단점은
만약 어느 한 페이지에서 스타일을 바꾸면, 모든 페이지에서도 그 스타일을 바꿔줘야 합니다
위 두 단점은 그렇게 큰 단점은 아니지만, 비효율적이고 번거로운 작업이죠
그럼 이제 마지막 방법인 CSS 문서를 사용하는 방법을 볼까요?
Using CSS File | CSS 문서 사용하기
CSS도 HTML처럼 문서화해서 사용할수 있습니다
CSS문서를 HTML에서 사용하려면 두 문서를 서로 연결시켜주면 됩니다
CSS문서와 HTML문서를 연결하는 방법은 <link>요소를 사용해서 할수 있습니다
먼저 .css 확장자를 사용해서 CSS 파일을 만들어주세요. 파일 이름은 원하시는 이름으로 하세요.
저는 style.css 라고 만들었습니다
그리고 <head>안에 <link>요소를 만들어주세요
<head>
<link />
</head>
그리고 <link>요소에 href 속성을 사용해서 만든 CSS파일을 연결하세요
<link rel="stylesheet" href="style.css"/><link>요소는 셀프클로징 요소입니다
rel 속성은 이 HTML문서와 <link>로 연결된 문와의 관계를 뜻합니다
CSS문서는 HTML문서의 스타일 문서이니까 rel="stylesheet"
rel="stylesheet"을 사용합니다
이렇게 HTML문서와 CSS문서가 연결되었으면 이제 CSS문서에 스타일을 작성하면 됩니다
이 방법이 위에서본 두가지 방법보다 효율적인 이유는
-
필요한 스타일들을 한 문서에 정리할수 있다
-
스타일을 수정하려면 한곳(CSS문서)에서만 수정하면 된다
-
스타일이 필요한 HTML문서에 <link>를 사용해서 스타일을 가져올수있다
CSS의 소개, 뜻, 그리고 사용방법 이었습니다
다음편에서는 CSS의 선택자(selector)를 알아볼게요
수고하셨습니다
끝!
'웹' 카테고리의 다른 글
| CSS 쉽게 배우기 | 패딩(padding)/마진(margin)/박스 모델(box model) (0) | 2021.01.10 |
|---|---|
| CSS 쉽게 배우기 | CSS 선택자(Selector) (0) | 2021.01.04 |
| HTML 쉽게 배우기 | 디브 <div> 사용법 (0) | 2020.12.28 |
| HTML 쉽게 배우기 | 표 <table> 만들기 2 (0) | 2020.12.27 |
| HTML 쉽게 배우기 | 표 <table> 만들기 (1) | 2020.12.21 |
댓글