1. CSS 기본 문법
CSS는 밋밋한 HTML 태그에 디자인을 씌워주는 언어다.
선택자 {
속성1 : 값;
속성2 : 값;
}선택자(Selector)
선택자는 스타일을 적용할 대상이다.
태그, id, class 등을 선택할 수 있다.
/* 태그를 선택자로 했을 때 */
p {
color: orange;
}
/* id를 선택자로 했을 때 */
#title {
color: blue;
}
/* class를 선택자로 했을 때 */
.item {
color: red;
}태그를 선택자로 하면 모든 태그에 스타일이 적용된다.
id는 고유한 요소라서 딱 한 요소에게만 적용된다.(태그에 동일한 id를 넣어도 한 개만 적용됨)
class는 class가 적용된 모든 요소에게 적용된다.
<html>
<head>
<style>
/* p 태그를 선택자로 한 경우 : 모든 p 태그에 스타일이 적용됨*/
p {
color: orange;
}
/* id를 선택자로 한 경우 : 'id-test'를 id로 가지는 한 요소에게만 적용됨*/
#id-test {
color: blue;
}
/* class를 선택자로 한 경우 : 'class-test'를 class로 가지는 한 요소에게만 적용됨*/
.class-test {
color: red;
}
</style>
</head>
<body>
<p>Hello Grab</p>
<p>Hello Everyone</p>
<div id="id-test">id가 적용된다.</div>
<div class="class-test">클래스가 적용된다.</div>
<div class="class-test">클래스가 적용된다.</div>
</body>
</html>선택자 조합
선택자 여럿을 ,로 묶어서 같은 속성을 적용해줄 수 있다.
#item1, #item2 {
background-color : red;
}복합 선택자
태그,id,class가 기본 선택자라면 이들을 결합한 선택자를 복합 선택자라고 한다.
많이 사용하는 복합 선택자로 하위 선택자와 자식 선택자가 있다.
하위 선택자: 선택자a 선택자b로 써주고 상위 선택자 내부에 있는 모든 요소들 중에서 선택자2에 해당하는 태그를 선택한다.
자식 선택자: 선택자a > 선택자b로 써주고 자식 선택자는 상위 선택자의 내부에서 가장 바깥에 있는 태그들 중에서 선택자2에 해당하는 태그다.
<html lang="en">
<head>
<style>
#item-list {
color: orange;
}
#item-list > p {
color: tomato;
}
</style>
</head>
<body>
<div id="item-list">
<p>자식 아이템1</p>
<p>자식 아이템2</p>
<div>
<p>하위 아이템1</p>
<p>하위 아이템2</p>
</div>
</div>
</body>
</html>=> 자식 아이템은 tomato색으로, 하위 아이템은 orange 색으로 설정
2. CSS 에서 자주 쓰이는 속성들
크기 : width, height
웹의 기본 단위인 px 혹은 부모 태그의 크기를 기준으로 한%
색상 : color, background-color
color : 폰트의 색상을 정하는 속성
background-color : 선택자 태그의 배경색을 정하는 속성
폰트 : font-size, font-weight
font-size : 선택자 안에 있는 텍스트의 크기
font-weight : 선택자 안에 있는 텍스트의 굵기
여백: margin, padding
margin : 선택자의 바깥의 여백을 설정
padding : 선택자의 내부의 여백을 설정
테두리: border
태그의 테두리에 선을 적용하는 속성
border 값은 순차적으로 너비 스타일 색상이 들어간다.
#item {
border: 1px solid #ff0000 /*너비 : 1px, 스타일 : 실선, 색상 : 빨강(rgb)*/
}