Cascading Style Sheets(CSS)
◆ 스타일(style) : HTML 문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소의 배치 방법 등 문서의 겉모습을 표현하는 내용들
◆ 스타일 시트(style sheet) : 스타일을 관리하기 쉽게 하나로 모아놓은 것.
HTML 에 CSS 적용방법
- 인라인 스타일 방법 ( Inline Style Sheet ) => 권장하지 않음
HTML 태그의 style 속성에 CSS 코드를 넣는 방법입니다.
<div style="color:red; font-size:20px;">내용</div>
- 내부 스타일 시트 ( Internal Style Sheet )
HTML 문서 안의 <head>섹션에 <style>과 </style> 안에 CSS 코드를 넣는 방법입니다.
- 외부 스타일 시트 (Linking Style Sheet)
별도의 CSS 파일을 만들고 HTML 문서와 연결(링크) 하는 방법입니다.
예제
index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>CSS 적용</title>
<!-- style태그 or css 파일 링크 -->
</head>
<body>
<h1>별다방 카페</h1>
<h2>운영진</h2>
<ul>
<li class="male" id="ceo">X</li>
<li class="female">Y</li>
</ul>
<h2>매니저</h2>
<ul>
<li class="male">P</li>
<li class="female">Q</li>
</ul>
<h2>알바</h2>
<ul>
<li class="male">A</li>
<li class="female">B</li>
<li class="male">C</li>
<li class="female">D</li>
</ul>
</body>
</html>CSS
/* body 요소를 선택 */
body {
/* 글꼴 변경 */
font-family: "NanumGothic";
}
/* 클래스(.)를 선택 */
.male {
/* 글자색 변경 */
color: #007bff;
}
.female {
/* 글자색 변경 */
color: #e43681;
}
/* ul 선택 */
ul {
/* 리스트 스타일 없애기! bullet 사라짐 */
list-style: none;
}
/* 아이디(#) 선택 */
#ceo {
/* 배경색 변경 */
background-color: #dfe0e1;
}
픽서