728x90
CSS는 Cascading Style Sheets의 약자이다.
CSS는 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어이다.
HTML4 부터는 이러한 모든 서식 설정을 HTML 문서로부터 따로 분리하는 것이 가능하다.
오늘날 대부분의 웹 브라우저들은 모두 CSS를 지원된다.
CSS를 사용하는 이유
HTML만으로 웹 페이지를 제작할 경우 HTML 요소의 세부 스타일을 일일이 따로 지정해 줘야한다.
이 작업은 매우 많은 시간이 걸리며, 완성한 후에도 스타일의 변경 및 유지 보수가 매우 힘들어진다.
이러한 문제점을 해소하기 위해 W3C(World Wide Web Consortium)에서
만든 스타일 시트 언어가 바로 CSS이다.
CSS는 웹 페이지의 스타일을 별도의 파일로 저장할 수 있게 해주므로 사이트의 전체 스타일을 손쉽게 제어할 수 있다.
또한, 웹 사이트의 스타일을 일관성 있게 유지할 수 있게 해주며, 그에 따른 유지 보수 또한 쉬워진다.
이러한 외부 스타일 시트는 보통 확장자를 .css 파일로 저장합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type = "text/css">
/* 디자인을 설정한다 style */
p {
/* 이건 p 태그에 대한 설정*/
background-color:#0000ff;
}
/* # == id . == class */
#p1{
color: white;
}
.pcls{
background-color:yellow;
font-size: 150%
}
h3.pcls{
color: #00ff00;
}
</style>
<!-- internal 방식 -->
</head>
<body>
<!--
CSS Cascading style sheet
문자의 컬러, 종류, 형태 지정
배경화면 이미지, 컬러
테두리 넣기
각종 tag에 이미지 형태 라인 형태로 설정
-->
<p style="font-size: 10pt">p tag font size 10pt</p>
<!-- style="font-size: 10pt" 이게
css
이건 inline방식 태그에 집어넣는다
피곤한 방식이다 일일히 집어넣어야함 -->
<p id="p1">p tag id p1</p>
<h3 id = "p1">h3 tag id p1</h3>
<!-- css에서만 적용된다 -->
<p class = "pcls">p tag class pcls</p>
<h3 class = "pcls">h3 tag class pcls</h3>
<!-- class는 동일하게 사용가능하다 -->
</body>
</html>
728x90
'HTML' 카테고리의 다른 글
| 32일차//border, <div id = " ">, <style> (0) | 2021.02.25 |
|---|---|
| 32일차//[css] css 기초 [단위] (0) | 2021.02.25 |
| 32일차//[html] 설문조사 html - > jsp 과제2 (0) | 2021.02.25 |
| 32일차//[html] <a> <img> 과제 1 (0) | 2021.02.25 |
| 31일차//[html] html 입력 후 jsp 로 출력 <form> 태그 (0) | 2021.02.24 |
