CSS 공통 내용

학습일 : 2022. 09. 05

---

CSS 
CSS 속성(Property)은 다음과 같이 작성한다. ("는 없는것으로 한다.)

속성 이름 : 속성 값;

CSS 속성은 세미콜론(;)으로 구분하여 여러개 작성할 수 있다.

겹치는 속성은 아래와 같은 순서로 우선되어 적용된다.
  1. 속성 값 뒤에 !important 를 적은 경우. (나중에 CSS가 엄청 꼬이기 때문에 잘 사용 하지 않음)
  2. 보다 명확하게(복잡하게) 해당 요소를 선택하는 경우. (ID 선택자 > 클래스 선택자 > 요소 선택자)
  3. 복잡도가 같다면 보다 아래에 적힌 경우.

 

 

의사 클래스(Pseudo Class)
어떠한 선택자에 의해 선택된 요소의 상태나 특성에 따라 선택자를 분기하기 위해 사용한다. 콜론(:)을 활용하여 다음과 같이 작성한다. 

선택자:의사 클래스 {
	... 
}

 

 

색상 지정 방법은 아래와 같다.
  1. 리터럴(Literal) : 미리 지정된 시스템의 색상을 단어로 표시한 것. 가령, red, green, blue, black, white 등이 있음.

  2. RGB 함수 : rgb(r, g, b) 함수를 통해 색을 지정한다. 이 때 각 r, g, b 값은 0부터 255까지 이며 숫자가 높을수록 각 적, 녹, 청색이 많이 들어가게 된다. 가령 rgb(255, 0, 0)은 완전 빨간색(red)이며, rgb(0, 0, 0)은 검은색(black), rgb(255, 255, 255)는 흰색(white)이다.

  3. RGBA 함수 : rgba(r, g, b, a) 함수를 통해 색을 지정한다. 위 RGB 함수와 용법은 동일하며 마지막 a 값은 불투명도이고 0% 부터 100%까지의 값이다. 0%는 완전 투명, 100%는 완전 불투명이다.

  4. 헥스 코드(Hex Code, 16진법 코드) : #rrggbb 혹은 #rrggbbaa 방식으로 작성한다. 각 rr, gg, bb, aa 값은 00 부터 ff 까지 적을 수 있다. 이는 RGB 함수의 각 r, g, b 10진법 값이 16진법으로 변한 값으로, 0을 00으로, 255를 ff로 표시한다. 이때 불투명도(aa) 값 또한 0% ~ 100%에 해당하는 값을 00 부터 ff 까지의 16진수로 표시한다. 마찬가지로 00은 완전 투명, ff는 완전 불투명이다. 

  - (불투명도 %) * 255 / 100 값에 대해 소수점을 절사하고 해당 값을 16진수로 변환하면 된다. 
  - 가령, 50%의 불투명도는 50 * 255 / 100 의 방식으로 계산되며 이 값은 127.5 이고 이를 절사하면 127이 된다.
      이 10진수 값 127을 16진수로 변환하면 7f 가 된다.

 

크기는 아래와 같은 단위를 사용할 수 있다.
  픽셀(Pixel) : 픽셀 단위로 크기를 지정한다. 가령 100px. 단, 픽셀 단위는 정적인 단위(Static Unit)임으로 사용을 피한다.

  em : 부모가 가진 폰트 크기(font-size)에 대비하는 비율로서의 크기이다.
  가령, 부모 요소의 폰트 크기가 16px 이라면 1em은 16px과 동일하다.

  rem : 브라우저에서 설정한 폰트 크기에 대비하는 비율로서의 크기이다.
 가령, 브라우저에 기본 폰트 크기가 16px 이라면 1rem은 16px과 동일하다.

 vw (Viewport Width) : 현재 브라우저의 가로 크기에 대비하는 비율이다.
가령 100vw 는 화면 가로 크기 전체이고 50vw는 그 절반이다. 단, 이때 스크롤 바의 크기는 무시함으로 주의한다.

 vh (Viewport Height) : 현재 브라우저의 세로 크기에 대비하는 비율이다.
가령 100vh 는 화면 세로 크기 전체이고 50vh는 그 절반이다. 단, 이때 스크롤 바의 크기는 무시함으로 주의한다.



파일 작성시 확장자는 'css'이고 해당 파일 내에는 CSS 문법을 바로 적는다