아래 내용은 학원 수업 및 온라인 강좌 등을 듣고 정리한 내용입니다.

CSS Declaration

문법

선택자 (속성과 값을 지정할 대상을 검색 및 선택), 속성, 값으로 구성

ex1.
선택자 {속성: 값; 속성: 값; 속성: 값;} // 가독성이 떨어짐

ex2.
선택자 {
	속성: 값;
    속성: 값;
}

선언방식

1. inline : html의 요소에 직접 작성 (선택자가 별도로 필요하지 않음), 같은 작업을 반복해야 하는 경우. 유지보수에 취약
   (js를 통해 삽입하는 방식으로 사용가능함. js를 통해 삽입하는 방식이 아닌 직접 작성하는 방식은 지양할 것)

<div style="속성: 값; 속성: 값;">

2. 내장방식 : head element안에 <style>에 작성
3. 외장방식(링크) : <link>로 파일명.css로 작성파일을 불러옴.(추천)
   (@import를 통해 css파일 안에서 외부 css 파일을 가져오기도 함)

ex1. // 병렬방식으로 불러옴
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="style2.css" />

ex2. // 직렬방식으로 파일을 호출하기 때문에 속도나 기타 등등의 문제가 있을 수 있음. 주의해서 사용할 것!
@import url(" ");

직렬방식 : 상위 파일의 호출이 끝난 후 다음 파일을 불러오고 그 다음 파일을 불러오게 된다.

CSS reset

태그는 특정한 스타일을 가지고 있고 각 브라우저마다 출력되는 형태가 다르다. 때문에 브라우저의 스타일을 초기화해서 사용해야한다.

CSS 단위

• px : 일반적으로 사용되는 단위
• % : 부모 요소의 영향을 받는다
• em : 자기 자신의 폰트 사이즈에 영향을 받는다. *font-size를 em으로 설정시 부모로부터 상속받은 font-size에서부터 계산함. 중간 단계의 폰트 사이즈에 영향을 받으므로 관리가 어렵다.
• rem : root(html)에 지정된 폰트 사이즈에 영향
• vw : 보여지는 화면의 width
• vh : 보여지는 화면의 height
• vmin : 보여지는 화면중 더 짧은 길이로 계산
• vmax : 보여지는 화면 중 더 긴 길이로 계산

vw, vh, vmin, vmax 에서 v는 viewport라는 의미로서 보여지는 화면의 viewport로 영향을 받기 때문에 백분율로 계산된다.

css 표준 명세

https://www.w3.org/TR/CSS22/