p168 ~ p312
인라인스타일 : 한 줄마다 style="color:색;" 입력
내부스타일 시트 :
<style>
h1{
padding: 10px;
background-color: #222;
color: #fff;
}
</style>외부 스타일 시트:
외부 스타일 시트를 따로 작성 후 헤드에 href를 이용하여 작성된 스타일시트를 링크해줌.
외부 스타일시트 연결시 사용하는 태그
<head>
<link rel="stylesheet" href="css/style.css">
</head>결과
마진과 패딩
초록 -> 마진
파랑 -> 패딩
div -> divide 의 뜻
h -> 헤더의 뜻
클래스 선택자 사용
<style>
p {
font-style: italic; /* 이탤릭체 */
}
.accent {
border:1px solid #000; /* 테두리 */
padding:5px; /* 테두리와 내용 사이의 여백 */
}
.bg {
background-color:#ddd; /* 배경색 */
}
</style>클래스 선택자 기본형 : .클래스명{스타일 규칙}
사용시 class ="클래스명"
헤더에 스타일을 정의
모든 p에 italic 적용
accent, bg 스타일 정의
h1 태그에 accent, bg 적용하려면
<h1 class = "accent bg">레드향</h1>특정 텍스트에만 적용하려면 span이용해서 해당 텍스트 선택하면 됨.
<p>껍질에 붉은 빛이 돌아 <span class="accent">레드향</span>이라 불린다.</p>
id 선택자 사용
클래스 선택자의 경우 문서에서 여러번 적용 가능하나, id선택자의 경우 문서에서 한번만 적용 가능.
<style>
#container {
width:500px; /* 너비 */
margin:10px auto; /* 바깥 여백 */
padding:10px; /* 테두리와 내용 사이 여백 */
border:1px solid #000; /* 테두리 */
}
</style> <div id="container">
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
</div>id 선택자 기본형 : #아이디명{스타일 규칙}
사용시 id="아이디명"
div에 #container를 사용하여 스타일을 정의
#을 이용한거면 id선택자를 사용하기위해 스타일에 선언한거임
우선순위
1) !important
2) 인라인 스타일
3) id 스타일
4) 클래스 스타일
5) 타입 스타일
text align 속성
start, end, left, right, center 등등
header에 style에 설정
<style>
.center{
text-align: center;
}
.justify{
text-align:justify;
}
</style>이런식으로 클래스를 만들고 속성을 지정하여 정렬,자간등을 변경 가능
목록 스타일
list-style-type, list-style-image, list-style-position, list-style
등으로 들여쓰기, 목록 이미지등을 변경 가능
CSS박스 모델
박스 모델의 기본 요소
마진, 테두리, 패딩, 콘텐츠 영역
