[웹개발] CSS 작성 방법
안녕하세요
로로봉입니다 : )
오늘은 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>
좋아요♥ + 구독 부탁드립니다 : )