본문 바로가기
C++ 200제/코딩 IT 정보

CSS 란? HTML CSS 차이로 알아보는 CSS 기초 지식과 사용법

by vicddory 2020. 3. 2.


CSS는 Cascading Style Sheets(캐스케이딩 스타일 시트) 약자이며, 문장에 디자인을 입히고 싶을 때 사용하는 언어입니다.


HTML은 문장의 구조를 만드는 반면 CSS는 "그 문장을 어떻게 브라우저에 표시할지 지정하는 언어"이므로 HTML과 세트로 사용합니다.

이 때문에 CSS는 '구조'와 '디자인'의 역할 분리를 위한 언어라고 합니다.


CSS는 HTML 태그로 둘러싸인 위치의 문자 색상을 바꾸거나 링크를 버튼으로도 장식할 수 있습니다.

그러나 HTML 보다 기억할 게 많고, 작성도 어려워 CSS가 무엇인지 잘 모르는 사람이 많은 것도 사실입니다.


이 포스트에선 CSS를 잘 모르는 사람을 위해, CSS가 어떤 언어인지 구체적인 예를 통해 자세히 설명합니다.

목차

1. CSS란

  1-1. HTML과 CSS 차이

  1-2. CSS 구조

  1-3. CSS 버전 (Level)

2. CSS 구체적인 예

  2-1. 문자 크기 바꾸기

  2-2. 색상 바꾸기

  2-3 여백 만들기

3. CSS 기본 문법

  3-1. 셀렉터

  3-2. 프로퍼티(속성)

  3-3. 값

4. CSS 작성

  4-1. HTML 파일 준비

  4-2. CSS 파일 만들기

  4-3. CSS 설명

5. 정리


1. CSS란

앞서 말씀 드린 대로, CSS는 Cascading Style Sheets(CSS 스타일 시트)의 머리글자를 딴 것입니다.

캐스케이딩 스타일 시트는 HTML 태그(요소) 등에 어떤 장식을 할지, 그 장식은 어떤 크기, 어떤 색깔, 어떤 폰트(글꼴의 경우)인지를 지정하는 언어입니다.



쉽게 표현하면 HTML에 "디자인을 입혀주는" 언어라고 할 수 있습니다.

구체적으로는 "문자 색상 바꾸기", "링크를 버튼으로 보이기" 등이 가능합니다.


1-1. HTML과 CSS의 차이

HTML과 CSS의 차이는 문장의 "구조"를 지정하는가 "장식"을 지정 하느냐는 것입니다.



HTML은 태그로 둘러싸인 문장에 의미를 부여하며, 문장의 구조를 만듭니다.

이에 대해 CSS는 "어떤 장식을 할 것인가", "그 장식의 색상과 크기는 무엇인가"를 지정하는 언어입니다.

즉, CSS는 구조와 디자인의 역할을 분리하기 위한 언어라고 할 수 있습니다.

CSS가 없었던 시기엔 HTML에서 글자색, 크기 등을 변경했습니다.

하지만, 그러면 코드가 길어져 편집이나 수정도 쉽지 않았습니다.


코드가 길어지고 있는 예시


그래서 구조와 디자인을 분리하기 위해 태어난 것이 CSS입니다.

CSS가 있어서 이미지 응용, 링크 버튼, 배경 그라데이션 등을 쉽게 할 수 있습니다.

HTML과 CSS가 역할을 분담하게 되면서, 보다 다양한 디자인을 적용할 수 있게 되었습니다.

1-2. CSS 구조

CSS는 HTML 요소들의 크기 조절, 디자인, 배치 등 디자인을 가공합니다.

HTML 요소란 "상자 BOX"라 부르는, HTML 태그로 둘러싸인 장소 영역입니다.



HTML을 작성하면 위의 그림과 같이 "상자"가 만들어집니다.

이 상자를 둘러싼 CSS에 디자인을 주면, 여백을 추가하거나 위치를 바꿀 수 있습니다.


※ 상자는 눈에 보이진 않습니다.


1-3. CSS 버전 (Level)

CSS와 HTML은 국제 표준으로 규칙이 통일되어 있습니다.

HTML 버전은 현재 "HTML5"이며, CSS Level 표기는 현재 "CSS3"입니다.


HTML은 버전에 따라 작성 및 사용 가능한 태그가 다르므로 주의가 필요합니다만, CSS는 Level과 무관하게 사용할 수 있습니다.


CSS는 단순히 기능이 확장되고 있을 뿐, 버전(정식 Level)은 그다지 관계없습니다.

따라서, 어떤 버전의 CSS를 사용해도 대부분의 브라우저에서 똑같이 적용됩니다.


2. CSS 구체적인 예

