CSS(Cascading Style Sheet)
HTML 문서의 색이나 모양 등 외관을 꾸미는 언어
CSS로 작성된 코드를 스타일 시트(style sheet)라고 부름
현재 CSS3 : CSS level 3
기능
색상과 배경
텍스트
폰트
박스 모델(Box Model)
비주얼 포맷 및 효과
리스트
테이블
사용자 인터페이스
구성
예시)
<!DOCTYPE html>
<head>
<style>
body{background-color: wheat;}
h3{color: red;}
span{color: blue; font-size: 30px;}
<!-- 각 원하는 부분 스타일 지정 -->
</style>
</head>
<body>
<h3>CSS 스타일</h3>
<hr>
<p>나는 <span>책을</span>좋아한다</p>
</body>
</html>
HTML에서 CSS 스타일 시트 만들기
<style></style>태그에 시트 작성
★스타일 시트를 별도 파일로 작성
1)
<!DOCTYPE html>
<head>
<style>
body {
background-color: wheat;
}
h3 {
color: gold;
}
span {
color: navy;
font-size: 30px;
}
</style>
</head>
<body>
<h3>CSS 스타일</h3>
<hr>
<p>나는 <span>책을</span>좋아한다</p>
</body>
</html>
2) ★ 자주 사용됨
<!DOCTYPE html>
<head>
<!-- link태그로 css 파일을 불러옴 -->
<link type="text/css" rel="stylesheet" href="st.css"
</head>
<body>
<h3>CSS 스타일</h3>
<hr>
<p>나는 <span>책을</span>좋아한다</p>
</body>
</html>
스타일 오버라이딩 순서 : 1.Style속성 > 2.<Style> > 3.external.css > 4.브라우저 디폴팅 스타일
<!DOCTYPE html>
<head>
<!-- 2 -->
<style>
p{
color: red; font-size: 20px;
}
</style>
</head>
<body>
<p>동해물과 백두산이</p>
<p>마르고 닳도록</p>
<!-- 1 -->
<p style="color: blue;">하느님이 보우하사</p>
<p style="color: brown; font-size: 10px;">우리나라 만세</p>
</body>
</html>
스타일 상속
<!DOCTYPE html>
<head>
<style>
</style>
</head>
<body>
<p>동해물과 백두산이</p>
<p>마르고 닳도록</p>
<p style="color: blue;">하느님이 보우하사
<em style="font-size25px; color: brown;">우리나라 만세</em>
</p>
</body>
</html>
스타일 합치기
<!DOCTYPE html>
<head>
<style>
span{
color:blue
}
</style>
</head>
<body>
<h5>회사 소개</h5>
<span style="background-color: black; color: white;">
<b>"사람을 도와주는 책"</b></span><br>
나는 <span style="color:brown ;"><b>사람들에게 도움을 주는 개발자 입니다.</b></span><br>
IT 기술과 실생활에 접목시킨 개발을 하고 있으며 브랜드로 출간하고 있습니다.<br>
<span>나의 미션</span><br>
사람에게 <span>도움</span>을 주는 책<br>
열심히 사는 사람들에게 도움이 되고 싶습니다.<br>
<span>개발의 지름길을 만들어 빠르게 원하는 곳으로 가도록 도와주는 개발자. 이익을 얻을 수 있도록 도움이 되는 책을 만들고 싶습니다.</span>
</body>
</html>
