14. 스타일링

8662 단어 beginnerstutorialjavascriptwebdev

키 너비



현재 키보드 레이아웃이 비현실적으로 보입니다. 예를 들어 space 버튼은 alt 또는 ctrl 처럼 작습니다.

키보드 모양:



키보드 모양:



두 번째 이미지나 실제 키보드를 자세히 보면 기본 키(문자 및 숫자)와 보조 키(Tab, Backspace, Ctrl, Alt 등)가 있음을 알 수 있습니다.

모든 기본 키는 동일한 고정 너비를 갖습니다. 그러나 그 수는 맨 위 행에서 맨 아래로 줄어듭니다. 그리고 보조 버튼은 너비를 늘려 이러한 숫자 감소를 보완합니다.

행 2와 3에는 각각 13개의 기본 키와 1개의 보조 키가 있습니다. 백스페이스와 탭의 너비는 동일하며 기본 키 너비의 약 1.8입니다. 따라서 각 행 너비는 14.8 단위라고 말할 수 있습니다.

행 4에는 11개의 기본 키와 2개의 보조 키가 포함됩니다. CapsLk와 Enter의 너비는 동일합니다.
(14.8 - 11)/2 = 1.9

기본 키의 수와 각 행의 보조 키의 너비 보정과 같이 계산하고 보다 사실적인 보기를 얻기 위해 몇 가지 근사를 수행하여 키보드 스타일을 얻습니다.

스타일.css

/* specified keys */

/* 1st row */

.key.Backspace {
    flex: 1.8;
}

/* 2nd row */
.key.Tab {
    flex: 1.8;
}

/* 3d row */
.key.CapsLock {
    flex: 2;
}

.key.Enter {
    flex: 2;
}

/* 4th row  */
.key.ShiftLeft {
    flex: 2.5;
}

.key.ShiftRight {
    flex: 1.5;
}

/* 5th row  */
.key.Space {
    flex: 8;
}


이러한 스타일을 사용하면 키보드가 사실적으로 보입니다.

수직 정렬



이제 키보드가 화면 상단에 배치되었습니다. 좀 비대칭입니다. 수직으로 중앙에 위치시키자.

개발자 도구 열기: 크롬 페이지 --> 검사 --> 탭Elements(Console 근처)을 마우스 오른쪽 버튼으로 클릭합니다. 요소 중첩을 살펴보십시오.


<div id="app">를 중앙에 배치하기 위해 스타일body 및 기타 스타일을 감싸는 요소(display: flex)에 추가합니다. 우리는 또한 시맨틱 태그를 추가합니다: header , footer 및 main -- 인터넷 페이지의 좋은 속성.

index.html

<body>
    <header>
        <h1>Keyboard Learning App</h1>
        <p>
            Read a tutorial for beginners on
            <a href="">how to code this app from the scratch</a>
        </p>
    </header>
    <main>
        <div id="app"></div>
    </main>
    <footer>
        <div class="socialLinks">
            <a href="https://github.com/apayrus/keyboard">Github</a>
            <a href="https://twitter.com/ApayRus">Twitter</a>
        </div>
    </footer>
    <script src="./index.js" type="module"></script>
</body>


스타일.css

body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    min-height: 100vh;
    margin: 0; /* by default body has margin 8px, we don't need it */
    padding-left: 8px;
    padding-right: 8px;
}

header {
    text-align: center;
}

main {
    width: 100%;
}

footer {
    text-align: center;
}

a {
    text-decoration: none; /* removed underline */
}

a:visited {
    color: blue;
}

.socialLinks a {
    display: inline-block;
    margin: 0.5rem;
}


결과



Diffs in code 14

Entire code after the chapter 14

축하합니다



지금까지 이 튜토리얼을 따랐다면 감사합니다. 이 모든 것을 배우기 위해 많은 시간을 보냈습니다(14장). 솔직히, 나도 - 그것을 쓰기 위해.

이 튜토리얼이 전 세계의 초보자에게 도움이 되기를 바랍니다. 그리고 프로젝트 자체는 사람들이 자신의 언어가 고정된 수의 키가 있는 단일 하드웨어 키보드에 어떻게 맞춰지는지 확인하는 데 도움이 될 것입니다. 그것은 우리를 하나로 묶습니다.
Solidity에서 요구 vs 주장
VBA로 주보 자동화

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage