앞에 잠깐 언급한 CSS적용하는 방법 3가지 정도가 있다 했는데 이번 포스팅에서 자세히 알아보자.
먼저 인라인 (Inline CSS) 방식부터 알아보자
1. Inline CSS
Inline 스타일은 HTML 요소의 개별 속성에 직접 스타일을 적용하는 방식이다.
간단한 예시를 들자면
<body>
<p style="color: blue;">광진이는 풀스택 개발자!</p>
</body>이런식으로 직접적으로 스타일을 적용할 수 있다.
인라인 방식의 장점들은
간단하고 빠르게 스타일을 적용할 수 있다. 또한
개별 요소에 특정 스타일을 적용할 수 있어 정교한 제어가 가능하다.
단점은
유지보수가 어려울 수 있고 코드 가독성이 떨어질 수 있다.
2. Internal CSS
Internal 방식은 HTML 문서 내부에서 <style> 태그를 사용하여 CSS 을 적용하는 방식이다.
아래 코드 예시를 보면
<head>
<meta charset="UTF-8">
<title>css 연습</title>
<style>
h2{
color: paleturquoise;
}
p{
color: blue;
font-size: 16px;
}
</style>
</head>
<body>
<h2>자기소개</h2>
<p>광진이는 풀스택 개발자!</p>
<p>서울 중랑구 상봉동</p>
</body><head> 태그안 <style> 태그를 이용해서 css를 적용한 코드이다.
이러한 Internal 방식은 장단점은
여러 개의 스타일 규칙을 하나의 HTML 문서에 내부적으로 포함시켜 사용할 수 있다.
하지만, 여러 HTML 문서에서 동일한 스타일을 사용하려면 각 문서마다 스타일을 중복 정의해야한다.
External CSS
External 방식은 CSS 코드를 별도의 외부 CSS 파일에 작성하고, HTML 문서에서 링크하여 스타일을 적용하는 방식이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 연습</title>
<link rel="stylesheet" href="css/cssone.css">
</head>
<body>
<h2>자기소개</h2>
<p>광진이는 풀스택 개발자!</p>
<p>서울 중랑구 상봉동</p>
</body>
</html>css코드가 css폴더 안에 있는걸 확인할 수 있다.
<link rel="stylesheet" href="css/cssone.css">
이런식으로 External 방식을 사용하는 이유는
스타일과 구조를 분리하여 관리할 수 있다. 또한,
여러 HTML 문서에서 동일한 스타일 규칙을 사용할 수 있다.
백엔드 개발자 유광진 입니다.