[CSS] 자동 링크 완성, font, css hack

css링크 자동 생성 단축키

link:css [enter]

Web font

참조 : Google Fonts

• link 보다는 import 추천
• import 위치는 제일 상단
• body에 font-family 추가

CSS hack

• justify-content 대신 사용
• 레시피 같이 어디든 쓸 수 있다. 이상하지만 작동한다.

1. 상위 박스 : justify-content: center; -중앙으로 몰림
2. 내부 박스 범위 : width: 33%; -왼쪽으로 몰려서 범위 벌어짐, 왼쪽 위치할 박스는 왼쪽에 붙어서 정렬됨
3. 중앙에 위치할 박스 : display: flex; justify-content: center; -중앙에 위치할 박스만 중앙에 위치함
4. 오른쪽에 정렬할 박스 : display: flex; justify-content: flex-end; align-items: center; -오른쪽에 붙어서 정렬됨
5. status bar의 맨 오른쪽 div에서 icon들 사이의 간격을 줄 때

.status-bar__column .fa-battery-quarter {
margin: 0px 5px;
}

[코드]

.status-bar {
    display: flex;
    justify-content: center;
}

.status-bar__column {
    width: 33%;
}
.status-bar__column:first-child span {
    margin-right: 5px;
}

.status-bar__column:nth-child(2) {
    display: flex;
    justify-content: center;
}
.status-bar__column:last-child {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.status-bar__column .fa-battery-full {
    margin: 0px 5px;
}