반응형
CSS란?
CSS(Cascading Style Sheets)는 HTML문서를 화려하고 아름답게 만들어주는 언어입니다. HTML 코드만으로는 시각적인 아름다움, 반응형 웹페이지를 만들수가 없기 때문에, CSS를 이용해서 글꼴, 색상, 레이아웃 및 애니메이션 등을 제어합니다.
사용법
CSS를 HTML에 적용하는 방법은 3가지가 있습니다.
인라인 (Inline Style) : HTML 태그에 직접 입력
첫번째 방법은 태그 안에 직접 CSS언어를 입력하는 것입니다. 이 때 CSS가 적용되는 범위는 직접 입력한 태그에만 해당됩니다.
<p style="color: blue; font-size: 16px;">Hello, world!</p>
- 태그 안에 style 속성을 추가합니다
- 큰 따옴표 안에 스타일을 정의합니다
- 스타일 내에서 속성과 속성값은 한쌍이고 "속성: 속성값;"으로 적습니다
- 위의 예시는 color: blue; 와 font-size: 16px; 두개의 스타일 속성이 있습니다
인라인으로 삽입하는 방법은 거의 사용하지 않습니다. 하나의 태그에 HTML과 CSS가 섞여 있어서 가독성이 떨어지고, 수정이 어렵습니다. 웹페이지 하나에 수많은 텍스트들이 있는데 폰트 사이즈 하나 바꾸려면 엄청난 노가다를 해야 하죠.
내부 스타일시트 (Internal Stylesheets) : HTML HEAD에 스타일을 지정
두 번째 방법은 <head> 태그 내에 <style>이라는 태그를 써서 CSS 스타일을 정의하는 것입니다. 아래의 경우는 모든 <p>태그에 CSS가 공통으로 적용됩니다.
<html>
<head>
<style>
p {
color: blue;
font-size: 16px;
}
</style>
</head>
<body>
<p>Hello, world</p>
</body>
- <head> 태그 안에 <style> 태그를 만듭니다.
- <style>태그는 열고 닫는 태그입니다
- 가독성을 위해 줄바꿈을 했지만 아래 그림의 문법을 따릅니다.
- Selector(선택자) : 어떤 태그, 클래스, 아이디에 CSS를 적용할건지의 범위입니다.
- Property(속성), Value(속성값) : 변경하려는 스타일입니다
인라인 방식보다는 나은 방법이지만, 이 방법 또한 잘 사용하지 않아요. 왜냐면, HTML <head>안에 모든 CSS 규칙이 들어가게 되면 줄이 너무 길어지거든요. 그래서 대부분 아래 외부 스타일 정의 방법을 씁니다.
외부 스타일 (External Stylesheets) : 별도의 CSS 파일을 불러오는 방식
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
- 외부 파일을 읽어오기 위한 link 태그를 활용합니다
- rel 속성에 stylesheet를 정의합니다
- href 속성에는 styles.css (CSS파일)이 있는 위치를 정합니다
외부 스타일시트를 연결하면 styles.css에 정의된 모든 선택자들이 현재 HTML에 적용됩니다.
관련된 포스트는 여기를 참고하세요.
반응형
'CSS' 카테고리의 다른 글
| CSS font-family, 웹 폰트를 정의하는 속성 (0) | 2023.06.23 |
|---|---|
| CSS font-size, 텍스트 크기 조절을 위한 속성 (0) | 2023.06.22 |
| CSS color 텍스트 폰트에 색상을 넣는 속성 (0) | 2023.06.17 |
| CSS background-image, 웹페이지에 배경화면 이미지를 넣어보자 (0) | 2023.06.16 |
| CSS background-color 웹페이지, HTML 요소에 배경색을 넣는 속성 (0) | 2023.06.14 |
