CSS 핵심 익히기

1. CSS 기본 문법

보통 웹 개발을 할 때 HTML 태그로 요소들을 구현하고 CSS로 디자인을 입히고 배치를 도와준다.

선택자 {
 속성1: 값;
 속성2: 값;
}

 

• 선택자(Selector)

-> 스타일을 적용할 대상 (태그, id, class 등을 선택)

p {
	color: orange;
}

/* 태그를 id로 했을 때 */
#title {
	color: blue;
}

/* 태그를 class로 했을 때 */
.item {
	color: red;
}

태그를 선택자로 하면 모든 태그에 스타일이 적용된다.

id는 딱 한 요소에만 적용된다.

class는 class가 적용된 모든 요소에게 적용된다.

상품리스트에서 상품의 디자인이 다 동일한 것은 class를 부여해줬기 때문이다.

 

• 선택자 조합

->선택자 여럿을 ,로 묶어서 같은 속성을 적용해줄 수 있다.

#item1, #item2 {
 background-color : red;
}

 

• 복합 선택자

태그, id, class가 기본 선택자라고 한다면 이들을 결합한 선택자를 복합 선택자라고 한다.

-하위 선택자는 선택자a 선택자b로 띄어쓰기를 해주면 된다. 하위 선택자는 상위 선택자(선택자a) 내부에 있는

모든 요소들 중에서 선택자2에 해당하는 태그를 선택한다.

 

-자식 선택자는 선택자a > 선택자b로 >를 통해서 구분해준다. 상위 선택자(선택자a)의 내부에서 가장 바깥에 있는

태그들 중에서 선택자2에 해당하는 태그를 선택한다.

 

 

2. 자주 쓰이는 속성

• 크기 : width, height

웹의 기본 단위인 px, 부모 태그의 크기를 기준으로 한 %가 있다.

width: 선택자 태그의 너비

height: 선택자 태그의 높이

#item {
	width: 300px; 
	height: 30%; 
}

 

• 색상 : color, background-color

color: 폰트의 색상을 정하는 속성

background-color: 선택자 태그의 배경색을 정하는 속성

 

• 폰트: font-size, font-weight

font-size: 텍스트 크기를 정하는 속성(단위: px)

font-weight: 선택자 안에 있는 텍스트의 굵기를 정하는 속성(100~900)

 

• 여백: margin, padding

태그의 여백을 나타내는 속성으로 margin과 padding이 있다.

margin: 선택자의 바깥여백 설정

padding: 선택자의 내부여백 설정

 

• 테두리: border

태그의 테두리에 선을 적용하는 속성

border값은 순차적으로 너비 스타일 색상이 들어간다.

#item {
	border: 1px solid #ff0000 /**/
}