CSS 기본 문법

728x90

css 기본 문법

CSS를 정의하는 방법으로는 내부 스타일시트, 외부 스타일시트, 인라인 스타일시트 등이 있습니다. 외부스타일을 많이 사용하지만 간단한 스타일은 내부 스타일을 사용한다.

내부 스타일시트

CSS를 HTML 문서 안에 &ltstyle>태그를 사용하여 HTML 문서 안에 CSS가 함께 저장하는 형태이다.

p{color : red;}의 의미는 p태그 안의 글자 색상을 빨간색으로 설정하라는 뜻이다.

<!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>

결과

외부 스타일시트

스타일 속성들을 따로 저장하려 THML 문서에 파일명으로 연결할 수 있다. 스타일 시트는 *.css확장자를 가진 별도의 파일로 저장하고, HTML에서 &lt link> 태그를 선언한다. 내부 스타일시트는 그 스타일이 기술된 페이지에만 적용되는 반면, 외부 사트일시트는 그 스타일을 선언한 모든 HTML 페이지에 적용된다.

예제

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

//style.css
<@charest 'utf-8';>
p { color : red; }

결과

@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>
</head>
<body>
    <p style='color: red;'>우리를 기쁘게 하는 것들.</p>
</body>
</html>

결과

인라인 스타일시트(inline style)

스타일 속성들을 따로 저장하려 THML 문서에 파일명으로 연결할 수 있다. 스타일 시트는 *.css확장자를 가진 별도의 파일로 저장하고, HTML에서 &lt link> 태그를 선언한다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>인라인 스타일시트 </title>
</head>
<body>
    <p style='color: red;'>우리를 기쁘게 하는 것들.</p>
</body>
</html>

결과

728x90

'CSS' 카테고리의 다른 글

css 단위 (4)	2022.08.23
이미지 스프라이트 / IR 효과 / 백그라운드 표현 (2)	2022.08.20
Scss (1)	2022.08.18
미디어쿼리 (3)	2022.08.14
벡터 방식, 비트맵 방식 (10)	2022.08.09