CSS는?
HTML로 웹페이지를 원하는 글이나 그림을 넣는 방법을 익혔습니다. 만든 HTML 페이지를 더 예쁘게 꾸미고 싶다면 CSS를 통해 원하는 웹 페이지를 만들 수 있습니다.
CSS는 HTML 문서를 시각적으로 꾸미는 언어입니다. 왜 HTML에 꾸미기 기능을 넣지 않고 CSS를 별도로 만들까요? HTML 코드와 꾸미기 코드를 별도로 분리하면 가독성과 효율성 모두 높아지기 때문입니다. 두 기능을 함께 섞어놓으면 꾸미기를 변경할 때 일일이 코드를 뒤져서 수정해야 합니다. 하지만 꾸미기 코드를 분리하면 꾸미기 코드 관리가 쉬어집니다.
꾸미기 코드를 따로 분리하면 HTML 구조 자체에 집중할 수 있고, 꾸미기는 CSS를 통해 변경하면 됩니다.
CSS 적용하기
문단에 글자 색을 빨강색으로 CSS를 이용하여 지정하려면 다음과 같은 방법으로 가능합니다.
<style>
p {
color: red;
}
</style>스타일 지정은 위와 같은 방식으로 사용합니다. 즉 문단에 사용하는 태그 'p'에는 폰트의 색을 빨강색으로 하라는 꾸미기 지시가 되겠습니다.
<h1>What is CSS?</h1>
<p>
코딩 잘하는 방법은 반복 작업을 줄이는 것입니다. 코드를 중복하지 않고 효율적으로 작성하면 코드는 줄고, 코드를 읽는 사람도 읽기 편합니다. 또한 컴퓨터도 읽는 시간을 줄이게 됩니다.
</p>
CSS 적용 결과
What is CSS?
코딩 잘하는 방법은 반복 작업을 줄이는 것입니다. 코드를 중복하지 않고 효율적으로 작성하면 코드는 줄고, 코드를 읽는 사람도 읽기 편합니다. 또한 컴퓨터도 읽는 시간을 줄이게 됩니다.
외부 CSS 파일 적용하기
본격적으로 코딩을 하려면 꾸미기 코드를 같이 사용하지 않고 따로 파일을 만들어 불러오는 것이 좋겠죠. 따로 CSS 파일을 만들어 'style.css'로 저장합니다.
HTML 내부에 다음과 같이 적용합니다.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
</body>
</html>
정리
HTML과 CSS를 분리하여 웹페이지를 작성하는 것은 웹페이지의 경제성을 제고하는 방법입니다. CSS파일을 따로 만들어 꾸미기를 관리하는 것입니다. HTML 문서는 웹 문서 구조에만 치중하면 됩니다.
'CSS' 카테고리의 다른 글
| CSS 사용하는 3가지 방법 (0) | 2023.01.08 |
|---|---|
| CSS 선택자 (0) | 2023.01.07 |
