CSS에 대해서

CSS는 Casacading Style Sheet의 약자로, 뜻 그대로 계단식, 위에서 아래로 흐르는(폭포식) 방식으로 스타일을 지정하는 문서다. 구조, 디자인, 기능 중 디자인을 담당하고 있다.

CSS의 기본적인 문법

CSS의 문법은 매우 단순하다. HTML Tag는 아무런 표기 없이, class는 dot(.)을 이용하고, id는 #을 이용해 표기한다. 그리고 괄호는 무조건 중괄호 {} 만을 사용하고 중첩되지 않는다.(SCSS 등을 사용하면 더 편리하게 사용 가능하다) 가장 최종적으로 선언한 스타일이 적용된다. (!important 등의 예외가 있긴하다)

아래 예시를 살펴보자.

* {
	padding: 0;
    margin: 0;
}

#wrapper {
	background-color: #000;
    color: #fff;
}

.login-btn {
	background-color: ##1a73e8;
    color: #fff;
}

CSS를 사용하는 세가지 방법

스타일은 세가지 방법을 이용해 적용할 수 있다. 우선순위는 인라인, 내부, 링킹 순서다.

인라인: HTML 태그 안에 style 속성을 이용해 작성
<div style="background-color: #000;"></div>

내부: HTML에 style 태그를 이용해 작성
<div class="login-btn">로그인</div>
<style>
	.login-btn {
    	backgrond-color #000;
        color: #000;
	}
</style>

링킹: HMTL에 link 태그를 통해 외부 CSS 파일을 작성
<link rel="stylesheet" href="./css/style.css">

선택자 (selector)

선택자는 크게 다섯가지가 있다. 각 선택자가 하는 역할은 다음과 같다.

• 전체 선택자(*): 모든 요소를 선택한다. 주로 스타일 초기화 할 때 사용한다.
• 유형 선택자(tag): 해당 HTML 태그를 보유하고 있는 모든 요소를 선택한다.
• 클래스 선택자(.class): 해당 클래스를 보유하고 있는 클래스를 모두 선택한다.
• ID 선택자(#id): 해당 ID를 보유하고 있는 요소를 선택한다. HTML 문서에서 ID 태그는 단 한번만 사용할 수 있다
• 특성 선택자([attr=value]): 해당 특성을 보유하고 있는 모든 요소를 선택한다.