CSS 문법과 선언방식, 단위

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

CSS Declaration

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

문법

ex1. 가독성이 떨어지므로 이러한 방식으로 작성하는 것은 추천하지 않는다.

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

ex2.

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

선언방식

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

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

2. 내장방식 : head elment안에 <style>에 작성
3. 외장방식(링크) : 로 파일명.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("./style.css");

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

CSS reset

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

CSS 단위

• px : 일반적으로 사용되는 단위
• % : 부모 요소의 영향을 받는다. (부모 요소의 너비(width)에 대한 비율)
• 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/