CSS(Cascading Style Sheets)란?
CSS는 프로그래밍 언어가 아닌, 웹 페이지를 꾸밀 때 사용하는 Style sheet 언어이다. HTML 문서에 있는 요소들에 선택적으로 스타일을 적용할 수 있다. 스타일을 적용한다는 것은 글자색을 원하는색으로 바꾸거나, 콘텐츠의 위치나 크기를 지정하거나, 배경의 이미지나 색상을 변경하는 것 등을 말한다.
p 태그의 글씨 색을 바꾸고 싶다면 아래와 같이 적용하면 된다.
<p style="color: red;">글씨색을 빨갛게</p>
위와 같이 HTML에 직접 스타일을 지정하는 것을 인라인 스타일 속성 지정(Inline Style Attribute)이라고 한다.
그런데 "내가 모든 p태그의 글씨색을 빨갛게 하고싶은데, 일일이 저렇게 지정해주어야 하나?" 라는 의문이 생길 수 있다. 그리고 설정한 속성들을 다른 값으로 변경하고자 한다면 다시 하나하나 수정해주어야 하는데 얼마나 불편할까?
그렇다면, CSS를 이용하여 모든 p태그의 글씨 색을 지정하는 방법을 알아보자!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>css</title>
<style> /* 스타일 태그 */
p {
color: rgb(200, 0, 0);
}
</style>
</head>
<body>
<p>아주 좋아요</p>
<p>너무 좋아요</p>
</body>
</html>
<style>의 본문에 Style sheet 언어를 작성하여 스타일을 적용할 수 있다. HTML과 CSS는 다른 언어이고 문법도 전혀 다르게 만들어졌다. 그래서 반드시 style태그를 이용하여 CSS를 작성한다.
프론트엔드 개발자