여기에서는 CSS에 지정할 수 있는 구체적인 예를 몇 가지 소개합니다.

소개하는 예는 실제로 코딩할 때 자주 사용되는 것입니다.

그 밖에도 CSS로 할 수 있는 것은 많지만, 대표적인 예를 보면 CSS가 어떤 것인지보다 쉽게 알 수 있을 것입니다.


2-1. 문자 크기 바꾸기

CSS에서 문자 크기를 바꿀 수 있습니다.


See the Pen xxGdoWJ by jt park (@jtp_kor) on CodePen.


HTML에서 <h1> 등 제목 만드는 태그를 사용하면, 그 부분의 문자 크기가 달라집니다.

이와는 별도로, CSS를 이용해 지정된 위치의 문자 크기를 바꿀 수도 있습니다.

2-2. 색상 바꾸기

문자의 색과 배경색을 바꿀 수 있습니다.


See the Pen VwLbJQg by jt park (@jtp_kor) on CodePen.


HTML에서 문자 색상을 바꿀 수 있지만, 현재는 CSS에서 문자 색상을 바꾸는 것이 일반적입니다.

또한, 이전에는 배경색에 그라데이션을 적용을 위해 이미지를 사용했으나, CSS를 이용하면 배경 색상에 그라데이션 적용하는 작업이 훨씬 수월합니다.


2-3 여백 만들기

CSS를 사용하여 여백을 만들 수 있습니다.


See the Pen YzXVoaM by jt park (@jtp_kor) on CodePen.


간단히 CSS를 활용해 HTML 요소(상자)에 여백을 지정합니다. 위 소스는 CSS(마진 및 패딩 등)를 설명하는 것으로, 상자에 여백 지정하는 방법입니다.


3. CSS 기본 문법

CSS 기본 문법으로 CSS 작성하는 방법입니다.



기본 문법에 따라 CSS를 작성하여, 어디에 어떤 장식을 할 것인지 지정할 수 있습니다.

각각 어떤 의미가 있고, 어떻게 작성하면 좋은 것인지 설명해 드리겠습니다. 나중에 CSS 사용할 때 참고하세요.


3-1. 셀렉터 (selector)

셀렉터는 CSS를 적용할 위치의 HTML 태그(요소)를 가리킵니다. (div에 대해선 이 포스트 참조)



이 셀렉터를 작성하여 어느 부분에 디자인을 적용할 것인지 결정할 수 있습니다.

셀렉터도 종류가 많으며, 경우에 따라 사용 방법이 다릅니다.


※ 셀렉터 뒤에는 중괄호 { }가 붙습니다.

3-2. 프로퍼티(속성)

프로퍼티는 셀렉터가 지정한 위치의 "무엇을 바꿀 것인가"를 결정합니다.

셀렉터 뒤에 오는 중괄호 {} 안에 속성을 작성합니다.



예를 들어, 속성 중에는 문자 크기 및 색상이 있습니다.



속성은 수백 종류니깐 그중에서 사용하고 싶은 것을 찾아 작성하면 됩니다.


3-3. 값

값은 속성(프로퍼티)으로 지정한 것을 얼마나 바뀌게 할지 결정합니다.

만약, 문자 크기 지정 속성을 사용한다면, 어느 정도 크기로 할 것인가를 값으로 설정합니다.



값은 속성(프로퍼티)마다 작성할 수 있는 내용이 다르므로 주의가 필요합니다.


4. CSS 작성

마지막으로, CSS 작성법을 소개합니다.

CSS는 HTML과 세트로 사용되는 언어라 CSS를 단독으로는 사용하진 않습니다.

그래서 우선 HTML 파일을 준비해야 합니다.


파일을 만드는 것이 어려운 분들을 위해 다운로드할 파일을 준비했습니다.

다운로드받는 "whatscss_sample.zip"이라는 파일에 "style.css"라는 파일이 있으니 참고하시면 됩니다.


whatscss_sample.zip


4-1. HTML 파일 준비

먼저 HTML 파일을 준비합니다.

'텍스트 편집기' 아래의 HTML을 코딩하세요.


---- 여기부터 ----


<!doctype html>

<html>

<head>

<meta charset="UTF-8"><!--문자 코드를 UTF-8로 지정해야 깨지는 것을 방지합니다-->

<title>Web 사이트 타이틀</title>

<link rel="stylesheet" href="css/reset.css"><!--리셋. css 먼저 읽기-->

<link rel="stylesheet" href="css/style.css"><!--자신이 사용할 css-->

</head>

<body>

<h1>CSS로 할 수 있는 몇 가지</h1>


<div class="box1">

  <p>둥글게 만들기</p>

