CSS란?
- CSS는 Cascading Style Sheet 의 약자로 html과 함께 사용되며 웹페이지의 디자인을 담당한다. CSS를 통해 여러 요소들의 크기,색상,배경,위치등을 변경할 수 있으며 이를 통해 개발자는 자신이 원하는 디자인의 웹페이지를 만들 수 있다. 오늘 포스팅에서는 CSS를 html에 적용하는 3가지 방법에대해 알아보고자 한다.
1. 인라인 방식
- 인라인 방식이란 html로 작성한 태그 안에 바로 CSS 문법을 기입하는 방식이다. 사용 방법은 아래와 같다.
<p> CSS 연습 </p>
<p style="color:red"> CSS 연습 </p>
인라인 방식의 CSS는 태그 안에 style="" 형식으로 사용하며 괄호 안에 자신이 원하는 변경 내용을 작성하여 사용한다. 위 코드에서 사용한 color:red 라는 코드는 위 사진과 같이 글자의 색을 빨간색으로 변경하는 코드이다. 위 방식의 장점은 자신이 원하는 태그에 직접적으로 사용할 수 있다는 장점이 있지만 내가 내용을 수정하고자 할때 해당 CSS가 적용된 태그를 일일히 다 찾아 수정해줘야된다는 큰 단점이 있다. 따라서 유지보수에 매우 불리하므로 가급적 사용을 자제하는 것이 좋다.
2.내부스타일시트 방식
- 내부스타일시트 방식은 한 html 파일 안에서 <style> 태그를 활용하여 CSS를 적용시키는 방법이다. 사용방법은 아래와 같다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS 연습</title>
<style>
p{
color:red;
}
</style>
</head>
<body>
<p>css 연습 내부(stylesheet)</p>
<span>CSS 연습(내부 stylesheet)</span>
</body>
</html>
내부 스타일시트 방식은 주로 웹페이지의 정보를 담고 있는 <head> 태그 안에 <style> 태그를 만들어 CSS를 적용시키는 방식이다. 위 방식은 <style> 안에 CSS 작성하는 법은 "선택자 { css 내용 }" 으로 구성되어 있다. 해당 작성방식은 다음 시간에 자세히 설명하도록 하겠다. 이러한 방식은 한 파일안에서 html 과 css 모두 작성할 수 있다는 장점이 있지만 동일한 CSS를 다른 파일에 적용하고 싶을떄 복붙을 해야된다는 아쉬운 점이 있다. 따라서 보통 코딩을 할때 1,2번째 방식보다 3번째 방식이 많이 선호되는데 이제 마지막 3번째 방식에 대해 알아보자.
3.외부스타일시트 방식
- 외부스타일시트 방식은 외부에 작성된 css 파일을 <link> 태그를 사용하여 html 파일로 가져오는 방식이다. 사용방식은 아래와 같다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS 연습</title>
<link href="./study_1.css" rel="stylesheet">
</head>
<body>
<p>css 연습 (외부 stylesheet)</p>
<span>CSS 연습(외부 stylesheet)</span>
</body>
</html>
-----------------------------------------------------------
(외부CSS 파일)
p{
color: red;
}
위처럼 외부스타일시트 방식은 외부에서 작성된 .css 파일을 <link> 태그를 활용하여 html파일로 가져오는것이다. <link> 태그의 사용방법은 <link href="css파일 주소" rel="stylesheet"> 이다. href에는 파일의 주소를 적어주어야하고 rel은 파일의 관계를 작성해주어야한다. 지금 불러오고자 하는 파일은 css 파일이므로 rel="stylesheet" 로 작성한 것이다. 외부 css 파일에서 css작성방식은 내부 css 방식과 동일하다. 이처럼 외부스타일시트는 하나의 css 파일로 여러개의 html에 적용할 수 있다는 장점과 유지보수가 용이하다는 장점을 가지고 있어 현재 가장 많이 사용되는 css 적용 방식이다.
'CSS' 카테고리의 다른 글
| CSS 글꼴과 관련된 css에대해 알아보자 (0) | 2024.04.11 |
|---|---|
| CSS 선택자에대해 알아보자. (0) | 2024.03.21 |