TIL 21.09.09 CSS

🎨 CSS 개요

✍️ CSS 폰트 관련 속성

✏️ CSS font(size, style, weight)

color 
  폰트의 색깔을 지정해주는 property로 사용한다.

font-size
  폰트의 크기를 지정해주는 property로 사용한다.
  기본 설정 값은 16px이다.
  단위로는 px, %, em 등을 사용한다.

font-style
  폰트의 스타일을 지정해주는 property로 사용한다.
  italic, oblique 값이 위 property에 대응하는 값으로 상응한다.
  value로 normal 사용시 부모 특성을 상속받지 않는다.

font-weight
  폰트의 굵기를 지정해주는 property로 사용한다.
  기본 초기값은 normal이며 수치상으로 400과 동일하다.
  <stron>과 의미적으로 상이하며 단순히 굵게 표시하고자 할 때 사용한다.
  font 스타일이 지원하는 수치일 경우 해당 property 사용이 가능하다.

✏️ font(family)

  font 스타일을 적용하는 property로 사용한다.
  아래와 같은 코드가 있을 때 순차적으로 값을 폰트에 적용시킨다.
  
  예를 들어 1번째가 지원이 안되고 2번째가 지원이 될 경우 
  .serif class 내용에 해당하는 폰트의 글꼴 BlinkMacSystemFont로 적용된다.
  
  폰트 패밀리를 여러개로 나누어 쓰는 이유는 해당 글꼴이 없을 때 
  최종적으로 브러우저가 지원하는 글꼴을 적용시키기 위함이다.
  마지막 글꼴에는 브라우저가 최소한으로 지원하는 기본 글꼴을 적는다.
  
  적용하고자 하는 글꼴에 공백이 있을 경우 아래와 같이 
  작음 따옴표를 사용하여 '글 꼴'처럼 만들어준다.

  .serif {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 
    Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  }

✏️ line-height

  폰트의 위 아래의 공백을 포함한 간격을 line-height라고 부른다.
  
  동일한 내용과 같은 크기 서로 다른 폰트를 갖고 있는 content가 있다고 했을 때
  폰트 스타일에 따라 라인 하이트가 달라진다.
  
  따라서 스타일링적인 요소에서 통일감을 주기 위해 line height를 사용한다.

✏️ font와 단축속성(shorthand)

 font의 속성을 간편하게 작성하고자 할 때 아래와 같은 순서를 지켜
 필요한 property만을 font에 부여하여 사용하는 것을 권장한다.

.text {
  font: font-style font-weight font-size/line-height font-family;
}

.text {
  font: italic 100 20px/1.7 'Times New Roman', Times, serif;
}

 font의 단축속성이 적용 순서에 맨 마지막에 있을 때 
 위에 font와 관련된 특성이 있다 하더라도 상속이 되지 않기 때문에 주의하여 작성
 아래와 같이 코드를 작성 할 경우 font-style: italic; 이 상속되지 않는다.

.text {
  font-style: italic;
  font: 100 20px/1.7 'Times New Roman', Times, serif;
}

✏️ letter spacing, word spacing

  폰트의 글꼴에 따라 정해진다. 따라서 가공을 원할 경우 css를 통해 조정해주어야한다.
  
  양수 및 음수로 값을 조정할 수 있다.
  기본 값은 normal이다. 가독성을 위해 폰트 제작자가 설정해 놓은 값이다.
  
  특이점으로 '%'단위를 사용할 수 있고 '%'의 기본값은 100%이다.

  .text {
    letter-spacing: 1px;
    word-spacing: 1px;
  }

✏️ text-align

  text-align 적용시 주의사항
  
  text-align text이면서 text를 제외한 width의 폭이 어느정도 있어야 한다.

.text {
  text-align: center    /*left or center or right*/
}

✏️ text-indent

  지정한 selector의 내용 앞에 주어진 값만큼 들여쓰기를 해준다.
  
  퍼센트를 값으로 설정할 수 있다.
  50%로 값을 설정 할 경우 보여지는 width 폭의 반이 들여써진다.
  
  주의 할 점은 inline 요소에는 text-indent가 적용되지 않는다.

  .paragraph1 {
    text-indent: 20px;
  }

  .container  {
    text-indent: 50%;
  }

✏️ text-decoration

  4가지의 프로퍼티를 하나로 합친 property.
  여러개의 속성을 지정해서 한줄로 작성할 수 있다.
  
  text-decoration-(line color style thickness)을 합친 것이다.

  text-decoration-line의 경우 아래줄 위줄 중간줄 없음의 특성을 줄 수 있다.
  
  여러개의 줄을 적용하고 싶을 때 공백으로 구분해 나열해서 적어주면 된다.
  
  폰트 칼라 설정시 라인도 같이 적용이 되고 선만을 따로 색을 설정할 수 있다.
  font단축 속성과 달리 순서와 상관없이 property를 적어도 적용된다.
  
  주의 할 점은 순서는 상관은 없으나 여러 라인을 적용하고 싶을 경우 
  해당 property 끼리는 붙여서 적어주어야한다. 

  .text {
    text-decoration-line: none; /*none underline overline line-through*/
  }

  .text {
    text-decoration-line: underline overline line-through;
  }
  
  .text {
    color: aqua
    text-decoration: red 2px wave;
  }

