CSS란 무엇인가? HTML 기초

기존의 HTML은 웹 문서를 다양하게 설계하고 수시로 변경하는데 많은 제약이 따르는데, 이를 보완하기 위해 만들어진 것이 스타일 시트이고 스타일 시트의 표준안이 바로 CSS 입니다.
CSS는 의미 Cascading Style Sheets CSS는 HTML 요소가 표시 되는 방법을 설명합니다. 간단히 style sheets라고 합니다.

HTML을 이용해서 웹 페이지를 제작할 경우 전반적인 틀에서 세세한 글꼴 하나 하나를 일일이 지정해주어야 하지만, 웹 페이지의 많은 글꼴 위치 크기 색상등의 style을 미리 저장해 두면 웹 페이지의 한 가지 요소만 변경해도 관련되는 전체 페이지의 내용이 한꺼번에 변경되므로, 문서 전체의 일관성을 유지할 수 있고 작업 시간도 단축된다.

따라서 웹 개발자들은 보다 풍부한 디자인으로 웹을 설계할 수 있고, 글자의 크기, 글자체, 줄간격, 배경 색상, 배열위치 등을 자유롭게 선택하거나 변경할 수 있으며 유지·보수도 간편하게 할 수 있습니다.

CSS 예) style sheets

h2 {color: red; font-size: 13px;}

html의 h2요소에 대한 style을 선언 합니다.

color 글자 색상은 빨간색

font-size 글자의 크기는 13px

다른 예)

<style>
p {text-align:center; font-size:32px; color: black; }
</style>

html의 P요소에 대한 css선언

text-align 글자 정렬은 center

외부에 CSS 파일을 만들어 저장

style.css

body { font-size: 12px; background-color: white; font-family: 'Arial'; }

h1 { color: blue; font-size: 20px; }

p { font-size: 13px; text-align: right; font-color: gray;}

HTML 본문에 <link>태그를 사용하여 연결 합니다.

<!DOCTYPE html>

<html>

<link rel="stylesheet" href="style.css">

<body>

<h1>
My Style CSS Example
</h1>

<p>
ABCDEFGHI...
</p>

</body>

</html>

예) 인라인 스타일 적용

Inline Style이란 외부에 CSS파일을 생성하지 않고 직접 HTML 문서 본문 요소 태그<>안에 삽입 하는 방식입니다.

<!DOCTYPE html>

<html>

<body style="background-color: gray;">

<h1 style="color: blue; font-size: 20px;">
CSS Example
</h1>

<p>
내가 작성한 내용1
</p>

<p style="font-size:16px; text-align: center;">
내가 작성한 내용2
</p>

<p style="font-size: 25px; text-align: right;">
내가 작성한 내용3
</p>

</body>

</html>

'[IT] HTML & CSS' 카테고리의 다른 글

html 특수 문자 코드 표 (0)	2019.12.29
html img 이미지 가져오기 절대경로와 상대경로 (3)	2019.12.29
HTML 기초 tag 많이 사용되는 태그 정리 (0)	2019.12.28
HTML이란 무엇인가요? (0)	2019.12.28
CSS Scrollbar 스크롤바 꾸미기 색상 바꾸기 변경 방법 (0)	2019.12.28