CSS [3] – Font 적용, Link Style 선택자, 속성 정리

CSS Tutorial – Full Course for Beginners

Lesson 6 – Typography

body {
  padding: 10%;
  font-size: 2rem;
  font-family: serif;
}

body {
  padding: 10%;
  font-size: 2rem;
  font-family: serif;
}

• font-family: 여러 개 작성시 fallback 으로 활용
  • Arial, Vernada 등 자주 쓰이는 그룹이 있으므로 적절히 활용

...
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Lato:wght@100&family=Lora&family=Open+Sans:wght@300;400;500;700&family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css">
</head>

• <link>로 웹폰트 사용시 html에 넣기

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100&family=Lora&family=Open+Sans:wght@300;400;500;700&family=Roboto:wght@300;400;500;700;900&display=swap');

• @import 사용시 css에 넣기

p {
  text-decoration: none;
  text-transform: capitalize;
  text-align: justify;
  text-indent: 2em;
}

• text-decoration: <span> element로 원하는 단어만 감싸서 사용하는 것 일반적
• text-indent: 문단 시작시 2em 인덴트 넣어줌

p {
  line-height: 1.5;
  letter-spacing: 0.1em;
  word-spacing: 2em;
}

• line-height: 줄 간격
• letter-spacing: 자간

p {
  font-weight: 300;
  font-style: italic;
}

• font-weight: 숫자나 bold, lighter, normal 등 예약어로 사용 가능

Lesson 7 – Styling Links

a {
  text-decoration: none;
  cursor: pointer;
  color: blue;
}

• web links / hypertext links
• cursor: not-allowed;

a:visited {
  color: purple;
}
a:hover, a:focus {
  color: dodgerblue;
}
a:active {
  color: red;
}

• psuedo sellector
• active: 클릭하고 있는 순간
• cascading 규칙이 적용되는 경우 주의
  • a 태그 위에 psuedo sellector가 있는 경우 specificity score가 높으므로 a 태그에 있는 중복 속성이 적용되지 않음
  • hover가 visited 위에 있는 경우 visited 된 링크에 hover가 적용되지 않음
• a:focus: screen reader accessibility