CSS day1
| CSS란 | 스타일 시트 | CSS의 문법 |
CSS(Cascading Style Sheets)
CSS는 HTML과 함께 웹 표준의 기본 개념이다. HTML이 텍스트나 이미지, 표 와 같은 요소를 웹문서에 넣어 뼈대를 만드는 역할을 한다면 CSS는 텍스트나 이미지, 배경의 크기나 배치 방법 등의 요소를 이용하여 디자인을 담당한다.
스타일 시트
웹 문서 안에서는 스타일 규칙을 여러 개 사용하는데 한눈에 스타일 규칙을 확인하고 수정 소요 발생시 수정에 용이하기 위해 한군데 묶어 놓은 집합을 스타일 시트라고 한다. 스타일 시트는 크게 브라우저 기본 스타일과 사이트 제작자가 만드는 사용자 스타일로 나눈 수 있다. 사용자 스타일은 다시 인라인 스타일과 내부 스타일, 외부 스타일 시트로 나뉜다.
인라인 스타일
- 간단한 스타일 정보를 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시할 때 사용한다.
<p style="text-align: center; color: orange;">안녕하세요</p>
내부 스타일
- HTML 문서 <head> 요소 안에 <style>~</style>에 CSS 문법을 작성하는 것이다.
<style>
h2 { text-align: center; font-size: 50px; color: orange; }
p { text-align: center; font-weight: bold;}
</style>
외부 스타일
- 사이트를 제작할 때 여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해 놓고 필요할 때마다 가져와서 사용하기 위해 따로 저장해 놓은 스타일 정보를 외부 스타일 시트라고 한다. *.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>
[결과]
