목차
1. CSS 개요
2. CSS 기본 문법
① 'style' 속성으로 CSS 스타일 정의
② '<style>' 태그로 CSS 스타일 정의
③ HTML 문서에 스타일 시트 파일(*.css)을 연결해서 CSS 스타일을 정의
3. 마치며
1. CSS 개요
- CSS => Cascading Style Sheets, 계단식으로 스타일을 정의하는 문서
(HTML은 태그가 태그를 포함하는 계단식 구조를 가지고 있다.)
- HTML 문서에 스타일을 추가하는 언어
- '*.css' => 파일 확장자 명
- CSS는 HTML 문서의 스타일을 정의하는 것이 목적이기 때문에
HTML 문서와 같이 사용해야 하며, 그렇지 않다면 단순한 텍스트 문서에 불과하다.
- HTML이 프로그래밍 언어가 아니라 마크업 언어인 것처럼
CSS는 프로그래밍 언어도 마크업 언어도 아닌 Style Sheet 언어이다.
2. CSS 기본 문법
/* CSS 기본 문법 */
/*
선택자 {
속성명: 속성 값;
}
*/
/* 주석은 '/**/'을 통해서 처리한다.*/- 선택자 => 어떤 요소에 스타일을 적용할지를 정한다.
- { }(중괄호) => 선택한 요소에 어떤 스타일을 적용할지를 정의한다.
- 속성명 => 텍스트의 크기, 색상, 폰트 등 정의할 스타일을 선정한다.
- 속성 값 => 선정한 스타일을 어떤 값으로 지정할지에 대한 정보 (색상=빨간색, 크기=100처럼)
HTML 문서에 CSS 스타일을 적용하는 방법은 크게 세 가지가 존재한다.
하나는 'style' 속성을 통해서 css 스타일을 적용하는 방법
다른 하나는 <style> 태그를 통해서 css 코드를 짜고, HTML의 특정 요소에 스타일을 적용하는 방법
그리고 외부 스타일 시트 파일과 HTML 문서를 연결해서 css 스타일을 적용하는 방법
이렇게 세 가지가 존재한다.
이 세 가지 방법에 대해 순서대로 알아보도록 하자.
① 'style' 속성으로 CSS 스타일 정의
- 태그에 'style' 속성을 추가해서, 요소에 직접적으로 스타일을 정의하는 방법
- 해당 속성에 들어가는 값은 css 문법이 들어가야 한다.
<!-- style 속성을 통해서 css 스타일 적용 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS - style 속성 활용</title>
</head>
<body>
<h3 style="color: green;">CSS 스타일 적용해보기</h3>
<p style="color: red;">style 속성을 활용해서 CSS 스타일을 적용합니다.</p>
<!-- style 속성의 값은 CSS의 문법으로 작성해야한다. -->
</body>
</html>CSS - style 속성 활용 CSS 스타일 적용해보기
style 속성을 활용해서 CSS 스타일을 적용합니다.
style 속성은 테스트 등의 스타일을 빠르게 적용해야 할 경우에 주로 사용되지만
웹 콘텐츠의 스타일은 별도의 스타일 시트 파일을 만들어서 분리해 두는 것이 더 권장되는 편이라고 한다.
② '<style>' 태그로 CSS 스타일 정의
- HTML 문서 내에 CSS 코드를 작성해서 스타일을 정의할 수 있게 해주는 요소
- <style> 요소는 HTML 문서에 대한 정보로 취급되기 때문에
<head> 요소 내부에 작성해줘야 한다.
<!-- style 태그를 통해서 css 스타일 적용 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS - style 속성 활용</title>
<!-- style 태그는 html의 head 태그 내부에 작성해야한다. -->
<style>
h3{color: green;}
p{color: green;}
</style>
</head>
<body>
<h3>CSS 스타일 적용해보기</h3>
<p>style 태그를 활용해서 CSS 스타일을 적용합니다.</p>
</body>
</html>
티스토리에서 제공되는 HTML 블록은 <style> 요소를 통한 CSS 스타일 정의가 안 되는 것 같아서
repl.it로 해당 코드를 실행한 결과를 대신 첨부하였다.
③ HTML 문서에 스타일 시트 파일(*.css)을 연결해서 CSS 스타일을 정의
- 'style' 속성이나 <style> 요소로 HTML 문서 내부에서 스타일을 정의하지 않고
외부 스타일 시트 파일(*.css)을 만들어서 CSS 코드를 작성하고 이를 HTML 문서에 연결하는 방식
- HTML 문서에서 <link> 태그를 통해 외부 스타일 시트 파일과 연결하여 CSS 스타일을 적용한다.
[예시 코드]
1. CSS 파일
/* CSS 파일 */
/* CSS 스타일을 외부 스타일 시트 파일로 분리
파일 경로: style.css
*/
h3 {
color: green;
}
p {
color: blue;
}
2. HTML 문서
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 스타일 적용하기</title>
<link href="style.css" rel="stylesheet"/>
<!-- <link> 요소
* 현재 문서와 외부 소스 간의 관계를 명시하는 요소
Style sheet, css 파일을 연결할 때 제일 많이 사용되는 요소
* html 문서 내, <head> 요소 내부에 작성해야한다.
* href => Hypertext Reference
하이퍼 텍스트를 참조하는 속성
연결하고자 하는 외부 소스의 url을 값으로 입력한다.
rel => relationship, 관계
현재 문서(HTML 문서)와 외부 소스(css 파일) 간의 연관 관계를
명시하는 속성
-->
</head>
<body>
<h3>CSS 스타일 적용해보기</h3>
<p>HTML 문서와 외부 스타일 시트 파일을 연결해서 CSS 스타일을 적용합니다.</p>
</body>
</html>
[출력 결과]
<link> 태그에 관해서는 바로 위에 있는 HTML 소스코드에 주석으로 표기해 놨으니 참고 바란다.
3. 마치며
저번 주 주말부터 본격적으로 HTML과 CSS를 병행해서 공부하기 시작했다.
주어진 시간이 마냥 길지도 않고, 7월 전까지 어떻게든 웹 모작까지는 해놓을 필요가 있기 때문이다.
다만 HTML에 대해 아무것도 모르는 상태에서 CSS에 대해 공부하는 것보다는
조금이라도 HTML에 대해 알고 있는 상태가 공부하기 더 수월할 것 같아서
HTML 기초를 어느 정도 다져두고 시작하였다.
일단은 4월 중순까지는 HTML, CSS 위주로, 그 이후부터는 Javascript 문법을 공부할 생각이다.
Javascript는 HTML, CSS 이 두 개를 알지 못하면 문법을 공부하기가 많이 버겁다는 이야기를 듣고 내린 판단이다.
2023.03.20 CSS 개요 작성 완료 (목차 기능 미구현)
'Frontend > CSS' 카테고리의 다른 글
| [CSS] position 속성 (0) | 2023.08.09 |
|---|---|
| [CSS] 박스 모델 (Box Model) (0) | 2023.04.05 |
| [CSS] 선택자 1 (기본, 그룹 선택자) (0) | 2023.03.24 |
