CSS를 적용하는 방법에 대해서 알아보자.
CSS란?
Cascading style Sheets의 약자로 웹페이지의 스타일, 레이아웃 및 디자인을 정의하는 언어다.
CSS를 적용하는 방법엔 총 3가지가 있다.
- 내부 스타일 시트
- 외부 스타일 시트
- 인라인 스타일
CSS를 적용하는 방법 3가지를 알아보기 전에 CSS에 선택자를 알아보자.
선택자
CSS를 적용시키기 위해선 HTML에 태그를 선택해야 된다.
선택하는 방법은 3가지가 있다.
첫 번째는 요소 선택자로 태그명으로 선택하는 방법이다.
태그에 이름을 직접 입력
h1{ /* CSS 속성값 */ }
두 번째는 클래스 선택자로 태그를 선택하는 방법이다.
클래스명은 HTML요소에 "class"를 표기한다.
클래스 선택자를 사용했을 시 같은 클래스를 가지고 있는 여러 요소에 CSS를 적용할 수 있다.
CSS에서 클래스를 선택할 때는 앞에 '. class이름'을 붙여줘야 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.title{ /* 클래스를 선택할땐 앞에 점을 붙여줘야된다. */
/*CSS 속성*/
}
</style>
</head>
<body>
<h1 class="title">제목</h1> <!-- h1 태그에 class라는 속성을 넣어 해당 요소를 지정할수있다. -->
</body>
</html>
세 번째는 ID 선택자로 태그를 선택하는 방법이다.
ID선택자를 사용했을 시 CSS에서는 앞에 '#id이름' ID값 앞에 #을 붙여줘야 된다.
ID값은 고유 값이기 때문에 중복해서 주면 안 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#title{ /* 앞에 #을 붙여줘야된다. */
/*CSS 속성*/
}
</style>
</head>
<body>
<h1 id="title">제목</h1> <!-- h1 태그에 id라는 속성을 넣어 해당 요소를 지정할수있다. -->
</body>
</html>
이제 적용 방법으로 가보자.
내부 스타일 시트 적용 방법
HTML 파일에 <head> 태그 안에 <style> 태그를 사용하여 CSS를 작성하는 방법이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: #f0f0f0;
}
h1 {
color: blue;
}
.red{
color:red;
}
</style>
</head>
<body>
<h1>Hello, World!</h1>
<p class="red">This is a paragraph.</p>
</body>
</html>외부 스타일 시트 적용 방법
CSS 코드를 별도의 파일로 작성하고 HTML 문서에 <link>태그를 사용하여 링크하는 방법이다. 가장 많이 사용되는 방법이고
여러 HTML파일에도 적용 시킬수 있다.
/* style.css */
body {
background-color: #f0f0f0;
}
h1 {
color: blue;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
</body>
</html>
외부 스타일 시트를 적용 시킬 때는 파일 위치가 중요하다.
예를 들어 위에 예시처럼 <link rel="stylesheet" href="style.css"> 으로만 적용 시킬때에 디렉토리구조는 아래와같다.
HTML과 CSS 파일이 많아 질 경우엔 적용하는 방법이 조금은 달라진다.
위와 같은 디렉토리 구조를 가지고 있을 경우 아래와 같이 적용 시켜야된다.
html 파일
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/css/styles.css"> style.css 앞에 디렉토리 구조가 그대로 가야된다.
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
</body>
</html>추가적으로 CSS 경로에 "./style.css", "../style.css" 이렇게 적용 시키는 경우에 "./ " 는 현재 디렉토리를 가리키고, "../" 점이 2개가 붙을경우 상위 디렉토리로 이동하여 파일을 찾는 방법이다.
인라인 스타일
HTML 요소에 직접 스타일을 적용 하는 방법이다. 간단한 스타일 적용하기엔 좋지만 요소에 직접 포함되어 재사용성은 낮다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/layout/style.css">
<title>Document</title>
</head>
<body>
<h1 style="color:blue">제목</h1>
</body>
</html>
CSS 적용 우선 순위
CSS 적용 우선 순위는 스타일 규칙이 충돌할때 어떤 스타일을 우선적으로 적용되는지 결정하는 규칙이다.
우선 순위가 높은 순서대로 정리한 내용이다.
- !important : 해당 키워드를 사용하게되면 모든 스타일보다 우선적으로 정되지만 너무 많이 쓰면 유지보수성이 떨어지게된다.
- 인라인 스타일 : HTML 요소에 직접 스타일을 적용하는 경우
- 내부 스타일 시트 : HTML 문서 내에 <style>태그를 사용하여 스타일 한 경우
- 외부 스타일시트 : 별도에 CSS 파일에 정의한 스타일은 내부 스타일 시트보다 우선적으로 적용되지만, 나중에 로드된 스타일 시트가 우선적으로 적용된다.
- 상위 요소의 스타일 : 부모요소에 정의된 스타일이 자식요소에 영향을 준다.
'Style Sheet > CSS' 카테고리의 다른 글
| CSS 가운데 정렬하기 (0) | 2024.04.29 |
|---|---|
| CSS 모델 박스 이해하기 (content, padding, border, margin) (0) | 2024.04.22 |
