기본 CSS 요약 - Color / Units / Typography

[ Color ]

color formats

css는 색상을 표현하는 다양한 방법이 있습니다. 대부분은 16진수코드(#FFFFFF)로 사용하지만 이말고도 더 나은 옵션들이 있습니다.

 

만약 red컬러를 표현하고 싶다면, 아래의 네가지 표현법이 있습니다. 

1. Hex codes -#FF0000 => 가장 흔하게 사용한다. 2개씩 쪼개서 16진법으로 표현된다 
2. Keyword - red => 문제점이 많다. (사람마다 다름)
3. RGB - rgb(255,0,0) => hex codes랑 호환이 가능하다 
4. HSL - hsl(0deg, 100%, 50%) 

HSL을 쉽게 이해하기 위해서는  아래의 그림을 보면 이해하기 쉬운데, 방향(360도)을 동해 색을 나타내고 2번째 요소에 얼마나 색을 포화시킬지 3번째는 얼마나 밝게 표현할지 백분위로 나타내어 줍니다!

 

Transparency(투명도)

색상을 지정하고 나면 투명도 또한 지정이 추가적으로 가능합니다 ! 1은 아예 불투명 0은 투명입니다. 

HSL에서 이를 표현하는 방법을 보자면,

/*html*/

<div class="first box"></div>
<div class="second box"></div>
<div class="third box"></div>
<div class="fourth box"></div>

/*css*/
.box {
  width: 50px;
  height: 50px;
}
.first.box {
  background-color: hsl(340deg 100% 50% / 1);
}
.second.box {
  background-color: hsl(340deg 100% 50% / 0.75);
}
.third.box {
  background-color: hsl(340deg 100% 50% / 0.5);
}
.fourth.box {
  background-color: hsl(340deg 100% 50% / 0.25);
}

위와 같은 방법으로 한 색에 여러가지 투명도를 지정하여 표현할 수 있습니다. 

/ 슬래시는 어떤 의미인가요? 
/는 그룹의 이름으로 위의 hsl에서는 /를 기준으로 앞에는 색상 뒤에는 불투명도의 그룹을 표현합니다. 
explore 브라우저에서는 투명도를 사용하기 위해서는 hsla()함수를 사용하여야합니다. 

---

[ Unit ]

Ems

• em unit은 현재 글꼴 크기와 동일한 상대단위 입니다.
• 실제로 글꼴 크기에 대한 조정은 요소의 간격의 영향을 주기 때문에 자주 쓸 일은 없다. 

 

Rems

• rem이 em 단위와 비슷해보이지만, 차이점은 Root요소인 Html root의 글꼴을 기준으로 비율을 계산합니다.

html {
  font-size: 16px; //실제로 이렇게 해선 안 됨!
  font-size : 1.2em // 앱을 기준으로 20% 더 큼
}

• 16px을 기준으로 rem이 조정됩니다 (1rem = 16px)
• 이는 Dom트리의 어디에 있는 상관없이 일관선을 가질 수 있다. 

하지만 실제로 html태그에서 px를 설정해주어서는 안됩니다!

 

Percentages

• 백분위는 사용가능한 공간의 일부를 사용하는 방법으로 width와  height와 자주 사용됩니다.

/*css*/
.box {
  width: 250px;
  height: 250px;
  background-color: pink;
}

.child {
  width: 50%;
  height: 75%;
  background-color: black;
}

/*html*/
<div class="box">
  <div class="child"></div>
</div>

결과

어디에 어떻게 사용?

• typography에는 접근성의 이점을 주는 REM을 사용해라
• 패딩, 테두리, 여백 같은 속성의 경우 px을 사용하여 직관적으로 사용하자
• Width / height의 경우 고정인지 상대인지에 따라 다르다.
• 색상의 경우는 hsl을 사용하자 !

 

[ Typography ]

Font families

• css font-family property로 글꼴을 변경할 수 있습니다.
• 글꼴은 여러 문자의 집합으로 되어있어서 family라고 합니다.
• 예를 들어 roboto는 12개의 (6개 Font weight / 2개의 variant(nomal, bold)로 이루어져있습니다)
• 웹의 안전글꼴로는  serif / sans-serif / Monospace가 가장인기 있습니다. 
• Google에서 제공하는 글꼴을 사용하고 싶으면 아래의 스니펫을 이용하면됩니다.

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

• 사용하는 방법은 아래와 같습니다. 브라우저가 글꼴을 읽어들이는 것을 실패하는 경우 쉼표의 뒤의 글꼴을 사용합니다. 

font-family: 'Roboto', sans-serif;

 

Typical text formatting

일반적으로 사용하는 서식 옵션이 3가지가 있는데 Bold, Italic, Underline입니다.

 

1. Bold - font weight속성을 활용하여 굵은 텍스트를 만들 수 있습니다.

• 1 -1000까지의 숫자를 통해 굵기를 제어할 수 있습니다.

font-weight: bold;
/* Light, thin text*/
font-weight: 300;
/* Normal text */
font-weight: 400;
/* Heavy, bold text */
font-weight: 700;

<strong> 태그 font-weight: bold 과 같은 건가요? 
그렇기도 하고 아니기도 합니다~ <strong>은 정말 중요하거나 긴급하다는 것을 전달하기 위한 것이고 (경고문구)
font-weight: bold는 중요한 것이거나 시각적으로 두드러지길 바랄 때 사용하는 것입니다.(다양한 상황에서 사용)

2. Italic 

• 텍스트를 비스듬히 기울여 표현하는 속성입니다.
• 일반적으로 강조할 때 많이 사용합니다.

font-style: italic;

 

3. Underline

• 밑 줄이 그어진 것은 중요하다는 의미가 아닌 링크를 표현하는 속성입니다.

font-style : underline

/* remove underlines from anchor tags: */
a {
  text-decoration: none;
}

 

Alignment

• 텍스트의 정렬을 조정하는 속성입니다.
• text-align 속성을 사용하여 이동할 수 있습니다.
• 이미지와 같은 다른 요소도 정렬할 수 있지만, text를 위해 사용하는 것이 좋습니다. 

Text transforms

• text-tranforms 속성을 통해서 텍스트 형식지정이 가능합니다.

/* RENDER WITH ALL CAPS */
text-transform: uppercase;
/* Capitalize The First Letter Of Every Word */
text-transform: capitalize;

 

Spacing

• 간격 조정의 방법은 수평 수직 두 가지가 존재합니다.
• letter-spacing 속성을 통한 문자사이의 수평간격 조정
• line-height 속성을 통한 선 사이의 수직거리 조정(Chrome의 기준값 1.15 /  웹접근성을 위해서는 최소권장은 1.5입니다.)
• line-height 속성은 px는 사용하지 않는것이 좋습니다. 비례적으로 사용할 것 

letter-spacing: 3px;
  line-height: 2;