CSS 기본 문법

CSS 기본 문법

여러분은 같은 음식을 먹더라도 그냥 대~충 차려놓은 음식과 보기 좋은 음식 중 어느 음식이 더 드시고 싶으신가요? 당연히 같은 음식이라면 보기 좋은 음식을 고르시겠죠? 홈페이지 제작도 똑같아요! 이런 겉으로도 보기 좋게 만들어주는 것이 바로 CSS입니다. 이러한 CSS를 정의하는 방법에는 여러 방법이 있는데요. 오늘은 그 방법들에 대해 알아보겠습니다.
(공통 사항으로 주석표시는 /* */으로 합니다.)

01_ 내부 스타일 시트

HTML 코드를 작성하는 HTM 문서 내부의 <head>태그 안에 <style>태그를 선언하여 적용하는 방법입니다. 주로 간단하고 짧은 내용들일 경우 이 방식을 사용하게 됩니다.

<!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에서 <link>태그를 이용해서 선언합니다(=불러옵니다). 내부 스타일시트는 선언한 HTML파일 페이지만 적용되지만, 외부 스타일시트는 그 스타일을 선언한 모든 파일에 적용됩니다.
CSS파일의 상단에는 @charset "utf-8": @charset "euc-kr"등 html 문서에서 지정한 것과 동일한 문자셋을 지정합니다.

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


//외부 css 파일
@charset "utf-8"
p {color: blue;}

결과보기

외부스타일시트예제

03_ @import

CSS안으로 다른 CSS파일을 불러들일 때 사용합니다. CSS의 맨 윗줄에 기술합니다. 또, 어떤 CSS파일안에 공통 CSS를 불러들일 경우에도 사용할 수 있습니다. CSS파일을 너무 많이 분리하면 복잡해지는 역효과가 발생하여 유지보수가 힘들 수있으니 용량이 적은경우 하나의 파일로 저장하는 것을 추천드립니다. (저희가 여태까지 인터넷에서 웹폰트불러오기 사용했던 방식을 기억하시면 될것같네요!)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>스타일시트 포함</title>
    <style type="text/css">
        @import url ("style.css");       //여기서는 2번의 외부스타일파일입니다
    </style>
</head>
<body>
    <p>import 예제</p>
</body>
</html>

결과보기

import 예제

04_ 인라인 스타일

태그에 직접 CSS를 입히는 방법입니다. 요소에 style =""을 기입해서 사용합니다. 내부스타일이나 외부스타일보다도 우선적용되므로 우선순위가 가장 높아야 할 경우 사용합니다. 다만, 수정작업시 일일히 찾아서 수정해야하므로 추천되는 방법은 아닙니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>인라인 스타일</title>    
</head>
<body>
    <p style="color:red;">인라인 예제</p>
</body>
</html>

결과보기

인라인 예제

728x90

'CSS' 카테고리의 다른 글

이미지 스프라이트 기법과 백그라운드 표현방법, IR효과 (9)	2022.08.21
SCSS (9)	2022.08.18
애니메이션 효과 (8)	2022.08.18
미디어 쿼리 (5)	2022.08.14
벡터와 비트맵 방식 (12)	2022.08.09

코-딩동댕 유치원

CSS 기본 문법