CSS 기초 내용 요약

본 글은 개인 공부용으로 제작되었으며 틀린 부분이 있어서 알려주시거나 글에 없는 내용을 댓글로 남겨주시면 감사하겠습니다 ' U ' 

 

CSS 코드 구분하기

예제 코드

#gnb{
	position:absolute;
}

• 셀렉터(선택자) : #gnb
• 선언 블록 : { position:absolute}
• 선언 : position:absolute;
• 속성 : position
• 값 : absolute

 

Class 명 & ID명 생성 규칙

• 첫 글자는 반드시 영어로 시작한다.
• 공백은 사용하지 않는다.
• 영어,숫자, -(하이픈), _(언더바) 만 사용한다.

반응형

CSS 적용 우선순위 계산

종 류	값
!important	최고 순위
#id	100
.class	10
tag	1
*	0

예시코드

div#hello -> 1+ 100 = 101 로 우선순위 1번
div.hello -> 1+ 10 = 11 로 우선순위 2번

css는 우선순위1번이 적용된다.

 

클래스명 정하는 방법

1. 누구 봐도 쉽게 이해할 수 있고 다시 사용하기 쉬운 이름을 붙일 수 있어야한다.

 

2. 클래스명이 어떤 내용이나 역할을 나타내는지 명확해야 한다.

좋은 예 나쁜 예

.gallery-title	.g-t
.page-title, .post-title	.title1 , .title2

좋은 예는 무엇을 나타내는지 파악이 쉽지만 나쁜 예는 어떤걸 나타내는지 추측을 하거나 알 수 없다.

 

3. 영어로 통일

영어를 한글 발음으로 옮겨 적는다던가, 한글로 적게 하자.

한글을 모르는 사람도 내 코드가 뭘 뜻하는지 알기 쉽게 적는 것이 좋다. (button -> btn)

 

4.올바른 철자 사용

button을 buttan으로 굳이 오타 내지말고 btn 같은 약어를 사용하도록 하자.