[웹 개발] 단위, 배경, 박스모델 (1)

CSS Reference를 통해 확인 가능한 사항들은 다음과 같습니다.

www.w3schools.com/

W3Schools Online Web Tutorials

 

developer.mozilla.org/ko/

MDN Web Docs

정의	해당 속성이 어떤 변화를 일으키고 어떻게 동작하는지 파악할 수 있습니다. 기본 값 상속 여부 애니메이션 가능 여부 사용 가능한 CSS버전
문법	해당 속성값을 어떤 식으로 나열하여 사용하는지를 파악할 수 있습니다.
속성 값	해당 속성이 인식하여 적용할 수 있는 값의 형태나, 키워드 등을 파악할 수 있습니다. Initial : 초기값, 즉 속성의 기본값으로 정의 (ie에서 지원하지 않음) Inherit : 부모 요소의 해당 속성 값을 적용 (상속 가능할 요소일 경우) 즉, 상속이 불가능한 속성일 경우에는 적용 되지 않습니다.
지원 범위	해당 속성이 정의에 맞게 동작 가능한 CSS 버전, 브라우저별 버전을 확인할 수 있습니다. 어떤 브라우저의 어떤 버전이냐에 따라 같은 값이어도 다르게 렌더링 될 수 있으므로, 현재 프로젝트의 사용자 제공 지원 범위를 잘 확인하고 적용해야 합니다.
예제	문법과 속성값을 바탕으로 실제로 속성을 동작하는 예제 코드를 확인할 수 있습니다.
참고 사항	해당 속성에 대해 특이사항이나 버그에 대해서 확인할 수 있습니다.

 

단위는 크게 절대 길이 단위와 상대 길이 단위로 구분되어 집니다.

 

절대 길이

절대 길이는 고정된 크기 단위로, 다른 요소의 크기에 의해 영향을 받지 않습니다.

• px ( 1px = 1/96th of 1 inch )

절대 길이이므로 다른 요소의 영향을 받지 않아 화면에서 고정된 크기를 가지지만, 장치의 해상도에 따라 상대적입니다.
여러 환경에서 디자인을 같게 표현하고 브라우저 호환성에 유리한 구조로 되어 있어서,
디자인 의도가 많이 반영된 웹사이트의 경우 픽셀 단위를 사용하는 것을 권장하고 있습니다.

• pt ( 1pt - 1/72 of 1 inch )

컴퓨터가 없던 시절부터 있던 단위입니다. 
인쇄물이나 워드프로세서 프로그램에서 사용된 가장 작은 표준 인쇄단위입니다. 
웹 화면에 인쇄용 문서를 위한 스타일을 적용할 때 유용하게 사용할 수 있습니다.
그러나 사용하는 기기의 해상도에 따라 차이가 있어 W3C에서도 pt는 웹개발 시 권장하는 단위가 아닙니다.
예를 들면 Windows에서는 9pt = 12px, Mac에서는 9pt = 9px 로 보이게 됩니다.

 

상대 길이

상대 길이는 다른 요소의 크기나 폰트 크기, 브라우저(viewport) 등의 크기에 따라 상대적으로 값이 변합니다.

• %
  • 부모의 값에 대해서 백분율로 환산한 크기를 갖게 됩니다.

• em
  • font-size를 기준으로 값을 환산합니다. 소수점 3자리까지 표현 가능합니다.

• rem
  • root의 font-size를 기준으로 값을 환산합니다.

• vw
  • viewport의 width값을 기준으로 1%의 값으로 계산됩니다.

 

Color 속성 

폰트의 색상 값을 적용할 때 사용하는 속성입니다. 

h1  {  color: 색상 값;}

 

색상 값 지정 방식

• 컬러 키워드 
  
  CSS 자체에서 사용 가능한 문자 식별자입니다.
  red, blue, black 등과 같이 미리 정의되어있는 키워드를 이용해 색상을 표현할 수 있습니다.
  * 참고 : transparent는 투명을 나타내는 키워드 *
  
  
• 16 진법    ex.  #RRGGBB
  
  6자리의 16진수(0-9, A-F)는 각각 두 자리씩 세 가지 색상을 나타냅니다.
  첫 번째 두 자리는 적색(RR), 가운데 두 자리는 녹색(GG), 마지막 두 자리는 청색(BB)을 의미합니다.
  각 자리의 알파벳은 대소문자를 구분하지 않습니다.

 

• 16 진법   ex.  #RGB
  
  6자리의 16진수에서 각각의 두 자리가 같은 값을 가지면 3자리로 축약하여 사용할 수 있습니다.
  예를 들어, #aa11cc 는 #a1c로 축약하여 사용할 수 있습니다.
  
  
• RGB( )
  
  RGB 값은 rgb(R, G, B)의 형태로 각 변수 값(R 적색, G 녹색, B 청색)의 강도를 정의합니다.
  0~255의 정수로 된 값을 지정할 수 있으며, 0 → 255는 검정 → 흰색으로 값의 변화를 나타냅니다.
  
  
• RGBA( )
  
  RGBA 값은 기존 RGB에서 A값이 추가된 형태입니다.
  rgb(R, G, B, A)의 형태로 각 변수는(R 적색, G 녹색, B 청색, A 투명도)의 강도를 정의합니다.
  A 값은 0 ~ 1 사이의 값을 지정할 수 있으며, 0.5와 같이 소수점으로 표기합니다.
  0 → 1은 투명 → 불투명으로 값의 변화를 나타냅니다.
  예를 들어, rgba( 0, 0, 0, 0)는 투명한 색상을 가지게 됩니다.