TIL#3 | Kokoa clone_1

html

• !는 html 기본 서식을 빠르게 입력할 수 있는 단축키

BEM(Block Element Modifier)

: 보통 id, class 이름은 일반적이어서 구분을 짓기 위하여 부모요소__자식요소로 이름을 짓는 방법
🤔 css를 보다 파악하기 쉽게 만들어주지만 단점이 하나 있다면 class 이름 길이가 너무 길어질 수 있다는 것! 이 점을 유의하여 id와 class를 번갈아쓰는 사람도 있으니 나에게 맞는 방법 찾기

• block : .btn {}
• elements : .btn__price {}
• modifiers : .btn--big {}

Icon

1. 직접 이미지 아이콘 추가
   : 직접 이미지를 만들고 추출하거나
2. 링크 추가
   -Heroicons
   -Fontawesome

Font

1. link보다는 import를 생성 (추천)
   -import 위치는 제일 상단
2. body에 font-family 추가
   💡모든 폰트를 추가하면 웹사이트 무거워져서 쓸 아이들만 줍줍

+Google Font! 웹사이트에서 font들 참고

주석

<!-- 내용 -->
: 브라우저에게는 보이지 않고, 사용자만 볼수 있는 일종의 메모

---

CSS

reset CSS

: 브라우저에 기본적으로 적용되어 있는 스타일을 초기화 해줌.
: 먼저 브라우저 스타일을 없애고, 직접 디자인 하는게 더 좋은 방법

Text를 정렬

:h1, p tag같은 텍스트를 다루는 tag들을 가운데 정렬 할 때는 text-align 이용
🤔실험결과 -> flex를 사용해도 중간 정렬은 가능하지만 긴글형식일 때 잘 예쁘게 중간으로 되는게 아니라 왼쪽 붙음으로 되어버린다!

#login-form p {
    text-align: center;
    }

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;
-오른쪽에 붙어서 정렬됨

예시

<div class="status-bar">
        <div class="status-bar__column">
            <span>No service</span>
            <i class="fas fa-wifi"></i>
        </div>
        <div class="status-bar__column">
            <span>18:43</span>
        </div>
        <div class="status-bar__column">
            <span>110%</span>
            <i class="fas fa-battery-three-quarters"></i>
            <i class="fas fa-bolt"></i>
        </div>
    </div>

.status-bar {
     display: flex;
     justify-content: center;
     padding: 5px 3px
 }
 .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;
}