✏️ word-break (break-all, keep-all)

  아래와 같이 html code와 css code가 있을 때
  word-break의 속성이 어떻게 쓰이는지를 알아보자.
  
  아래와 같이 a를 길게늘여 쓰고 
  그 때의 폭이 width의 120px을 넘긴다고 가정했을 때
  
  첫번째 css로 스타일링만을 할 경우 다음과 아래아래와 같은 결과물이 나온다.

  <div class="container">
    <p lang="en">
      aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    </p>
  </div>

  .container {
    width: 120px;
    background-color:tomato;
  }

  하지만 아래와 같이 한가지 속성을 덧붙여 추가해주었을 때
  
  wod-break: break-all; 이 하는 기능은 
  텍스트가 자신의 콘텐츠 박스 밖으로 오버플로 할 때 줄을 바꿀 지 지정하는 역할을 한다.

  .container {
    width: 120px;
    background-color:tomato;
  }
  
  p[lang=en] {
    word-break: break-all;
  }

  2번째 예제를 살펴보자
  
  이번에는 word-break 요소로 break-all이 아닌 keep-all 값이 쓰였을 때
  어떻게 작동하는지 살펴보기로 하자.
  
  keep-all로 작성 할 경우 공백을 만나기 전까지 텍스트가 줄바꿈 되지 않는다.
  위의 경우 가로폭을 넘어가는 시점부터 줄바꿈이 되었다면
  
  keep-all 속성의 경우 스페이스를 만날 때 까지 줄바꿈이 이루어지지 않고 글자
  가 유지되는 특징이 있다.

  <div class="container">
    <p lang="ko">
      가나다라마바사아자 차카타파하
    </p>
  </div>

  .container {
    width: 120px;
    background-color:tomato;
  }

  p[lang=ko] {
    word-break: keep-all;
  }

✏️ text-transform (capitalize, uppercase, lowercase)

  한국어에는 적용되지 않는다.
  
  capitalize 
   단어의 앞이 대문자로 변경된다.
   
  uppercase
   지정된 부분의 내용이 모두 대문자로 변경된다.
   
  lowercase
   지정된 부분의 내용이 모두 소문자로 변경된다.

✍️ CSS 단위와 값

✏️ 절대길이

절대길이
상대길이와 대비되는 개념이다.
절대 길이로 알아야 하는 단위로는 px이 있다.

상대길이
절대길이와 대비되는 개념이다.
em, rem 같은 단위들이 상대 단위이다.

✏️ 상대길이(em, rem)

em

1em === 부모의 font-size를 나타낸다.

만일 부모요소에 em 단위를 적용시킬 경우
브라우저의 기본 크기인 16px을 기준으로 적용시킨다.

.parent {
  font-size: 2em;
}

위와 같은 code가 있고 parent class의 부모 요소가 body 하나 뿐일 때
기본 크기 16px을 기준으로 곱하기 2를 한 크기가 적용이 된다.

.parent {
  font-size: 2em;
}

.child {
  font-size: 0.5em;
}

child class가 parent class의 자식 class일 때
child class의 단위는 em이므로 부모 요소의 폰트 1em을 기준으로 계산된다.

rem

root의 폰트 사이즈를 기준으로 계산해서 적용된다.

브라우저의 기본 font-size를 기준으로 한다.

em 보다 rem을 사용하기 용이하다. 

브라우저의 기본글꼴 크기 설정을 바꿀 때
웹페이지의 크기가 적용되는 것을 알 수 있다.

✏️ 상대길이 (vw, vh)

vw (viewport width)

viewport의 길이 기준을 100으로 간주한다.

vh (viewport height)

body {
  margin: 0;
}

.container {
  background-color: coral;
  
  width: 50vw;
  height: 50vh;
}

 위와 같이 코드를 작성 할 경우 보이는 화면의 가로와 세로의 절반 크기 만큼만을 차지한다.
 
 device의 보이는 크기를 기준으로 하여 값이 적용되는 것이 위 단위의 특징이다.

✏️ 상대길이 (vmin, vmax)

viewport 안에서 가로 세로 중 더 큰 값이 vmax가 되고 작은 값이 vmin이 된다.

body {
  margin: 0;
}

.container {
  background-color: coral;
  
  width: 100vmin;
  height: 100vmin;
}

 위와 같이 작성 할 경우 device 가로와 세로 크기 중
작은 값을 vmin으로 먼저 값을 결정한 이후에 해당 크기의 1/100 비율을 적용하여 계산한다.

✏️ 퍼센트

 부모 요소의 값을 기준으로 한다. 예를 들어 부모의 가로가 100px 세로 100px일 때
 
 width: 50%, height: 50%로 적용시킬 경우 
  
 가로 50px 세로 50px의 결과물을 얻게 되는 것이다.

  <div class="parent">
    <div class="child"></div>
  </div>

   body {
    margin: 0;
   }
  
   .parent {
     width: 100px;
     height: 500px;
     background-color: blue;
   }
  
  .child {
    width: 50%;
    height: 50%;
    background-color: indianred;
  }

✏️ 함수 표기법 (calc(), max(), min() )

  위의 표기법을 사용하는 이유는 여러가지 단위를 동시에 사용할 수 있기 때문
  + - * / 를 사용할 때 양쪽에 공백을 넣어준다.

  <div class="container">Lorem</div>

  .container {
    width: calc(100% - 50px);
    height: calc(100vh /2);
  
    background-color: wheat;
  }

  위와 같이 코드를 작성했다고 했을 때 가로폭은 보이는 장치의 폭의 최대치로 하면서
  그 값에서 50px을 제외한 부분만을 가로 길이로 한다는 의미이다.
  
  높이의 경우 보이는 장치의 높이의 길이를 최대치로 하면서 해당 높이를 2으로 나눈 값
  을 높이의 길이로 한다는 의미이다.

  .container {
    width: max(100% 500px);
    height: calc(100vh /2);
  
    background-color: wheat;
  }

  html code는 동일하다고 가정했을 때 위와 같이 작성한 경우 max() 함수는 안에
  인자로 들어간 값 중에서 가장 큰 값을 반환한다.
  
  위의 코드의 경우 화면 가로 크기가 500px 이하로 떨어지는 값을 예상할 수 없다.