☀️ 텍스트 속성
color (글자 색상)
글자의 색상을 변경하는 속성입니다. html에서는 색상 사양을 지정하여 141개의 색상 이름을 제공합니다. 이외에 RGB(red, blue, green) 시스템을 사용해 16,777,216(256³)가지의 색을 나타낼 수 있고, 각 색상을 두자리 수 16진수 세쌍으로 나타내는 HEX(16진수 RGB; #000000)시스템을 사용할 수 있습니다. ('text-color' 가 아님을 유의해야 합니다.)
🌿 색상 시스템
- 글자 외에도 배경(backgound-color)이나 박스테두리(border-color) 등 에도 색상을 적용할 수 있습니다.
- RGB(Red, Green, Blue) Model : 인터넷, 브라우저, 컴퓨터, 텔레비전, 카메라 등에서 활용되는 가산 컬러 시스템입니다. 빛의 삼원색인 빨강, 초록, 파랑을 적절하게 가산하여 다양한 색상을 표현할 수 있습니다. 각 채널(색상)별로 0~255까지의 값(즉 266가지)을 가지며 값이 커질 수록 밝은 색이 됩니다. 👉🏻
rgb(0, 0, 0)은 검정색입니다. 안에 순서대로 red, green, blue의 값을 넣으면 됩니다.- 16진법 색상 표현(HEX Color) : RGB 색을 기반으로 하여 16진법으로 표기한 것입니다. 더 짜임새 있는 색상명과 색상차트를 만들기위해 색상에 숫자를 부여하고, 문자를 사용해 더 짧게 표기합니다. 한 자릿수에 더 많은 정보를 담을 수 있습니다. 👉🏻
#ffffff(흰색) 처럼 '#'을 붙이고 뒤에는 두자리씩 red, green, blue의 16진수를 나타냅니다.- 웹 안전 색상 : 기존 RGB의 6글자를 3글자로 줄인 것으로 호환성을 위해 표준으로 설정한 색을 말합니다. 색의 값은 51(최댓값인 255를 5로 나눈 값)의 배수로 이루어져 있습니다. 각 0, 51, 102, 153, 204, 255 단계로 00, 33, 66, 99, CC, FF로 표현해 모두 216가지의 수로 줄였습니다.
font-size (글자 크기)
텍스트의 크기를 조절할 때 사용합니다. 절대단위와 상대단위 둘 다 사용할 수 있으나, 다양한 화면을 지원하기 위해서는 상대단위를 쓰는 것이 좋습니다. 단위에 관해서는 이 포스트의 후단에서 설명합니다.
font-family (글꼴, 폰트)
텍스트의 글꼴을 변경하는 속성입니다. 보통 font stack을 값으로 넣습니다. font stack은 사용하려는 폰트를 순서대로 적은 목록으로 ,를 사용해 대체할 글꼴을 나열하고 글꼴은 stack 순서대로 적용됩니다. 개발자는 최소 한 개의 generic family를 추가해 대체 폰트를 제공해야 합니다. 하지만 브라우저에 빌트인된 폰트에 따라 글꼴은 다르게 표현됩니다.
- https://cssfontstack.com 👉🏻 가장 널리 쓰는 폰트 목록과 window/mac 기기 지원 현황을 알 수 있습니다.
- 지원되지 않으면 의도했던 폰트와 다르게 보입니다. (아예 안보이는 것은 아닙니다.)
🎀 웹 폰트 기술
- 내가 보여주고 싶은 글꼴을 항상 적용할수있는 것은 아니라서 개발자의 의도를 사용자에게 충분히 전달할 수 없는 문제가 있습니다. 웹 폰트 기술은 개발자가 표현하고 싶은 글꼴을 사용자 기기에 적용할 수 있도록 필요에 따라 웹에서 다운로드하게 하는 기술입니다.
- google fonts 서비스는 다양한 웹 폰트를 쉽게 사용할 수 있도록 해줍니다.
<link>태그를 사용해 간단하게 embed할 수 있습니다.
font-weight (글자 굵기)
텍스트의 굵기를 조정하는 속성입니다. 숫자(100~900)나 bold 같은 키워드를 사용할 수 있습니다. 다만 사용하는 글꼴에서 해당 굵기를 지원하지 않으면 임의로 효과를 만들어 부자연스러울 수 있습니다.
- 400,
normal: 보통 폰트 가중치 - 700,
bold: 굵은 폰트 가중치 lighter: 부모요소보다 얇은 폰트 가중치bolder: 부모요소보다 굵은 폰트 가중치
font-style (글자 스타일)
: 텍스트 스타일을 조정하는 속성입니다. 이탤릭체와 같은 스타일을 줄 수 있습니다. 역시나 사용하는 글꼴에서 지원하지 않으면 브라우저에서 임의로 효과를 만들어냅니다.
text-decoration (텍스트 꾸밈 선)
텍스트에 밑줄이나 취소선 같은 장식을 추가하는 속성입니다.
🌿
text-decoration: none;
<a>태그와 같은 경우, 밑줄과 색이 브라우저에서 부여합니다. 이때 이러한 브라우저 기본 효과를 없애기 위해none값을 부여합니다.
text-shadow
: x축, y축, blur, color; 순서대로 적어 텍스트에 그림자 효과를 추가하는 속성입니다. 사용자에게 버튼임을 알려주기 위해 많이 사용됩니다(UX).
text-transform
: 텍스트의 대소문자 변환을 CSS에서도 할 수 있습니다. 모두 대문자로 변환하는 uppercase;, 모두 소문자로 변환하는 lovercase;, 단어의 첫글자를 대문자로 변환하는 capitalize;, 그리고 full-width;값이 있습니다.
text-align (글자 정렬)
태그(h1)전체를 움직일 순 없습니다. 해당 내용의 한도내에서만 적용됩니다.
- left(default) : 기본적으로 왼쪽으로 정렬됩니다.
- center : 가운데 정렬됩니다.
- right : 오른쪽 정렬됩니다.
letter-spacing (자간)
문단에서 줄 간격을 조절할 수 있습니다.
☀️ 배경 속성
background 에 -color/-image/-repeat/-attachment/-position/-background 옵션을 부여할 수 있습니다.
background-color (배경 색상)
단순히 색깔 옵션만 부여해 사용할 수 있습니다. 기본값은 transparent(투명) 이며 색상명이나 색상코드를 사용할 수 있습니다. 웹 접근성을 준수하기 위해 글자색과 명암비를 고려해 결정하는 것이 좋습니다. 또한 배경 이미지를 사용하는 경우에도 이미지를 로딩할 수 없는 상황을 대비해 배경색을 지정해주는 것이 권장됩니다.
background-image (배경 이미지)
: 배경 이미지를 지정할 때 사용합니다. 기본값은 none(없음) 이며, 이미지의 위치를 상대 또는 절대 경로로 나타낼 수 있습니다. 속성값을 명시할 때는 url(" ") 함수를 사용합니다.
background-repeat
: 배경이미지가 주어진 영역에 꽉 차지 않는 경우 이미지를 반복할 방식을 결정합니다. 기본값은 repeat인데 바둑판식 배열이 그것입니다. repeat-x는 가로방향으로만 반복하고, repeat-y는 세로방향으로만 이미지를 반복합니다. no-repeat은 반복을 원하지 않을 때 사용합니다.
background-position
: 배경 이미지가 주어진 영역에서 어디에 위치할 지 결정합니다. 일반적으로 backgroudn-repeat를 no-repeat으로 설정해놓고 사용합니다. (반복되면 위치를 지정하는 의미가 없기 때문입니다.) 왼쪽 상단에 위치시켜 주는 0% 0%가 기본값이며, top, bottom, left, right, center 같은 방향키워드를 사용해 절대/상대 단위를 사용해 지정할 수 있습니다.
background-size
: 배경 이미지의 크기를 결정합니다. 기본값은 auto인데 이미지의 실제 크기를 사용합니다. 절대/상대 단위를 이용해 지정할 수도 있고, 주어진 영역에 따라 자동으로 크기를 조절하는 키워드도 있습니다. cover은 배경이미지가 짤리더라도 주어진 영역을 덮도록 크기를 맞추며, contain은 주어진 영역안에 이미지가 모두 들어오도록 크기를 맞춥니다.
background-attachment
: 스크롤 시 배경이미지가 따라갈지, 그대로 있을 지를 결정합니다.
☀️ 단위
🪴 절대 단위
- cm(센티미터), mm(밀리미터), px(픽셀) 등이 있습니다. 가장 흔히 쓰이는 절대단위는 'px'입니다. , 1px = 1/96th of 1in
px (픽셀)
가장 흔히 쓰이며, 1px은 1/96th of 1in입니다. 절대 단위이지만 모니터에 따라 상대적인 크기를 가집니다.
기기나 브라우저 사이즈 등 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우 px를 사용합니다. 픽셀은 고정된 절대 단위이므로 사용자 접근성이 불리합니다. 제목을 강조하기 위해 지정했지만 사용자 환경에 따라 일반 텍스트보다 작게 보일 수도 있습니다. 또 픽셀은 모바일 기기처럼 작고 고해상도의 기기에 적합하지 않습니다. 인쇄와 같이 화면 사이즈가 정해진 경우에 적합합니다.
🪴 상대단위
- 상대단위 : CSS 폰트사이즈 속성 값이 고정되지 않고 기준에 따라 비례에 맞춰 유동적으로 바뀔 수 있는 길이를 나타내는 단위입니다. (em, rem, %, vw, vh 등이 있습니다)
%
- 부모값이나 요소값을 기준으로 항상 다른 값과 상대적입니다.
- 하지만 몇 가지 특성의 %는 다르게 작용합니다. 요소 자체의 다른 값이나 자체의 폰트 크기를 기준으로 합니다. (ex. 줄 간격)
vw
viewport 너비의 1%
vh
viewport 높이의 1%
🎀 화면사이즈(viewport)
- 반응형 웹 기준점 : 너비에 따라 유동적인 레이아웃이 적용되는 웹사이트를 반응형 웹이라고 합니다. 디바이스 크기별로 CSS를 달리적용해야 합니다. iPhone_12_Pro_Max의 너비는 414px이고, 보통 450px미만 너비를 갖는 디바이스는 스마트폰 세로모드라고 봅니다.
- 화면 너비나 높이에 따른 상대적 크기가 중요한 경우 : vw, vh를 사용합니다. 웹 사이트에서 보이는 영역을 viewport라고 하고 width와 heigh를 각각 vw, vh라고 합니다. 1vw는 보이는 영역너비의 1/100, 1vh는 보이는 영역 너비의 1/100을 뜻합니다. 화면을 가득 채우는 사이즈의 웹페이지는 100vw, 100vh를 사용해 구현한 것입니다.
🪴 em 과 rem (상대단위)
em의 경우
- 상대적 단위로 다른 값에 영향을 받습니다. 해당 단위가 사용되는 요소의 폰트 사이트 속성값을 기준으로 합니다. (해당 요소의 폰트사이즈 속성이 없으면 부모의 폰트사이즈를 기준으로 합니다. )
- 글꼴 크기가 바뀌면 자동적으로 바뀝니다.
- 트리구조의 상속성으로 내부 요소로 들어갈 수록 단계별로 값이 누적되는 단점이 있습니다.
rem의 경우
- em의 단점을 개선해서 최상위 요소인 HTML root 요소의 글자 크기를 기준으로 합니다. 문서 전체에서 하나의 글꼴 크기에 비례하므로 개별 요소의 font-size 속성값은 중요하지 않습니다.
- 가급적 rem단위를 우선적으로 쓰는 것을 권고합니다. em은 영향을 주는 변수가 많아 재사용이 어렵고 유지보수가 힘들어지기 때문입니다. 브라우저 기본글자 크기 1rem을 기준으로 크기를 조절할 수 있습니다. 사용자가 설정한 기본 글꼴 크기를 따르므로 접근성에 유리합니다.
