기본 문법

티스토리 뷰

CSS

기본 문법

김코린👩🏻‍💻 2022. 8. 13. 16:59

CSS 기본 문법

CSS(Cascading Style Sheets)를 정의하는 방법으로는
내부 스타일시트, 외부 스타일시트, 인라인 스타일시트 등이 있습니다.
CSS에서의 주석은 /* */로 표현합니다.

01. 내부 스타일 시트

CSS를 HTML 문서 안에 <style> 태그로 기재하여 HTML 문서 안에 함께 저장되도록 하는 형태입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>내부 스타일시트</title> 
    <style type="text/css"> //스타일태그로 준다
        p { color: red;}
    </style>
</head>
<body>
    <p>우리를 기쁘게 하는 것들.</p>
</body>
</html>

02. 외부 스타일시트

스타일 속성을 따로 *.css 확장자를 가진 파일로 저장하여 HTML문서에 파일명으로 연결하는 형태입니다.
내부 스타일시트는 그 스타일이 기술된 페이지에만 적용하지만, 외부 스타일시ㅡ는 그 스타일을 선언한 모든 HTML 페이지에 적용됩니다.

html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>외부 스타일시트</title> 
    <link rel="stylesheet" type="text/css" href="style.css"> //link태그로 외부 스타일시트를 연결한다.
</head>
<body>
    <p>우리를 기쁘게 하는 것들.</p>
</body>
</html>

style.css

@charset "UTF-8";
p {color: red;}

03. @import

@import는 CSS안으로 다른 CSS파일을 불러들일 경우 사용합니다.
CSS의 맨 윗줄에 기술합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>스타일 시트 포함</title> 
    <style type="text/css"> 
        @import url("style.css"); //style태그 안에 기술한다.
    </style>
</head>
<body>
    <p>우리를 기쁘게 하는 것들.</p>
</body>
</html>

04. 인라인 스타일(inline style)

인라인 스타일은 태그에 직접 CSS를 정의해주는 기법으로, 해당 요소에 style=" "형식으로 기술합니다.
우선순위가 절대적으로 높아야 할 경우에 사용할 수 있으나, 스타일 공통 CSS로 수정할 수 없습니다..

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>인라인 스타일</title> 
</head>
<body>
    <p style="color: red;">우리를 기쁘게 하는 것들.</p> //태그에 직접적으로 기술한다.
</body>
</html>

'CSS' 카테고리의 다른 글

고양이 애니메이션 (Cat animation) using pug & Scss (8)	2022.08.20
이미지 스프라이트(Image Sprite) \| ir 효과 \| 백그라운드 표현 (4)	2022.08.20
SCSS \| SASS (3)	2022.08.20
미디어쿼리(media query) (4)	2022.08.13
벡터(Vector) \| 비트맵(Bitmap) 차이 (11)	2022.08.09

공지사항

coding for _

티스토리 뷰

기본 문법

CSS 기본 문법

01. 내부 스타일 시트

02. 외부 스타일시트

03. @import

04. 인라인 스타일(inline style)

'CSS' 카테고리의 다른 글

티스토리툴바