7/4 7/6 7/8 TIL(+7/10 과제) : 스타벅스 클론코딩

KDT/TIL

7/4 7/6 7/8 TIL(+7/10 과제) : 스타벅스 클론코딩

ebulsok 2022. 7. 7. 23:33

저번주에 포스코 다녀오고 글이 싹 밀렸다. TIL이라고는 쓰지만..😓 ㅎㅎ

7/4

BEM(block element modifier)

Block

- 가장 바깥쪽 상위 요소인 독립적 블록

- 재사용 가능: 따라서 보통 m, p 적용하지 않음

- 블록을 하위 요소로 가질 수 있음

- ex. header { }

Element

- 블록에 종속되는 하위요소

- 소속된 블록에 의존적

- 연결 방식: __ 이용

- ex. .header__logo { }

Modifier

- 블록에 종속되는 하위요소

- 엘리먼트의 모양 또는 속성이 변형된 경우 사용

- 기능은 같지만 모양이 다른 경우, 모양은 같지만 기능이 다른 경우 등

- 연결 방식: -- 이용

ex. .btn--primary { }

git

git clone 주소

git fetch origin: 상태 체크

git pull --all

인프런 헤더 만들기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- css -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
    <link rel="stylesheet" href="index.css">

    <!-- font awesome -->
    <script src="https://kit.fontawesome.com/26192e937e.js" crossorigin="anonymous"></script>
</head>
<body>
    <header>
        <div class="inner">
            <div class="header__logo">
                <a href="#"><i class="fa-brands fa-envira"></i></a>
                <a href="#">inflearn</a>
            </div>
            <ul class="header__menu">
                <li><a href="#">강의</a></li>
                <li><a href="#">로드맵</a></li>
                <li><a href="#">멘토링</a></li>
                <li><a href="#">커뮤니티</a></li>
                <li><a href="#">채용정보</a></li>
            </ul>
            <div class="header__search">
                <input type="text" />
                <i class="fa-solid fa-magnifying-glass"></i>
            </div>
            <div class="header__participation">
                <a href="#">지식공유참여</a>
            </div>
            <div class="header__btn">
                <div class="header__btn__login">로그인</div>
                <div class="header__btn__register">회원가입</div>
            </div>
        </div>
    </header>
</body>
</html>

/* common */
body {
    font-size: 16px;
}

a {
    text-decoration: none;
    color: #4a4a4a;
}

/* header */
header {
    border-bottom: 1px solid #c8c8c8;
    /* background-color: gray; */
}

header .inner {
    display: flex;
    position: relative;
    width: 1200px;
    height: 64px;
    padding: 0 32px;
    margin: 0 auto;
}

/* header logo */
header .inner .header__logo {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 32px;
}

header .inner .header__logo a {
    font-size: 32px;
    color: green;
}

header .inner .header__logo a i {
    font-size: 32px;
    color: green;
}

/* header menu */
header .inner .header__menu {
    display: flex;
    position: absolute;
    height: 32px;
    margin: auto;
    /* 중앙정렬
    left: 50%;
    transform: translate(-50%, 0); */
    left: 200px;
    top: 0;
    bottom: 0;
}

header .inner .header__menu li {
    padding: 8px 16px;
}

header .inner .header__menu li a {}

header .inner .header__menu li a:hover {
    color: #1dc078;
}

/* header search */
header .inner .header__search {
    position: absolute;
    height: 36px;
    margin: auto 0;
    right: 350px;
    top: 0;
    bottom: 0;
}

header .inner .header__search input {
    width: 148px;
    height: 36px;
    padding: 5px 9px;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: 3px;
    font-size: 1rem;
    background-color: #f6f6f6;
}

header .inner .header__search input:hover {
    border: 1px solid #c8c8c8;
}

header .inner .header__search input:focus {
    outline-color: #1dc078;
    /* outline: none;
    box-shadow: inset 0px 0px 0 2px #1dc078; */
}

header .inner .header__search i {
    position: absolute;
    right: 9px;
    font-size: 1rem;
    top: 0;
    bottom: 0;
    margin: auto 0;
    height: 1rem;
}

/* header participation */
header .inner .header__participation {
    position: absolute;
    right: 220px;
    top: 0;
    bottom: 0;
    margin: auto 0;
    height: 16px;
}

header .inner .header__participation a {}

header .inner .header__participation a:hover {
    color: #1dc078;
}

/* header button */
header .inner .header__btn {
    display: flex;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    right: 0;
    height: 32px;
}

header .inner .header__btn .header__btn__login {
    margin: 0 8px 0 0;
    padding: 8px;
    border: 1px solid #dbdbdb;
    border-radius: 3px;
    box-sizing: border-box;
    background-color: white;
}

header .inner .header__btn .header__btn__register {
    padding: 8px;
    box-sizing: border-box;
    border: 1px solid #dbdbdb;
    border-radius: 3px;
    background-color: #ff7867;
    color: white;
}