작성된 HTML 코드에 CSS 스타일을 적용하는 방법은 크게 3가지가 있다.
인라인 스타일
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 문법</title>
</head>
<body>
<h1 style="color:blue; font-size:12px;">CSS 문법</h1>
</body>
</html>인라인 스타일은 HTML 태그 안에 직접 스타일을 설정하는 방법이다. 태그 안에 style 속성값으로 CSS 스타일 코드를 문자열 형태로 작성해주면 된다. 현재는 h1 태그에 글자 색상은 파란색으로 글자 크기는 12px 로 설정한 상태다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 문법</title>
</head>
<body>
<h1 style="color:blue; font-size:12px;">CSS 문법</h1>
<h1 style="color:blue; font-size:12px;">CSS 문법</h1>
<h1 style="color:blue; font-size:12px;">CSS 문법</h1>
<h1 style="color:blue; font-size:12px;">CSS 문법</h1>
<h1 style="color:blue; font-size:12px;">CSS 문법</h1>
<h1 style="color:blue; font-size:12px;">CSS 문법</h1>
<h1 style="color:blue; font-size:12px;">CSS 문법</h1>
<h1 style="color:blue; font-size:12px;">CSS 문법</h1>
<h1 style="color:blue; font-size:12px;">CSS 문법</h1>
</body>
</html>하지만 이렇게 인라인 스타일로 설정하면 동일한 태그가 여러 파일에 걸쳐 수없이 존재하고 해당 태그의 스타일을 수정해야 하는 경우 같은 수정을 여러번 반복해야 한다. 해당 태그를 찾는것도 일이고 같은 수정을 여러번 하는 것도 일이다. 즉, 유지보수가 힘든 사이트가 된다.
<style> 태그 안에서 CSS 적용하기
아래와 같이 head 태그 안에 style 태그를 작성하고 CSS 스타일을 적용하는 방법이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 문법</title>
<style>
h1{
color: blue;
font-size: 12px;
}
h2{
color: brown;
font-size: 30px;
}
</style>
</head>
<body>
<h1>CSS 기본문법</h1>
<p>cascade style sheet 스타일을 지정한다.</p>
<h2>heading</h2>
</body>
</html>HTML 수업에서도 언급했지만 h1 이 h2 보다 기본적으로 글자가 크지만 CSS 스타일로 얼마든지 수정이 가능하기 때문에 글자 크기로 중요도를 판단하는게 아니라 헤딩 태그의 종류로 중요도를 판단해야 한다.
style 태그로 작성한 CSS 스타일 코드는 하나의 HTML 문서 안에서만 유효하다. 즉, 현재 HTML 문서에서 h1 과 h2 가 몇개가 존재하든지 h1 과 h2 는 각각 동일한 스타일을 설정할 수 있다. 즉, 인라인으로 스타일을 지정하는 것보다는 유지보수하기 좋다. 하지만 만약 동일한 스타일이 여러 파일에 걸쳐 존재하는 경우 또다시 style 태그 안의 스타일 코드를 똑같이 작성하거나 복사붙여넣기 해야 하는 번거로움이 있다.
별도의 CSS 파일과 HTML 문서를 연결하기
별도의 CSS 파일을 생성하고 스타일을 적용하려는 HTML 문서와 연결하는 방법이다. 가장 많이 사용되는 방법이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 문법</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>CSS 기본문법</h1>
<p>cascade style sheet 스타일을 지정한다.</p>
<h2>heading</h2>
</body>
</html>HTML 문서의 head 부분에 link 태그로 style.css 파일을 연결한다. link 태그의 rel 속성값으로 stylesheet 을 설정하고 href 속성값으로 연결하려는 CSS 파일의 경로를 설정해주면 된다. 이렇게 하면 해당 문서에는 style.css 파일에서 작성한 스타일이 적용된다. 물론 다른 HTML 문서에서도 동일한 style.css 파일을 연결해서 같은 스타일을 적용할 수 있다.
h1{
color: blue;
font-size: 12px;
}
h2{
color: brown;
font-size: 30px;
}style.css 파일을 생성하고 위와 같이 style 태그 안에 있던 코드를 그대로 복사붙여넣기하자! 스타일은 style 태그로 작성한 경우와 동일하게 적용되어 있다.
하지만 장점은 같은 스타일을 다른 HTML 문서에서도 재사용 가능하다는 점이다. 그리고 style.css 파일의 스타일이 적용된 수많은 HTML 문서에서 특정 스타일의 수정이 필요하다면 수많은 HTML 문서에서 일일일 스타일을 수정하지 않고 style.css 파일의 특정 부분만 수정해주면 style.css 파일과 연결된 모든 HTML 문서의 스타일이 한번에 수정된다. 즉, 유지보수하기 쉬운 사이트가 된다.
CSS 문법구조
h1 은 선택자이다. 선택자는 HTML 문서에서 스타일을 적용하려는 요소(엘리먼트)를 선택하는 것이다. CSS에서 원하는 요소를 선택하는 방법은 다양하고 이는 추후 수업에서 다시 살펴보기로 한다.
선택자 다음으로는 선언을 작성한다. 선언 부분은 중괄호로 감싸준다. 각각의 선언은 세미콜론(;)으로 구분한다. 하나의 선언은 콜론(:)을 기준으로 왼쪽에 속성(Property)이 있고 오른쪽에는 속성값(Value)이 존재한다. 속성은 CSS로 적용하려는 스타일 이름이다. 속성값은 해당 스타일에 대한 스타일 값이다. 즉, color 라는 스타일을 적용할 것이고, color 값은 blue 로 설정하겠다는 의미다. 마지막 선언은 세미콜론을 생략할 수 있다.
'프론트엔드 > HTML & CSS 강의' 카테고리의 다른 글
| 3. 선택자 (0) | 2023.06.12 |
|---|---|
| 2. 색상과 단위 (0) | 2023.06.12 |
| 11. 폼 요소의 종류 (0) | 2023.06.10 |
| 10. 이미지(image) 보여주기 (1) | 2023.06.10 |
| 9. 앵커(Anchor)의 표현 (0) | 2023.06.09 |