10일 후 CSS3 — 4일

18100 단어 tutorialbeginnerscsswebdev
CSS 학습 4일차에 오신 것을 환영합니다.

이전에 말했듯이 이 시리즈는 freecodecamp 채널의 멋진 YouTube 시리즈에서 영감을 받았습니다.

우리는 4일차에 8-Bit Mario로 시작할 것입니다. 코드 편집기를 열고 새 4.1-8BitMario 폴더와 그 안에 두 개의 파일 index.html 및 sandbox.css를 만듭니다.

다음으로 index.html에 기본 html을 넣습니다.

index.html

이제 마리오를 만들어 봅시다. sandbox.css로 이동하여 아래 코드를 복사합니다. background-color: #e7eef1 및 일부 box-shadow도 #e7eef1로 제공합니다. 그런 다음 그 위에 색상을 칠하고 있습니다.

.mario-block {
 display: inline-block;
 position: relative;
 margin: 80px auto;
 width: 16em;
 height: 16em;
}

.mario {
 display: block;
 width: 1em;
 height: 1em;
 background-color: #e7eef1;
 box-shadow: 0em 0em #e7eef1,
            1em 0em #e7eef1,
            2em 0em #e7eef1,
            3em 0em #e7eef1,
            4em 0em #e7eef1,
            5em 0em #e7eef1,
            6em 0em #e7eef1,
            7em 0em #e7eef1,
            8em 0em #e7eef1,
            9em 0em #e7eef1,
            10em 0em #e7eef1,
            11em 0em #e7eef1,
            12em 0em #e7eef1,
            13em 0em #e7eef1,
            14em 0em #e7eef1,
            15em 0em #e7eef1,
            0em 1em #e7eef1,
            1em 1em #e7eef1,
            2em 1em #e7eef1,
            3em 1em #e7eef1,
            4em 1em #e7eef1,
            5em 1em red,
            6em 1em red,
            7em 1em red,
            8em 1em red,
            9em 1em red;
}

위의 결과는 Mario의 모자의 일부를 보여줍니다.

모자

모든 코드를 넣어 마리오를 완성해 봅시다.

