[Web Fe] CSS정리하기 2

 

 

저번 포스팅에 이어서 CSS 학습내용을 정리 할 것입니다.

 

 

값, 단위, 색

 

앞에서 소개했듯이 값이란, 키워드나 특정 단위(픽셀 퍼센트)를 이용하여 원하는 스타일을 적용합니다. 이는 속성과 쌍을 이뤄 사용합니다.

Css에서 background등 다양한 속성이있는것과 같이 다양한 값이 있습니다.

그리고 이러한 프로퍼티마다 쓸수있는 값이 정해져있습니다. 예시로 position프로퍼티는

Static absolute relative fixed의 값을 사용합니다. 이와 같이 프로퍼티에 사용되는 값을 아는 것은 매우 중요합니다

 

 

값의 자리에 들어갈수 있는 값은 숫자값, 키워드, 색 등 다양합니다.

 

보통은 글자사이즈 너비나 높이를 정하는데 숫자값을 이용한다. 숫자값으로 크기를 조정합니다

 

 

 

숫자값 단위에는 수많은 단위가 존재하는데요 예를들어 픽셀 인치 센치미터 밀리미터등.. 이들은 은 잘쓰이지않기 때문에 설명하지 않겠습니다. 그래서 우리는 대표적 웹에서 숫자값의 단위인 PX EM REM위주로 정리하겠습니다.

 

 

 

픽셀은 화소 한 개의 크기를 뜻합니다.

우리가 보통 모니터 해상도라고 알고있는 1920X1080 해상도 모니터 이게바로 픽셀 수입니다.

가로로 1920 새로 1080 즉 약 200만개의 픽셀로 이루어져있습니다.

근데 여기서 궁금증이 많은 학생들은 생각할 겁니다. 어? 24인치 모니터하고 32인치 모니터 동일하게 1920 1080 이면 24인치의 모니터의 1픽셀은 작아지지않나요?

 

 

다음과 같이 css에서 1px은 절대적 길이 입니다.

 

 

다음으로 em과 rem은 분명히 같은방식으로 동작하지만 그 차이가 존재합니다.

먼저 픽셀이 절대적인 길이였는데 em과 rem은 상대적인 길이라는 것이 공통점입니다.

여기서 어떤것을 기준으로 길이를 잡는지가 차이점인데,

결론부터 말씀드리면 em은 현재 스타일이 지정된 요소의 폰트사이즈기준

Rem은 최상위 요소의 폰트사이즈 기준입니다.

즉 1em(1rem)의 크기는 기준 폰트사이즈크기 * 1em(rem)입니다.

예를 들어 10em(rem)이라면 기준폰트사이즈 크기가 16px이라면 *10을 해 160px이됩니다.

 

 

 

그렇다면 이러한 까다로운 em rem은 왜쓰는 것일까요?

그냥 편하게 px로 통일하면 되지않나요? 아시는 바 있으신가요?

우리는 웹을 컴퓨터뿐만아니라 모바일로도 봅니다.

또한 테블릿뿐만아니라 다양한사이즈가있습니다. 따라서 브라우저 환경변화나 축소 확대시를 대비해 상대길이인 em rem을 사용합니다. 하지만 em은 상속문제로 쓰는걸 권장하지 않습니다. 그래서 rem을 권장합니다

 

다음 퍼센트는 상대 길이 즉 보통 이미지나 레이아웃 너비나 높이를 지정할 때 씁니다. 사용법은 수치 퍼센트 적어주시면되므로 쉽습니다.

 

 

앞서 표현한색상들은 대게 키워드였습니다.

근데 이는 한계가있습니다 .

키워드 외에 표현방법으로 hex code rgb hsl등이있습니다.

주로쓰는건 hex code, rgb

이들은 그림판이나 포토샵등에서 확인가능합니다.

Hex color는 #으로 시작해 #00000은 검정 #ffffff는 하양 등을 보신적있을겁니다.

Rgb는 red green blue로 0~255의 숫자를 입력해 색상을 조정합니다.

 

 

 

텍스트와 관련된 프로퍼티

 

먼저 font- family입니다.

먼저 times new roman 과 같이 띄워쓰기나 하이픈이 있는경우 한단어임을 표기해야 하므로 따옴표를 씁니다.

또 보시다시피 Font family를 통해 폰트을 정의할때는 보통 동시에 여러 개를 지정합니다. 모든 이용자의 기기에 해당 폰트가 없을수도 있기 때문인데요, 때문에 앞에서 부터 차례로, 첫번째가없으면 두번째를 지정합니다. 그렇기때문에 마지막글꼴은 모든os에 있는 일반글꼴을 쓰는게 일반적입니다.

 

로컬에 저장된 폰트가아닌 손쉽게 웹에서 불러와서 사용할수있는 웹폰트 도 있습니다. 웹폰트는 링크를 통해서 쉽게 불러옵니다.

웹폰트는 이렇게 설치할필요없이 간단하게 웹서버에서 불러오므로 유용하게 쓰일수 있습니다

폰트스타일입니다. 폰트스타일은 이탤릭체 노말 오빌리크가 있습니다.

노말은 기본글자체입니다.

이탈릭은 이탈릭체가 디자인된 글씨체고

오블리크는 무조건 글자를 기울여서 표현합니다.

 

 

폰트 웨이트같은경우는 굵기를 지정할때 쓰입니다 . 볼드 혹시 100~900까지 숫자를 쓸수있습니다.

400은 노말 볼드는 700입니다.

이때 주의할점은 몇몇폰트는 낮은 weight를 줘도 그 글자가 작아지지 않는데 이는 그 폰트가 특정 weight이하로 디자인이 되어있지 않기때문입니다.

 

Ms워드에서 위와같은 텍스트 정렬기능을 보신적있으실텐데요, css에서도 동일한 기능을 하는 속성이 존재합니다.

 

텍스트 얼라인은 텍스트를 좌 우 중앙으로 정렬합니다.

라인헤이트같은경우는 문장사이의 간격을 조정하죠.

네 근데여기서 주의해야할점은 라인헤이트는 line간의 헤이트가 아니라 line의 헤이트입니다.

레터스페이싱은 장평 자간 들어보셨죠 네 그 중 자간입니다. 즉 글자간의 간격이죠.

 

다음 lineheight 입니다 .

id up은 24px로, down은 2 로 정렬을 원합니다. 여기서 여기서 단위없는 숫자값은 해당폰트사이즈 기준 배로 만들어줍니다.