</div>


<div class="box2">

  <p>동그라미</p>

</div>


<div class="box3">

  <p>안쪽 선을 꾸미기</p>

</div>


</body>

</html>


---- 여기까지 ----


그리고 파일 이름을 "index.html"로 변경하고 저장합니다.

파일 이름을 ".html"로 해야, PC가 이 파일은 HTML 파일이라고 인식합니다.



4-2. CSS 파일 만들기

이어서 CSS 파일을 만듭니다.

CSS 파일도 HTML 파일 만들 때처럼 텍스트 편집기에서 새 파일을 만들고 CSS를 생성합니다.


---- 여기에서 ----

@charset "UTF-8"; /*이 지정은 외부 스타일 시트 파일 내에서만 사용하는 문자가 깨지는 것을 방지*/


body {


}


h1 {


}


.box1 {


}


.box2 {


}


.box3 {


}

---- 여기까지 ----


코딩한후에 HTML 처럼 파일 이름을 "style.css"로 변경하여 저장합니다.

"style.css"외에 "reset.css"도 필요하니 아래 파일을 다운로드하세요.


reset.zip



각각의 파일은 다음과 같이 배치합니다.


◆ css_sample 폴더

├index.html

└ ◇ css 폴더

 ├reset.css

 └style.css

4-3. CSS 설명

index.html을 실행하면 이미 CSS에 코딩이 되었으므로, 아래와 같은 완성된 페이지가 보입니다.



이와 같은 CSS 내용을 아래와 같습니다. CSS 소스 코드 한 줄씩 이해해보세요.


⇒body

background-color : black;

[배경을 검정색으로]


⇒h1

background : -webkit-linear-gradient (left # 453a94 # f43b47);

background : -o-linear-gradient (left # 453a94 # f43b47);

[각 브라우저 지원 : 배경에 그라데이션 적용 (시작 위치 시작 색, 끝 색)


background : linear-gradient (to right # 453a94 # f43b47);

[배경에 그라데이션 적용 (to 방향, 시작 색, 끝 색)】


color : white;

[글자 색을 흰색]


font-size : 25px;

[글꼴 크기를 25px]


font-weight : bold;

[폰트 굵기 bold]


margin : 50px auto;

[외부 여백을 상하 50px】


padding : 15px;

【안쪽 여백을 상하 좌우 여백을 15px]


text-align : center;

[가운데 정렬]


width : 300px;

[폭을 300px]


⇒.box1

background-color : # d9afd9;

[배경 색상 바꿈】


border-radius : 20px;

[반경 20px 둥근 사각형】


margin : 0 auto 30px;

[외부 여백 설정. 위 0, 좌우 균등, 아래 30px]


padding : 20px;

【안쪽 여백을 상하 좌우 20px]


text-align : center;

[가운데 정렬]


width : 200px;

[폭을 200px로]


.box2

background-color : # d9afd9;

[배경 색상 바꿈】


border-radius : 50 %;

[모든 모서리가 둥근 원형]


height : 200px;

[높이 150px]


line-height : 200px;

[높이와 행 높이 맞추기]


margin : 0 auto;

[외부 여백을 상하 50px】


text-align : center;

[가운데 정렬]


width : 200px;

[폭 200px]

.box3

background-color : # d9afd9;

[배경 색상 바꿈】


border : dashed 5px white;

[테두리에 붙는 (종류 굵기 색)】


border-radius : 50 %;

[모든 모서리 둥근 원형으로]


height : 170px;

[높이 170px]


line-height : 170px;

[높이와 행 높이 맞추기]


box-shadow : 0px 0px 0px 10px # d9afd9;

[(좌우 방향 px 상하 방향 흐림)】


margin : 30px auto;

[외부 여백 상하 30px 좌우 고르게】


text-align : center;

[가운데 정렬]


width : 170px;

[폭 170px]

[※ border에 5px, box-shadow 상하 좌우 10px 씩 커지고 width, height도 줄어들어 box2와 크기가 같습니다]


코딩하고 저장한 후에 "index.html" 파일을 열면 방금 보여 드린 페이지가 완성되어 있을 겁니다.

값을 바꾸거나 일부 수정하면 어느 부분이 어떻게 변하는지 확인할 수 있다고 생각합니다.



5. 정리

CSS는 HTML "구조"의 "장식"을 담당하는 언어입니다. 현재 HTML과 CSS는 역할을 분담하기에 다양한 디자인 작업을 할 수 있습니다.

만약 여러분이 앞으로 CSS를 사용한다면, 기본 문법은 기억할 필요가 있습니다. 기본 문법을 기억한 뒤 다양한 CSS 응용 방법을 배우도록 하세요.


댓글