티스토리 뷰

CSS

CSS 기초문법

근혁 2022. 1. 20. 18:45

 

CSS는 무엇인가?

CSS는 Cascading Style Sheets의 약어로 HTML이나 XML로 작성된 문서를 시각적으로 이쁘게 꾸며주는(글씨 색상, 배경 색상, 이미지 등등) 역할을 한다.

CSS 선언 방법

CSS 선언 방법에는 3가지가 있다 내부 스타일, 외부 스타일, 인라인 스타일 각각 쓰는 방식이 다른데 먼저 내부 스타일부터 알아보자

내부 스타일 시트

내부 스타일은 웹 문서 안에서 사용할 스타일을 문서 안에 정리한 것이다

<head>태그와 </head>태그 안에서 정의해야 하고 <style>태그와 </style>태그 사이에 작성해야한다.

{
    <!DOCTYPE html>
<html>
<head>
<title>내부 스타일 시트 </title>
    <style>
        ul{
            color:blue;
            list-style-type:square;
        }
    </style>
</head>
}

외부 스타일 시트

웹 사이트를 만들 때 하나의 웹 문서로 끝나는 경우는 거의 없다. 사이트를 제작할 때 여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해 놓고 필요할 때마다 파일에서 가져와 사용하는 것이 일반적이다. 이렇게 따로 저장해 놓은것을 '외부 스타일 시트'라고 한다 외부 스타일 시트를 연결할 때는 <style>태그 없이 <link>태그만 사용해 미리 만들어 놓은 외부 스타일 시트 파일을 연결합니다.

파일을 가져오는 방식

{
    <link "rel="stylesheet" href="외부 스타일 파일 경로">
}
{
    <!DOCTYPE html>
<html>
<head>
    <title>외부 스타일 시트</title>
    <link "rel="stylesheet" href="외부 스타일 파일 경로">
</head>
}

인라인 스타일 시트

인라인 스타일 시트는 간단한 스타일 정보라면 style태그를 사용하지 않고 스타일을 적용할 대상에 직접 표시한다. 이런 방법을 인라인 스타일 시트라고 한다 스타일을 적용하고 싶은 부분이 있다면 해당 태그에 style속성을 사용하여 style="속성:속성 값"; 형태로 스타일을 바꿀 수 있습니다.

{
    <!DOCTYPE html>
    <html>
    <head>
        <title>인라인 스타일</title>
    </head>
    <body>
        <h1 style="color:blue";>제목</h1>       <--스타일 적용
        <p>내용<p>
    </body>
    <html>
}

'CSS' 카테고리의 다른 글

CSS 이미지 표현방법  (0) 2022.02.03
IR 효과  (0) 2022.01.31
inline, block의 차이점  (0) 2022.01.30
CSS의 단위  (0) 2022.01.25
CSS 색상  (0) 2022.01.21

UP NEXT : CSS

댓글
© 2018 webstoryboy