🧡 CSS 속성

💚 텍스트 속성

텍스트 속성

color

: 글자의 색상을 변경하는 속성입니다. HEX(16진수 RGB; #000000) 또는 주요 색상의 이름(red, blue, green...)을 사용할 수 있습니다. 글자 외에도 배경(backgound-color)이나 박스테두리(border-color)에도 색상을 적용할 수 있습니다. ('text-color' 가 아님을 유의해야 합니다.)

font-size

: 텍스트의 크기를 조절할 때 사용합니다. 절대단위와 상대단위 둘 다 사용할 수 있으나, 다양한 화면을 지원하기 위해서는 상대단위를 쓰는 것이 좋습니다. (단위 후술)

font-family

: 텍스트의 글꼴을 변경하는 속성입니다. 글꼴의 이름은 " "(따옴표)를 붙여서 적용할 수 있습니다. (,)콤마를 사용해 대체될 수 있음을 나타낼 수 있고 앞에 적힌 순서대로 적용됩니다. 제작자는 최소 한 개의 generic family를 추가해 브라우저가 대체할 수 있는 폰트가 필요한 경우 선택할 수 있게 해야 합니다.

fallback

: 사용하려는 글꼴이 존재하지 않거나, 지원하지 않은 경우. 혹은 표현하고 싶은 글꼴이 없거나 사용할 수 없는 경우를 대비해 추가할 수 있는 글꼴입니다. 여러 글꼴을 사용하는 경우 ,(쉼표)로 구분하여 입력할 수 있고 입력된 순서대로 적용됩니다.

🎀 웹 폰트 기술

• 내가 보여주고 싶은 글꼴을 항상 적용할수있는 것은 아니라서 개발자의 의도를 사용자에게 충분히 전달할 수 없는 문제가 있습니다. 웹 폰트 기술은 개발자가 표현하고 싶은 글꼴을 사용자 기기에 적용할 수 있도록 필요에 따라 웹에서 다운로드하게 하는 기술입니다.
• google fonts 서비스는 다양한 웹 폰트를 쉽게 사용할 수 있도록 해줍니다. <link>태그를 사용해 간단하게 embed할 수 있습니다.

font-weight

: 텍스트의 굵기를 조정하는 속성입니다. 숫자나 bold 같은 키워드를 사용할 수 있습니다. 다만 사용하는 글꼴에서 해당 굵기를 지원하지 않으면 임의로 효과를 만들어 부자연스러울 수 있습니다.

• normal : 보통 폰트 가중치 : 400
• bold : 굵은 폰트 가중치 : 700
• lighter : 부모요소보다 얇은 폰트 가중치
• bolder : 부모요소보다 굵은 폰트 가중치

font-style

: 텍스트 스타일을 조정하는 속성입니다. 이탤릭체와 같은 스타일을 줄 수 있습니다. 역시나 사용하는 글꼴에서 지원하지 않으면 브라우저에서 임의로 효과를 만들어냅니다.

text-decoration

: 텍스트에 밑줄이나 취소선 같은 장식을 추가하는 속성입니다.

text-shadow

: x축, y축, blur, color; 순서대로 적어 텍스트에 그림자 효과를 추가하는 속성입니다. 사용자에게 버튼임을 알려주기 위해 많이 사용됩니다(UX).

text-transform

: 텍스트의 대소문자 변환을 CSS에서도 할 수 있습니다. 모두 대문자로 변환하는 uppercase;, 모두 소문자로 변환하는 lovercase;, 단어의 첫글자를 대문자로 변환하는 capitalize;, 그리고 full-width;값이 있습니다.

text-align

: 좌, 우, 중앙 등 다양한 방향으로 텍스트를 정렬할 수 있습니다.

vertical-align

: 부모요소인 display 속성이 table-cell일 때 사용할 수 있는 세로 정렬입니다. 정렬하고자 하는 글자를 둘러싼 박스의 높이가 글자 높이보다 큰 경우에만 적용할 수 있습니다.

---

💚 배경색 속성

🤍 background 와 background-color

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 : 밀리미터
  in : 2.54cm = 96px
  pc : Picas, 1pc = 1/6th of 1in
  pt : 포인트, 1pt = 1/72th of 1in
  px : 픽셀, 1px = 1/96th of 1in

상대단위

• 상대단위 : CSS 폰트사이즈 속성 값이 고정되지 않고 기준에 따라 비례에 맞춰 유동적으로 바뀔 수 있는 길이를 나타내는 단위입니다. (em, rem, %, vw, vh 등이 있습니다)

px

: 픽셀, 모니터에 따라 상대적인 크기를 가집니다.

기기나 브라우저 사이즈 등 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우 px를 사용합니다. 픽셀은 고정된 절대 단위이므로 사용자 접근성이 불리합니다. 제목을 강조하기 위해 지정했지만 사용자 환경에 따라 일반 텍스트보다 작게 보일 수도 있습니다. 또 픽셀은 모바일 기기처럼 작고 고해상도의 기기에 적합하지 않습니다. 인쇄와 같이 화면 사이즈가 정해진 경우에 적합합니다.

ex

: x-height, 해당 폰트의 소문자 x의 높이를 기준으로 합니다.

%

: 브라우저 기본 글꼴크기를 100%로 하는 상대적 크기를 나타냅니다.

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의 경우

• 최상위 요소(html, 루트)의 폰트사이즈 속성값을 의미합니다. rem단위를 사용하면 해당 요소의 폰트사이즈 속성값은 중요하지 않게 됩니다.
• 가급적 rem단위를 우선적으로 쓰는 것을 권고합니다. em은 영향을 주는 변수가 많아 재사용이 어렵고 유지보수가 힘들어지기 때문입니다. 브라우저 기본글자 크기 1rem을 기준으로 크기를 조절할 수 있습니다. 사용자가 설정한 기본 글꼴 크기를 따르므로 접근성에 유리합니다.

---