본문 바로가기
Programming Language/CSS

[CSS] CSS 스타일 적용 방법

by 떠농 2022. 1. 11.
반응형

CSS를 웹 페이지에 적용하는 방법은 아래와 같다.

 

1. HTML 태그의 style 속성에 CSS 코드 넣어 적용하기(Inline Style Sheet)

 

1
<p style="color: blue;">저는 파란색을 좋아해요</p>
cs

 

2. HTML 문서 안에 스타일 코드를 넣어 적용하기(Internal Style Sheet)

1
2
3
4
5
6
7
8
<style>
    p1{
        color: blue;
    }
</style>
 
<p1>나는 파란색이에요.</p1>
<p1>나는 바다를 좋아해요. </p1>
cs

 

3. 별도의 CSS 파일을 만들고 HTML 문서에 코드 추가하여 적용하기(Linking Style Sheet)

 

style.css 파일을 만든다.
1
2
3
4
5
<style>
    p1{
        color: blue;
    }
</style>
cs

html파일에 아래 태그를 추가한다.
1
<link rel="stylesheet" href="style.css">
cs

 
 
참고)
 
파일 경로에 따라 href에 들어가는 값이 달라진다.
 
ex)
html파일이 있는 폴더안에 css폴더 안에 style.css 파일이 있는 경우
1
<link rel="stylesheet" href="css/style.css">
cs

 

반응형

댓글