css 속성
css에는 굉장히 다양한 속성들이 있어서 어떤 걸 적용해야 할지 헷갈릴 때가 많았다.
알아 두면 좋은 속성들을 정리하자면...
텍스트를 꾸미는 속성들
-
굵기:
font-weight
normal
보통 폰트 가중치. 400 과 같음.
bold
굵은 폰트 가중치. 700 과 같음.
lighter
(가능한 폰트 가중치 중) 부모 요소보다 얇은 폰트 가중치.
bolder
(가능한 폰트 가중치 중) 부모 요소보다 굵은 폰트 가중치.
100, 200, 300, 400, 500, 600, 700, 800, 900
normal 과 bold 이외를 제공하는 폰트를 위한 숫자형 폰트 가중치로, 100이 제일 얇고 900으로 갈수록 점점 두꺼워진다. -
밑줄, 가로줄:
text-decoration
텍스트 장식은 모든 자손 텍스트 요소에 걸쳐서 적용된다. 따라서, 자식 요소는 부모가 적용한 텍스트 장식을 제거할 수 없다.
text-decoration: none;을 사용하여 방문했던 링크에 보라색 밑줄이 쳐지는 것을 막을 수 있다.👍🏻 -
자간:
letter-spacing
글자 사이 간격 -
행간:
line-height
줄 간격
절대 단위와 상대 단위
절대 단위: px, pt 등
상대 단위: %, em, rem, ch, vw, vh 등
글꼴 크기를 정할 땐 기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우에는 px을 사용하는 것이 좋다. 글꼴의 크기를 픽셀로 설정하면, 브라우저의 기본 글꼴 크기를 더 크게 설정하더라도 글꼴의 크기는 항상 설정된 픽셀로 고정되기 때문에 사용자에게 불편을 줄 수 있다.
따라서 픽셀은 인쇄와 같이 화면의 사이즈가 정해진 경우에 적합하다.
일반적인 경우엔 상대 단위인 rem을 사용하는 것이 좋다. root의 글자 크기, 즉 사용자가 설정한 브라우저의 기본 글자 크기가 1rem이며, 두 배로 크게 하고 싶다면 2rem, 작게 하려면 0.8rem 등으로 조절해서 사용할 수 있다.
css flex
flex CSS 속성은 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성이다. flex는 순서대로 flex-grow, flex-shrink, flex-basis의 단축 속성이 있다.
flex-grow
flex-container 요소 내부에서 할당 가능한 공간의 정도를 선언한다. 만약 형제 요소의 모든 flex-item 요소들이 동일한 flex-grow 값을 갖는다면, flex-container 내부에서 동일한 공간을 할당받는다. 하지만 flex-grow 값으로 다른 소수값을 지정한다면, 그에 따라 다른 공간값을 나누어 할당받는다. 예를 들어서 한 요소의 flex-grow:2이고 다른 두 요소들의 flex-grow:1이면 2 : 1 : 1의 비율로 공간을 차지한다.
flex나 절대 단위 등이 헷갈리는 부분이 있어서 많이 써 봐야 감이 올 거 같다.