.mario {
    display: block;
    width: 1em;
    height: 1em;
    background-color: #e7eef1;
    box-shadow: 0em 0em #e7eef1,
            1em 0em #e7eef1,
            2em 0em #e7eef1,
            3em 0em #e7eef1,
            4em 0em #e7eef1,
            5em 0em #e7eef1,
            6em 0em #e7eef1,
            7em 0em #e7eef1,
            8em 0em #e7eef1,
            9em 0em #e7eef1,
            10em 0em #e7eef1,
            11em 0em #e7eef1,
            12em 0em #e7eef1,
            13em 0em #e7eef1,
            14em 0em #e7eef1,
            15em 0em #e7eef1,
            0em 1em #e7eef1,
            1em 1em #e7eef1,
            2em 1em #e7eef1,
            3em 1em #e7eef1,
            4em 1em #e7eef1,
            5em 1em red,
            6em 1em red,
            7em 1em red,
            8em 1em red,
            9em 1em red,
            10em 1em #e7eef1,
            11em 1em #e7eef1,
            12em 1em #ffc966,
            13em 1em #ffc966,
            14em 1em #ffc966,
            15em 1em #e7eef1,
            0em 2em #e7eef1,
            1em 2em #e7eef1,
            2em 2em #e7eef1,
            3em 2em #e7eef1,
            4em 2em red,
            5em 2em red,
            6em 2em red,
            7em 2em red,
            8em 2em red,
            9em 2em red,
            10em 2em red,
            11em 2em red,
            12em 2em red,
            13em 2em #ffc966,
            14em 2em #ffc966,
            15em 2em #e7eef1,
            0em 3em #e7eef1,
            1em 3em #e7eef1,
            2em 3em #e7eef1,
            3em 3em #e7eef1,
            4em 3em brown,
            5em 3em brown,
            6em 3em brown,
            7em 3em #ffc966,
            8em 3em #ffc966,
            9em 3em black,
            10em 3em #ffc966,
            11em 3em #e7eef1,
            12em 3em red,
            13em 3em red,
            14em 3em red,
            15em 3em #e7eef1,
            0em 4em #e7eef1,
            1em 4em #e7eef1,
            2em 4em #e7eef1,
            3em 4em brown,
            4em 4em #ffc966,
            5em 4em brown,
            6em 4em #ffc966,
            7em 4em #ffc966,
            8em 4em #ffc966,
            9em 4em black,
            10em 4em #ffc966,
            11em 4em #ffc966,
            12em 4em #ffc966,
            13em 4em red,
            14em 4em red,
            15em 4em #e7eef1,
            0em 5em #e7eef1,
            1em 5em #e7eef1,
            2em 5em #e7eef1,
            3em 5em brown,
            4em 5em #ffc966,
            5em 5em brown,
            6em 5em brown,
            7em 5em #ffc966,
            8em 5em #ffc966,
            9em 5em #ffc966,
            10em 5em black,
            11em 5em #ffc966,
            12em 5em #ffc966,
            13em 5em #ffc966,
            14em 5em red,
            15em 5em #e7eef1,
            0em 6em #e7eef1,
            1em 6em #e7eef1,
            2em 6em #e7eef1,
            3em 6em brown,
            4em 6em brown,
            5em 6em #ffc966,
            6em 6em #ffc966,
            7em 6em #ffc966,
            8em 6em #ffc966,
            9em 6em black,
            10em 6em black,
            11em 6em black,
            12em 6em black,
            13em 6em red,
            14em 6em red,
            15em 6em #e7eef1,
            0em 7em #e7eef1,
            1em 7em #e7eef1,
            2em 7em #e7eef1,
            3em 7em #e7eef1,
            4em 7em #e7eef1,
            5em 7em #ffc966,
            6em 7em #ffc966,
            7em 7em #ffc966,
            8em 7em #ffc966,
            9em 7em #ffc966,
            10em 7em #ffc966,
            11em 7em #ffc966,
            12em 7em red,
            13em 7em red,
            14em 7em #e7eef1,
            15em 7em #e7eef1,
            0em 8em #e7eef1,
            1em 8em #e7eef1,
            2em 8em red,
            3em 8em red,
            4em 8em red,
            5em 8em red,
            6em 8em blue,
            7em 8em red,
            8em 8em red,
            9em 8em red,
            10em 8em blue,
            11em 8em red,
            12em 8em red,
            13em 8em #e7eef1,
            14em 8em #e7eef1,
            15em 8em brown,
            0em 9em #ffc966,
            1em 9em #ffc966,
            2em 9em red,
            3em 9em red,
            4em 9em red,
            5em 9em red,
            6em 9em red,
            7em 9em blue,
            8em 9em red,
            9em 9em red,
            10em 9em red,
            11em 9em blue,
            12em 9em #e7eef1,
            13em 9em #e7eef1,
            14em 9em brown,
            15em 9em brown,
            0em 10em #ffc966,
            1em 10em #ffc966,
            2em 10em #ffc966,
            3em 10em red,
            4em 10em red,
            5em 10em red,
            6em 10em red,
            7em 10em blue,
            8em 10em blue,
            9em 10em blue,
            10em 10em blue,
            11em 10em yellow,
            12em 10em blue,
            13em 10em blue,
            14em 10em brown,
            15em 10em brown,
            0em 11em #e7eef1,
            1em 11em #ffc966,
            2em 11em #e7eef1,
            3em 11em #e7eef1,
            4em 11em blue,
            5em 11em red,
            6em 11em blue,
            7em 11em blue,
            8em 11em yellow,
            9em 11em blue,
            10em 11em blue,
            11em 11em blue,
            12em 11em blue,
            13em 11em blue,
            14em 11em brown,
            15em 11em brown,
            0em 12em #e7eef1,
            1em 12em #e7eef1,
            2em 12em brown,
            3em 12em brown,
            4em 12em brown,
            5em 12em blue,
            6em 12em blue,
            7em 12em blue,
            8em 12em blue,
            9em 12em blue,
            10em 12em blue,
            11em 12em blue,
            12em 12em blue,
            13em 12em blue,
            14em 12em brown,
            15em 12em brown,
            0em 13em #e7eef1,
            1em 13em brown,
            2em 13em brown,
            3em 13em brown,
            4em 13em blue,
            5em 13em blue,
            6em 13em blue,
            7em 13em blue,
            8em 13em blue,
            9em 13em blue,
            10em 13em #e7eef1,
            11em 13em #e7eef1,
            12em 13em #e7eef1,
            13em 13em #e7eef1,
            14em 13em #e7eef1,
            15em 13em #e7eef1,
            0em 14em #e7eef1,
            1em 14em brown,
            2em 14em brown,
            3em 14em #e7eef1,
            4em 14em #e7eef1,
            5em 14em #e7eef1,
            6em 14em #e7eef1,
            7em 14em #e7eef1,
            8em 14em #e7eef1,
            9em 14em #e7eef1,
            10em 14em #e7eef1,
            11em 14em #e7eef1,
            12em 14em #e7eef1,
            13em 14em #e7eef1,
            14em 14em #e7eef1,
            15em 14em #e7eef1,
            0em 15em #e7eef1,
            1em 15em #e7eef1,
            2em 15em #e7eef1,
            3em 15em #e7eef1,
            4em 15em #e7eef1,
            5em 15em #e7eef1,
            6em 15em #e7eef1,
            7em 15em #e7eef1,
            8em 15em #e7eef1,
            9em 15em #e7eef1,
            10em 15em #e7eef1,
            11em 15em #e7eef1,
            12em 15em #e7eef1,
            13em 15em #e7eef1,
            14em 15em #e7eef1,
            15em 15em #e7eef1;
  }

