웹

CSS 쉽게 배우기 | 소개

Learn, Code, Repeat 2020. 12. 29. 11:42
반응형

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가지가 있습니다

  1. Inline (인라인)

  2. <style> 요소

  3. 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문서에 스타일을 작성하면 됩니다

 

이 방법이 위에서본 두가지 방법보다 효율적인 이유는

  1. 필요한 스타일들을 한 문서에 정리할수 있다

  2. 스타일을 수정하려면 한곳(CSS문서)에서만 수정하면 된다

  3. 스타일이 필요한 HTML문서에 <link>를 사용해서 스타일을 가져올수있다

 

 

 

 

CSS의 소개, 뜻, 그리고 사용방법 이었습니다

다음편에서는 CSS의 선택자(selector)를 알아볼게요

 

수고하셨습니다

 

 

끝!