[웹개발] CSS 작성 방법

728x90

안녕하세요

로로봉입니다 : )

오늘은 CSS 작성 방법에 대해 알아보겠습니다.

CSS를 작성하는 방법에는 인라인(Inline), 인터널(Internal), 익스터널(External) 이렇게 3가지가 존재합니다.

이 3가지 방식은 작성법이나 스타일의 적용 범위가 다릅니다.

1) 인라인(Inline) 방식

인라인 방식으로 스타일을 적용하려면 HTML 요소에 style 속성으로 설정하면 됩니다.

<h3 style="color:red">빨간 글씨</h3>

<h3>검적 글씨</h3>

인라인 방식의 스타일 설정은 태그가 끝날 때까지만 유효합니다. 그래서 스타일을 한 번만 적용할 때 사용됩니다.

2) 인터널(Internal) 방식

인터널 방식은 HTML의 <head> 안에 <style>태그로 스타일을 정의합니다.

현재 웹 페이지 내에 있는 요소들을 태그나 id, class 별로 스타일을 공통적으로 적용할 때 사용합니다.

<head>
　　<style>
　　　　body{color:red;}
　　　　p {color:green;}
　　　　h3 {color:blue;}
　　</style>
</head>
<body>
　　body 텍스트 색상
　　<h3>h3 텍스트 색상</h3>
　　<p>p의 텍스트 색상</p>
</body>

위와 같이 <head>를 보면 <style> 태그 안에 스타일을 태그 별로 정의한 것을 볼 수 있습니다. 작성 방법은 아래와 같습니다.

태그명{스타일 속성:값;스타일 속성:값;...}

스타일에는 #아이디를 이용해 아이디로도 정의할 수 있습니다.

<p>태그의 id "A"를 스타일로 지정하고자 할 경우 아래와 같이 p#A를 사용하면 됩니다.

<head>
　　<style>
　　　　p#A {background-color:yellow;}
　　</style>
</head>
<body>
　　<p id="A">아이디 "A" 테스트</p>
</body>

다음으로는 class를 이용하여도 위와 같이 동일하게 스타일 설정을 할 수 있습니다.

class는 다음과 같이 태그에 .을 붙여서 style을 설정해주면 됩니다.

<head>
　　<style>
　　　　p.B {background-color:red;}
　　</style>
</head>
<body>
　　<p class="B">클래스 "B" 테스트</p>
</body>

3) 익스터널(External) 방식

익스터널 방식은 인터널 방식과 동일하지만 CSS 코드를 외부 파일에 저장하여 HTML에서 링크합니다.

하나의 웹 페이지에서만 사용하는 것이 아니라 여러 페이지에서 공용으로 사용할 수 있습니다.

html과 동일한 경로에 style.css 파일을 만들어 아래와 같이 작성해줍니다.

body {color:red;}

p {color:green;}

h3 {color:blue;}

html 파일의 head에 아래와 같이 css 파일을 링크해주면 style.css 파일에 정의된 body, p, h3 설정 값이 그대로 적용 되는 것을 볼 수 있습니다.

<head>
　　<link rel="stylesheet" href="style.css">
</head>
<body>
　　body 텍스트 색상
　　<h3>h3 텍스트 색상</h3>
　　<p>p의 텍스트 색상</p>
</body>

좋아요♥ + 구독 부탁드립니다 : )

728x90

저작자표시

'개발 정보 > 웹개발' 카테고리의 다른 글

[웹개발] CSS 크기설정 및 위치설정하기 (0)	2020.12.02
[웹개발] CSS 텍스트 제어하기 (0)	2020.12.02
[웹개발] HTML iframe 만들기 (0)	2020.12.02
[웹개발] HTML 블록 만들기 (0)	2020.12.02
[웹개발] HTML 폼 양식 만들기 (0)	2020.12.01