CSS 들어가기
CSS(Cascading Style Sheets)는 HTML과 함께 웹 표준의 기본 개념으로 HTML이 텍스트나 이미지, 표 와 같은 요소를 웹문서에 넣어 뼈대를 만드는 역할을 한다면 CSS는 텍스트나 이미지, 배경의 크기나 배치 방법 등의 요소를 이용하여 디자인을 담당하는 스타일 시트 언어이다.
스타일 시트(Style Sheets)는 웹 문서 안에서는 스타일 규칙을 여러 개 사용하는데 한눈에 스타일 규칙을 확인하고 수정 소요 발생시 수정에 용이하기 위해 한군데 묶어 놓은 집합을 의미한다. 스타일 시트는 크게 '브라우저 기본 스타일'과 사이트 제작자가 만드는 '사용자 스타일'로 구분된다. 또 사용자 스타일은 다시 인라인 스타일과 내부 스타일, 외부 스타일 시트로 나뉜다.
인라인 스타일
인라인 스타일은 간단한 스타일 정보를 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시할 때 사용한다.
<p style="text-align: center; color: orange;">안녕하세요</p>이 방법은 HTML 요소에 직접 표시해주기 때문에 가독성 측면에서 장점이겠지만, HTML 요소의 세부 스타일을 일일이 따로 지정해 주어야하기 때문에 많은 시간이 소요된다는 점과 완성한 후에도 스타일의 변경 및 유지 보수가 힘들다는 단점이 존재한다.
내부 스타일
내부 스타일은 HTML 문서 <head> 요소 안에 스타일 시트를 위치시켜 CSS 문법을 작성하는 것이다.
<style>
h2 { text-align: center; font-size: 50px; color: orange; }
p { text-align: center; font-weight: bold;}
</style>이 방법은 해당 HTML 문서에서만 스타일이 적용된다는 특징이 있다.
외부 스타일
외부 스타일은 사이트를 제작할 때 여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해 놓고 필요할 때마다 가져와서 사용하기 위해 따로 저장해 놓은 스타일 정보를 외부 스타일 시트라고 한다. *.css 라는 확장자는 사용한다.
<link rel="stylesheet" href="./css/style.css">
<!--<head> 요소에 <link> 요소를 사용하여 연결-->
CSS의 문법
선택자 { 속성명: 속성값; 속성명: 속성값; ... }
p { text-align: center; color: blue; }
- ---------- ------ ----- ----
선택자 속성 속성값 속성 속성값
--------------------------------
선언부속성과 속성 사이는 ;(세미콜론)으로 표기하여 속성이 끝났음을 의미한다.
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>
/*
내부 스타일 시트을 적용하여 CSS문 작성
*/
h2 { text-align: center; font-size: 50px; color: orange; }
/* h2태그에 가운데 정렬, 폰트 사이트 50px, 글자색은 오렌지색으로 적용*/
p { text-align: center; font-weight: bold;}
/* p태그에 가운데 정렬, 폰트 굵기는 bold로 적용*/
</style>
</head>
<body>
<!-- 첫 CSS 문서-->
<h2>CSS</h2>
<p>HTML 문서를 시각적으로 꾸며주는 역할을 하는 언어</p>
</body>
</html>