開始します。👏

ふーん!タイトルが実現しました!🤣
せっかくのレイアウトタスクなので、
それともどれも意味のあるデザインなので、すべてが悩みです.😥
しかし、汚れたコードではなく、きれいに完成していて、個人的には満足しています.
他の人に対して参考になることを望んで、自分の成長の基礎になります!
では、私のタイトル生成過程を教えてあげます!👏👏

本題📃

まず私は大きな危機に直面しました!3つの反応型はなんですか~🤣🤣...😥
もうすぐ来る和弦の量を思うと、めまいがします!
なぜなら、いつかもっと多くのコードを書くからだ.逆にいい感じ(涙を流して)😁😁
まず次のように表記します.

index.html

    <Header class="header">
        <section class="header__copies">
            <h5 class="header__platform-info">기술 중심 개발자 채용 플랫폼</h5>
            <h1 class="header__main-copy">
                <span>개발자 채용의 끝은,</span>
                <span>결국 코드니까</span>
            </h1>
            <h3 class="header__sub-copy">
                <span>이력서보다, 당신의 코드가 우선시되는</span>
                <span>프로그래머스만의 채용 프로그램을 만나보세요.</span>
            </h3>
            <button class="header__sign-up-btn">시작하기</button>
        </section>
        <div class="header__image-box">
            <img class="header__image" src="https://programmers.co.kr/packs/media/images/img-root-catch-1-9e73217e.png" alt="헤더 이미지">
        </div>
    </Header>

語義的にも有効で、字号に似たhのラベルを最大限に使用しました!
(基本サイズはなるべく触らないようにしていたのですが、同じように実現し、結局触られてしまいました・・・😥)
コンテナーはdivではなく、あるコピーをテーマにしているので、sectionと書きました.imgのラベルの前にfigureと書くと意味的にはもっと適当かもしれませんが、追加の説明はないのでdivと書きました!
ボタンもあればaと書いたらariaと書いてみたいですclickは意味的には正しいと思いますが、inline属性よりもJavaScriptでページ移動機能を実現しています!button

function openSignUpPage(e:MouseEvent):void {
        window.location.href = 'https://programmers.co.kr/users/signup';
    }

document.querySelector('.header__sign-up-btn').addEventListener('click',  openSignUpPage);

そうです!

_mediaQuery.scss

メディアクエリーの場合は、次のコメントを参照してください.大きく変わったのは設備の大きさを増やしただけで、あまり大きくありません!

/*
    프로그래머스의 주사용자는 코딩테스트를 위한 사람들이기 때문에
    모바일 퍼스트가 아닌, 데스크탑 위주로 작업하고자 하였습니다.
    따라서, breakpoint를 max-width로 하고, 

    ! tablet: 768px ~ 991px 
    ! mobile-and-tablet: 576 ~ 767px 
    ! 기타 device를 mobile로 통일했습니다.
*/ 

$mobile: 575px;
$mobile-and-tablet: 767px;
$tablet: 991px;

@mixin customMedia($device){
    @if $device == "mobile" {
        @media screen and (max-width: $mobile) {
            @content;
        }
    }
    @if $device == "mobile-and-tablet" {
        @media screen and (max-width: $mobile-and-tablet) {
            @content;
        }
    }
    @if $device == "tablet" {
        @media screen and (max-width: $tablet) {
            @content;
        }
    }
}

_color.scss

色には以下の2種類が追加されています.

// 버튼 색깔. 대체로 강조하는 표시는 다 이 색을 씀.
$blue-color: #0078FF;
// 살짝 약한 하얀색.
$sub-white-color: #E9ECF3;

style.scss

大きく変わったindex.tsはbreakpoint部分ですこちらです.
991 pxを超える:ヘッダーの991pxはflex-direction991 px以下:ヘッダのrowはflex-directionになった.
それに気づき、columnであっても、複数の分岐点の間で変更が行われ、より多くの分岐点が作成されます.
境界線ごとにフォントサイズが変化していくような気がしますのでいつかリキッドファンデーションになるような気がします😅

.header {
    display: flex;
    background: black;
    justify-content: center;
    padding: 3.5rem 1rem 2.5rem 1rem;
    .header__copies {
        width: 600px;
        color: white;
        .header__main-copy,
        .header__sub-copy,
        .header__platform-info {
            margin: 0;
        }
        .header__platform-info {
            color: $blue-color;
            font-size: $font-s;
            font-weight: 400;
            padding-bottom: 1rem;
        }
        .header__main-copy {
            font-weight: 500;
            font-size: 2.5rem;
            padding-bottom: 2.5rem;
            line-height: 1.4;
        }
        .header__sub-copy {
            font-size: $font-xl;
            font-weight: 400;
            padding-bottom: 2rem;
            line-height: 1.65;
            color: $sub-white-color;
        }
        .header__main-copy > span,
        .header__sub-copy > span {
            display: block;
        }
    }
    .header__image {
        width: auto;
        max-height: 350px;
        max-width: 540px;
    }
    .header__sign-up-btn {
        @include _button($isBanner: false);
    }
    // ~991px;
    @include customMedia("tablet") {
        flex-direction: column;
        .header__copies {
            width: 100%;
            text-align: center;
            .header__main-copy > span {
                display: inline;
            }
        }
        .header__sign-up-btn {
            margin-bottom: 2rem;
        }
        .header__image-box {
            display: flex;
            justify-content: center;
            width: 100%;
        }
        .header__image {
            width: 100%;
        }
    }
    // 767px;
    @include customMedia("mobile-and-tablet") {
        padding : 2.5rem 1rem 2.5rem 1rem; 
        .header__copies {
            .header__main-copy > span {
                font-size: 2.375rem;
                display: block;
            }
            .header__sub-copy > span {
                font-size: $font-l;
            }
        }
    }
    // 575px;
    @include customMedia("mobile") {
        .header__copies {
            box-sizing: border-box;
            .header__main-copy {
                padding-bottom: 2rem;
                span {
                    font-size: 2.125rem;
                }
            }
        }        
    }
}

結果、実施に成功しました!

終了時🌈

今までのんびり書いていたのでいつまでできるか心配でした
でも時間を割いて完成し続けます
まだ足りないことがたくさんあると思います.限りない批判を歓迎します!
どうぞご批判ください.😊