Codesigner

[CSS3] Intro to CSS 본문

CSS

[CSS3] Intro to CSS

eunsukimme 2019. 4. 3. 23:26

Cascading Style Sheets의 약자인 CSS는 HTML을 스타일링하기 위한 language이다. 만약 이 글을 보는 당신이 색칠놀이와 폰트, 글자 크기, 그림자, 그림, 레이아웃 등 시각적인 부분을 작업하는 걸 좋아한다면, CSS를 배우면서 재미있을 것이다. 이 글에서는 HTML에서 원하는 요소를 선택하여 스타일링하는 방법과 CSS 파일 구조를 셋업 하는 방법을 간략히 소개하도록 하겠다.

 

 

 

Inline Styles

 

CSS는 HTML 코드 상에서 직접 쓰일 수 있다. 이를 inline style 이라고 한다. HTML을 스타일링하기 위해서, style 속성을 특정 요소의 opening tag에 추가해 줘야 한다. 그런 다음 그 요소에 원하는 CSS 스타일링을 시도해 볼 수 있다.

<p style="color: red;">이 글자는 빨간색 입니다</p>

위의 코드는 inline style적용되는 모습을 보여준다. 만약 당신이 CSS를 처음 접한다면 color: red; 라는 문법이 익숙지 않을 수 있다. 하지만 걱정하지 말자. 여기서는 문법이 중요한 것이 아니다. CSS 문법은 아주 간단하고 배우기 쉬우므로 그저 직관적으로 이해하고 넘어갈 수 있는 정도면 충분하다. 중요한 것은, inline styles는 HTML 요소를 매우 빠르게 스타일링하는 방법이란 것이다. 만약 몇 가지 더 스타일을 주고 싶다면 간단히 세미콜론(;) 뒤에 속성을 추가해 주면 된다.

<p style="color: red; font-size: 20px;">폰트 크기는 20px 이구요, 색깔은 빨간색 입니다.</p>

 

 

The <style> Tag

 

inline style이 비록 빠른 속도를 자랑하지만, 단점도 존재한다. 만약 당신이 여러 <h1> 태그에 스타일을 주고 싶다면, 각각의 요소에 inline style을 추가해 줘야한다. 게다가, <h1> 코드가 추가될 때마다 부가적으로 작업을 해 줘야 하므로 여간 귀찮은 일이 아닐 수 없다. 

 

다행히도 HTML은 당신이 CSS코드를 작성할 수 있는 예약된 섹션을 제공하는데, <style> 태그가 바로 그것이다. <style> 태그를 사용하기 위해선, 반드시 <head> 안에 <style> 태그를 위치시켜야 한다.

<head>
    <style>
    
    </style>
<head>

그런 다음 <style> 태그 안에 CSS 코드를 작성할 수 있다.

<head>
    <style>
    p {
      color: red;
      font-size: 20px;
    }
    </style>
<head>

위의 CSS 코드는 모든 <p> 태그의 글자 크기와 색깔을 변경한다. inline style과 다른 점은 당신이 스타일링 되길 원하는 요소들을 선택할 수 있다는 것이다.

 

 

The .css file

 

CSS 파일은 .css 라는 확장자로 만들 수 있다(style.css). 또한 HTML 파일과 CSS 파일을 분리시켜 저장하는 것이 좋다는 것쯤은 당신이 개발자라면 잘 알고 있을 것이다. 그런데, 만약 CSS 파일이 HTML과 분리된다면 스타일링을 위해서 linking 해주어야 한다. 즉, HTML 파일은 CSS파일을 스스로 찾아올 수 없어서 위치를 알려주지 않고선 스타일링을 할 수 없다.

 

그래서 <link> 요소를 사용한다. <link> 요소는 반드시 <head> 요소에 포함되어야 하며, self-closing 태그이고 다음과 같은 속성들이 포함되어야 한다.

 

1. href

- a태그와 마찬가지로, 이 속성의 값은 반드시 CSS 파일에 대한 경로 혹은 주소이어야 한다.

 

2. type

- 이 속성은 우리가 link 하는 파일의 속성을 명시한다. 이 속성의 값은 text/css 이어야 한다.

 

3. rel

- 이 속성은 HTML과 CSS 파일 간의 관계를 명시한다. 우리가 스타일링을 원하기 때문에 이 값은 stylesheet 가 되어야한다.

 

<link href="https://www.example.com/stylesheets/style.css" type="text/css" rel="stylesheet">

만약 CSS파일이 HTML 파일에 상대적인 경로에 있다면, 다음과 같이 표현할 수도 있다.

<link href="./style.css" type="text/css" rel="stylesheet">

상대 경로로 link 하는 방법은 매우 흔한 방법이므로 기억해두자.

 

 

 

지금까지 CSS의 구조와 HTML과 link하는 방법을 간단히 살펴보았다. 다음 글에서는 CSS가 HTML 요소를 지정하는 방법인 Selector에 대해서 알아보도록 하자.

'CSS' 카테고리의 다른 글

[CSS3] CSS Box Model - Introduction (2) & Review  (0) 2019.04.25
[CSS3] CSS Box Model - Introduction (1)  (0) 2019.04.21
[CSS3] CSS Visual Rules - basic  (0) 2019.04.04
[CSS3] CSS Selector - Advanced 및 Review  (0) 2019.04.04
[CSS3] CSS Selector 개요  (0) 2019.04.04
'CSS' Related Articles more
Comments