- HTML / CSS 2

• 굵기: font-weight
• 밑줄, 가로줄: text-decoration
• 자간: letter-spacing
• 행간: line-height

 

 

가로로 정렬할 경우 text-align을 사용합니다. 유효한 값으로는 left, right, center, justify(양쪽 정렬)가 있습니다.

세로로 정렬할 경우에는 문제가 조금 복잡합니다. vertical-align 속성을 쉽게 떠올릴 수 있지만, 이 속성은 부모 요소의 display 속성이 반드시 table-cell이어야 합니다. 세로 정렬이란, 정렬하고자 하는 글자를 둘러싸고 있는 박스의 높이가, 글자 높이보다 큰 경우에만 적용할 수 있는데, 박스를 먼저 학습한 다음에 이해하는 게 좋습니다. 이후 학습할 박스 모델 및 레이아웃에서 이 문제를 조금 더 자세히 다룹니다.

 

 

 

<h4 id="nav-title">This is the navigation section.</h4>
    <ul>
      <li class="menu special">Home</li>
      <li class="menu">Mac</li>
      <li class="menu">iPhone</li>
      <li class="menu">iPad</li>
    </ul>

#nav-title {
  color: mediumpurple;
}
li {
  text-decoration: underline;
  text-underline: mediumpurple;
}

.menu {
  color: darkblue;
}

.special {
  font-weight: bold;
  color: black;
}

 

 

 

 

 

 

 

 

크기의 단위

• 절대 단위: px, pt 등 (인쇄와 같이 화면의 사이즈가 정해진 경우에 유리)
• 상대 단위: %, em, rem, ch, vw, vh 등 ( 화면 너비나 높이에 따른 상대적인 크기가 중요한 경우에 사용하면 좋은 크기 단위)