CSS3 Pseudo-Class, background-size, text-overflow, word-break, column-count 등 (학습 31일차 TIL)

210721 그동안 배운 선택자를 복습하고 새로운 속성 선택자, 슈도 클래스 선택자, background-size에 대해 학습했다.

CSS3 tips

• 속성 선택자를 활용하여 스타일을 적용할 수 있다.

a[href^="http"] { 
  color: orange;
}
a[href$="html"] {
  color: red;
}
a[href*="www"] {
  font-weight: bold;
  font-style: italic;
}
/* 속성^="속성값 시작", 속성$="속성값 마지막", 속성*="속성값 포함" */

• 새로 알게 된 Pseudo-class 선택자

li:empty { /* 빈 항목 선택(공백,텍스트 없어야 함) */
  border: 1px solid red;
  padding: 50px;
}
/*
only-child 유일한 자식을 선택
only-of-type 해당 유형의 유일한 항목 선택
*/

• resize 속성을 이용하면 요소의 크기를 사용자가 임의대로 조절할 수 있다.
  (resize: both/horizontal/vertical 3가지가 있음)
• background-origin으로 이미지의 위치를 지정할 수 있다.
  {padding-box(default), content-box, border-box}
• background-clip으로 배경 속성을 어디부터 적용할 것인지.
  {padding-box, content-box, border-box(default)}
• appearance: none으로 form 속성의 고유한 디자인을 초기화 할 수 있다.
• outline은 border바깥쪽으로 테두리를 그림.
• white-space: nowrap 줄바꿈 없음. 그 외에 pre,pre-wrap,per-line 있음
• text-overflow: ellipsis 넘치는 텍스트 말 줄임표로...
• word-wrap: break-word 철자가 긴 영문일 경우 줄바꿈 할 때 적용
• word-break: break-all 단어를 끊어줄 때 사용
  {ex) 영문으로 된 문단을 justify하면 한 칸 이상의 공백이 생김, 이것을 해결할 수 있음}
• column-count 속성을 이용해 단을 나눌 수 있다.
  (column-gap 문단 간격, column-rule 구분선 속성도 추가할 수 있음)