그것은 우리의 귀여운 8비트 마리오를 보여줄 것입니다.

마리오

다음으로 마리오에게 점프 애니메이션을 주자. sandbox.css에 아래 코드를 추가한 다음 Wahoo! 점프 마리오 버튼입니다.

점핑마리오

다음으로 우리는 가격표를 만들 것입니다. 코드 편집기를 열고 새 4.2-PricingTable 폴더와 그 안에 두 개의 파일 index.html 및 sandbox.css를 만듭니다.

다음으로 index.html에 기본 html을 넣습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Pricing Table | Code 10 Things in 10 Days with CSS3</title>
    <link rel="stylesheet" href="sandbox.css">
    <link href="[https://fonts.googleapis.com/css?family=Bubblegum+Sans|Nova+Mono|Roboto+Condensed](https://fonts.googleapis.com/css?family=Bubblegum+Sans|Nova+Mono|Roboto+Condensed)" rel="stylesheet">
</head>
<body>
    <div class="sandbox">
        <div class="content">
            <section>
                 <div class="pricing-table">
                    <div class="pricing-block">
                        <div class="pricing-header">
                            <div class="pricing-heading">Basic</div>
                            <div class="pricing-price">
                                <span class="pricing-     price__currency">$</span>
                                <span class="pricing-price__value">60</span>
                                <span class="pricing-price__duration">/mo</span>
                            </div>
                        </div>
                        <div class="pricing-body">
                            <ul class="pricing-features">
                                <li><strong>Primary</strong> Feature</li>
                                <li><strong>Additional</strong> Benefit</li>
                                <li><strong>1</strong> Bonus</li>
                            </ul>
                        </div>
                        <div class="pricing-footer">
                            <a href="#" class="pricing-button">Select</a>
                        </div>
                    </div>
                    <div class="pricing-block pricing-popular">
                        <div class="pricing-header">
                            <div class="pricing-heading">Awesome</div>
                            <div class="pricing-price">
                                <span class="pricing-price__currency">$</span>
                                <span class="pricing-price__value">90</span>
                                <span class="pricing-price__duration">/mo</span>
                            </div>
                        </div>
                        <div class="pricing-body">
                            <ul class="pricing-features">
                                <li><strong>Primary</strong> Feature</li>
                                <li><strong>Additional</strong> Benefit</li>
                                <li><strong>2</strong> Bonuses</li>
                                <li><strong>4</strong> Perks</li>
                                <li><strong>24/7</strong> Support</li>
                            </ul>
                        </div>
                        <div class="pricing-footer">
                            <a href="#" class="pricing-button">Select</a>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</body>
</html>

기본 html이 표시됩니다.

베이직

다음으로 sandbox.css에 몇 가지 기본 스타일을 추가합니다.

샌드박스

이제 아래와 같이 웹 페이지가 표시됩니다.

기초

다음으로 가격표에 더 많은 스타일을 추가하겠습니다.

더보기

그러면 아래와 같이 웹 페이지가 변경됩니다.

새 페이지

이제 가격 책정을 완료하겠습니다.

정가 - 가격

결과는 아래와 같습니다.

결과

이제 li과 ul의 스타일을 지정해 보겠습니다.

리와 울

결과는 아래와 같습니다.

울과 리 스타일

다음으로 바닥글의 스타일을 지정합니다.

바닥글

가격표가 거의 완성되었습니다.

가격표

이제 인기 있는 테이블을 다르게 스타일링할 차례입니다.

인기

가격표를 완성합니다.

완료

다음으로 CSS 변수에 대해 살펴보겠습니다. 그것들을 사용하여 변수에 값을 할당하고 나중에 프로그램의 다른 부분에서 사용할 수 있습니다.

코드 편집기를 열고 새 4.3-CSSVariables 폴더와 그 안에 두 개의 파일 index.html 및 sandbox.css를 만듭니다.

다음으로 index.html에 기본 html을 넣습니다.

기본 HTML

이제 변수 선언을 sandbox.css에 넣습니다. 우리가 그것을 사용하지 않기 때문에 아무 일도 일어나지 않을 것입니다.

샌드박스

브라우저에서는 아무 작업도 수행되지 않습니다.

아무것도

이제 이러한 변수를 사용할 것입니다. 숫자 단위로 수학을 할 수도 있습니다.

변수 사용

브라우저에 상자가 표시됩니다.

브라우저의 상자

이것으로 코스 4일차를 마칩니다.

동일한 코드here를 찾을 수 있습니다.
JavaScript DOM(문서 개체) 도우미
화살표 기능

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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