모사 코딩의 비망록

모사 코딩 목적

HTML, CSS, 페이지 레이아웃의 실용적인 사용법 배우기

디자인 캠프를 전제로 한, 코딩의 진행 방법을 배운다
(Figma 플러그인 사용)

이상 2점을 의식하고, 블루 병 커피 공식 온라인 스토어 과 YouTube 톱 페이지 의 2개를 모사했습니다. 이번에는 반응형 대응에 전혀 손을 대지 않았습니다.

완제품

깨달은 것

처음에 보자 보니 블루 병 커피의 사이트를 Figma를 사용하면서 코딩했습니다. image 요소는 Figma에서 얻을 수 없었기 때문에 직접 페이지에서 빌려줍니다. 드롭다운 메뉴는 원래 코드를 봅니다.
다음으로 【실천】 모사 코딩 방법 | HTML & CSS | Coding 을 참고로 YouTube 사이트의 코딩을 했습니다.

What I'm not sure

파트를 어디까지 세분화하면 좋을까?

HTML에 가능한 한 image 태그를 직접 기술하지 않는 방법은?

CSS의 공통 스타일을 어디까지 세분화하면 좋을까?

flex를 사용하기 쉽다?

클래스 이름을 지정하는 방법

DropDown Menu의 표시 위치 조정

레이아웃과 파트는 나누어 생각한다

YouTube

<div class="wrap_btn">
    <a href="#" class="btn_login">ログイン</a> 
</div>　

.wrap_btn {
  margin-top: 10px;  /*ボタンパーツの余白はレイアウトとして考える*/
}

(의사 요소 내에서) CSS 배경을 사용하여 이미지와 아이콘을 가져옵니다.

bulebottlecoffee

  <div class="hero">
      <div class="hero_bg"></div>
      <div class="contents">
        <p class="font_15">Event</p>
        <p class="font_22">オンラインセミナー</p>
        <button type="button" class="detail_btn">さらに詳しく</button>
      </div>
  </div>

.hero {    //div要素のbackgroundでimage表示
  height: 685px;
  max-width: 100%;
  background: url(/images/hero.bg1.png) no-repeat;
  background-size: cover;
  position: relative;
  padding: 30px 0;

  .hero_bg {   //imageの上に薄いグラデーションを乗せる
    background-image: linear-gradient(to top, rgba(4, 4, 4, 0.65), rgba(54, 54, 54, 0.2));
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }
}

Flexbox 이해

display: inline-flex;inline-block + flex의 역할 (flex 아이템에 폭을 지정하지 않아도 마음대로 내용 의존의 폭이 된다)

인접한 요소에만 스타일 적용

YouTube

<nav class="nav_header">
        <ul class="list_nav_header">  <!--liは横並び-->
          <li class="app"><a href="#"></a></li>
          <li class="setting"><a href="#"></a></li>
          <li class="login"><a href="#" class="btn_login">ログイン</a>
          </li>
        </ul>
</nav>

.list_nav_header > li + li {
  margin: 0 0 0 15px;　     /*2,3番目のliに左margin*/
}

margin, padding 조정

YouTube

 <ul class="list_video">
          <li>
            <article class="">
            </article>
          </li>
          <li>
            <article class="">
            </article>
          </li>
          <li>
            <article class="">
            </article>
          </li>
          <li>
            <article class="">
            </article>
          </li>
</ul>

.list_video {
  display: flex;
  flex-wrap: wrap;
  margin: -8px; /*子要素で縮む分親要素で膨らます*/
}
.list_video > li {
  width: 25%;  /*４つ並ぶ*/
  padding: 8px /*子要素の間*/
}

요약

그 밖에도, 여러가지 공부가 되는 점이 많았습니다.
레이아웃의 편성, class명, CSS의 스타일 등 심플하고 알기 쉽게 기술할 수 있게 되는 것이 향후의 과제입니다.
많은 분의 정보 발신에 도움이 되고 있으므로, 자신 누군가의 도움이 된다고 하는 생각으로, 독학의 기록으로서 게재하고 있습니다.
더 좋은 쓰는 방법이나 잘못된 곳 등이 있으면, 코멘트 해 주시면 도움이됩니다!