Client/CSS

[CSS] CSS 기초 사용법 (link)

meeeeejin 2020. 6. 8. 20:39

CSS

CSS란 Cascading Style Sheet의 약자로 마크업 언어를 스타일링하기 위한 언어입니다.

HTML이 뼈대, 구조를 위한 언어라면, CSS는 디자인, 스타일링을 위한 언어라고 할 수 있습니다.

HTML 파일에 CSS 코드를 추가하는 방법은 3가지가 있습니다.

Inline CSS
Internal CSS
External CSS

Inline CSS

html의 태그 내에 style 속성을 추가하는 방법입니다.

style 속성은 css 코드를 값으로 받는데 이때 여러 값들은 ; 로 구분합니다.

1

<h1 style="color: red; background-color: yellow;">Hello</h1>

cs

Hello

하지만 이 방식은 거의 쓰지 않습니다. 만약 문서 내 모든 <h1> 태그의 색깔을 검은색으로 바꾸고 싶다면, 문서 내 모든 <h1> 태그의 속성을 수정해야 되기 때문입니다.

Internal CSS

html 파일의 <head> 태그의 내용으로 <style> 태그를 작성하는 방법입니다. <style> 태그 내에는 css 코드를 바로 작성할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11

<head>
    <style>
      h1 {
        color: red;
        background-color: yellow;
      }
    </style>
</head>
<body>
    <h1>Hello</h1>
</body>

cs

External CSS

External CSS는 css 파일을 분리해서 작성한 다음, html 파일에 link를 걸어주는 방법입니다.

css 코드를 작성한 파일 이름이 "styles.css"이고, 현재 html 파일과 같은 디렉토리에 있다면 다음과 같이 링크를 추가하면 됩니다.

1

<link rel="stylesheet" href="styles.css">

cs

이때 <link> 태그는 <style> 태그와 마찬가지로 <head> 요소의 내용으로 적어주면 됩니다.

이 방법을 사용할 경우 html 파일이 여러개인 경우에도 링크만 추가하면 되므로 관리와 일관성 유지가 용이합니다.

만약 CSS 코드 작성의 3가지 방법을 모두 사용한다면 Inline > Internal > External 순서대로 코드를 덮어쓰게 됩니다.

즉, Inline으로 작성한 CSS가 우선순위가 가장 높습니다.

728x90

저작자표시 비영리 동일조건

'Client > CSS' 카테고리의 다른 글

[CSS] 구글 웹 폰트(Google fonts) 사용 방법 (0)	2020.06.11
[CSS] Position 속성 (static, relative, absolute, fixed) (0)	2020.06.11
[CSS] display 속성 (0)	2020.06.11
[CSS] CSS 기본 박스 모델(Box Model) (0)	2020.06.09
[CSS] CSS 선택자 (Selector) (0)	2020.06.09

현재글[CSS] CSS 기초 사용법 (link)

250x250

display flex, 개발자의 글쓰기, 프로그래머스, BOJ, 백준, c++, 파이썬, CSS, html, 오늘 또 일을 미루고 말았다, spring, 2018 카카오 코딩테스트, 책 리뷰, docker, 모두 0으로 만들기, EC2, AWS, Java, css flexbox, Python,

Today :
Yesterday :

일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

👾

[CSS] CSS 기초 사용법 (link)

CSS

Inline CSS

Hello

Internal CSS

External CSS

'Client > CSS' 카테고리의 다른 글

'Client/CSS'의 다른글

티스토리툴바

[CSS] CSS 기초 사용법 (link)

CSS

Inline CSS

Hello

Internal CSS

External CSS

'Client > CSS' 카테고리의 다른 글

'Client/CSS'의 다른글

관련글

티스토리툴바