CSS 정의 : Cascading Style Sheet
HTML로 웹 사이트의 내용을 작성하고 CSS로 웹 문서의 디자인을 구성한다.
[기본형]
[스타일시트]
① 내부 스타일 시트 : HTML에 style이라는 속성을 사용하는 형식.
② 외부 스타일 시트(linked style) : 실무에서 가장 많이 사용하는 형식/ .css라는 파일 확장자를 사용하여 링크를 걸어주는 형식
<link rel="stylesheet" href="외부 스타일 시트 파일 경로">
③ 인라인 스타일(inline style) : 스타일 적용할 대상에 직접 입력하는 방법
1. 주요 선택자
(1) 전체 선택자 : (*)
여백 reset할 때 밖에 안쓰임
* { marigin: 0; padding: 0; }
(2) 태그 선택자 : 특정 태그 { 스타일 }
-특정 태그를 사용한 요소에 스타일 적용하기
<!DOCTYPE html>
<html lang="ko">
<head>
<title>태그 선택자</title>
<style>
h1 {
color: blue;
}
p {
color: skyblue;
}
ul {
list-style: none;
}
</style>
</head>
<body>
<h1>스타벅스 여름 신메뉴</h1>
<h2>시원한 여름을 만나보세요</h2>
<p>에스프레소</p>
<ul>
<li>말차 콜드브루</li>
<li>콜드브루 바닐라크림</li>
<li>슈크림 라떼</li>
<li>카라멜 마끼아또</li>
</ul>
<p>프라푸치노</p>
<p>블렌디드</p>
</body>
</html>
(3)클래스 선택자 : 특정 부분에 스타일 적용하기
.클래스명 { 스타일 }
class명 작성시
1) 숫자로 시작불가
2) 대소문자 구분
3) 띄어쓰기 불가
4) 특수문자 -, _ 만 사용가능
둘 이상의 스타일 동시에 적용할 때 : 띄어쓰기(공백)으로 구분
<!DOCTYPE html>
<html lang="ko">
<head>
<title>태그 선택자</title>
<style>
h1 {
color: blue;
}
p {
color: skyblue;
}
ul {
list-style: none;
}
.menu1 {
color: green;
text-decoration: underline;
}
.category {
font-weight: bold;
}
</style>
</head>
<body>
<h1>스타벅스 여름 신메뉴</h1>
<h2>시원한 여름을 만나보세요</h2>
<p>에스프레소</p>
<ul>
<li class="menu1">말차 콜드브루</li>
<li>콜드브루 바닐라크림</li>
<li>슈크림 라떼</li>
<li>카라멜 마끼아또</li>
</ul>
<p class="category">프라푸치노</p>
<p>블렌디드</p>
</body>
</html>
(4)id 선택자 : 특정 부분에 스타일 적용하기
아이디명 { 스타일 }
- 클래스 선택자와의 차이 : class 선택자는 문서 안에서 여러번 적용 가능. id 선택자는 중복해서 사용할 수 없어서 주로 레이아웃과 관련된 스타일을 지정하거나, 자바스크립트에서 웹 요소들을 구별할 때 사용함.
(5) 자식 선택자 : > 로 자식 선택자임을 표시함
(6) 하위 선택자 : 띄어쓰기로 하위 선택자임을 표시함
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>06_하위선택자</title>
<style>
/*하위 선택자는 띄어쓰기로 표시*/
.container ul {
border: 2px solid blue;
}
/*클래스 container안에 자식인 ul태그 뿐만 아니라 클래스 내 하위태그 중 ul태그가 들어간 태그 전부를 말하는 것: 3개 */
/*자식 선택자*/
.container>ul {
border: 3px solid red;
}
/*여기서는 직계 자식만 선택이므로 1개 */
</style>
</head>
<body>
<div class="container">
<!--
class container의 자식은 총 3개
-->
<h1>주문 방법 및 요금</h1>
<p>산지식송 싱싱한 제주도 감귤을 주문하세요!</p>
<ul>
<li>주문 방법
<ul>
<li>직접 통화</li>
<li>문자 주문</li>
</ul>
</li>
<li>요금
<ul>
<li>1kg : 10,000원</li>
<li>2kg : 20,000원</li>
<li>3kg : 30,000원</li>
<li>4kg : 40,000원</li>
</ul>
</li>
</ul>
</div>
</body></html><style>
.container ul {
border: 2px solid blue;
}
.container>ul {
border: 3px solid red;
}
</style>주문 방법 및 요금
산지식송 싱싱한 제주도 감귤을 주문하세요!
- 주문 방법
- 직접 통화
- 문자 주문
- 요금
- 1kg : 10,000원
- 2kg : 20,000원
- 3kg : 30,000원
- 4kg : 40,000원
블로그 이전 : https://rachelslab.tistory.com/