소개

많은 사람들이 디자인을 구현하기 전에 계획하지 않은 실수를 합니다. 그 때문에 보통 막히거나 디자인이 계획한 대로 나오지 않습니다. 다음은 구현이 즐거운 경험이 되고 내가 원하는 대로 이루어지도록 하기 위해 취하는 단계입니다.
my challenges 페이지를 보여주는 디자인을 제공합니다. 우리는 그것을 코드로 번역하려고 노력할 것입니다.

1단계: 레이아웃 그리기

HTML 및 CSS로 작업할 때 계획을 세우고 코딩을 시작하기 전에 레이아웃을 그려야 합니다.

레이아웃을 가장 작은 구성 요소로 나누고 컨테이너나 래퍼가 필요한지 확인해야 합니다. 다음은 레이아웃을 분해하는 방법의 예입니다. 머릿속에서도 빠르게 할 수 있습니다.

2단계: HTML 추가

종이나 머리에 구조 레이아웃을 만든 후 다음 단계는 HTML로 작업하는 것입니다.

어떤 요소인지 결정해야 합니다. 스스로에게 물어볼 수 있습니다. 버튼인가요? 어떤 제목인가요? 플렉스인가 그리드인가....

이러한 질문에 대한 답을 얻으려면. 이해해야 할 CSS의 가장 중요한 속성 중 하나는 display 입니다. 최소한 다음 값 사이의 차이점을 알아야 합니다.

1. 디스플레이: 블록

요소를 블록 요소로 표시합니다(예: <p> ). 새 줄에서 시작하여 전체 너비를 차지합니다.

2. 디스플레이: 인라인

요소를 인라인 요소로 표시합니다(예: <span> ). 모든 높이 및 너비 속성은 영향을 미치지 않습니다.

3. 디스플레이: 플렉스

요소를 블록 수준 플렉스 컨테이너로 표시합니다.

4. 디스플레이: 인라인 블록

요소를 인라인 수준 블록 컨테이너로 표시합니다. 요소 자체는 인라인 요소로 형식이 지정되지만 높이 및 너비 값을 적용할 수 있습니다.
display 속성의 이 4가지 기본 값을 사용하여 거의 모든 레이아웃을 복제할 수 있습니다.

3단계: 수업 추가

전처리기 없이 CSS로 작업하는 경우 BEM naming을 확인하는 것이 좋습니다. 재사용할 수 있는 구성 요소에 대해 생각해 보십시오. 예를 들어 아래 코드에서 card , tag , level , input ,... 는 재사용 가능한 구성 요소입니다.

<div class="panel">
  <div class="heading">
    <h1>My challenges</h1>
    <i class="material-icons">trending_flat</i>
  </div>

  <p>Welcone back Thu, ready to continue your challenges</p>

  <div class="tabs">
    <button class="tabs__item tabs__item--active">In Progress</button>
    <button class="tabs__item">Completed</button>
    <button class="tabs__item">Favorite</button>
  </div>

  <div class="input-wrapper">
    <input class="input" type="text" placeholder="Search..."/>
  </div> 

  <div>
    <div class="card">
      <div class="card__image">
        <img src="https://firebasestorage.googleapis.com/v0/b/devchallenges-1234.appspot.com/o/challengesDesigns%2FPortfolioThumbnail.png?alt=media&token=417f625d-715a-4611-8215-2c19aaf490f9" alt="portfolio challenge" />          
      </div>

      <div class="card__content">
        <div class="tag">Responsive</div>
        <h5 class="card__content__title">Portfolio Challenge</h5>
        <div class="level">
          <label class="level__title">Intermediate</label>
          <div class="level__indicator">
            <span class="level__indicator__item level__indicator__item--active"></span>
            <span class="level__indicator__item level__indicator__item--active"></span>
            <span class="level__indicator__item level__indicator__item--active"></span>
            <span class="level__indicator__item"></span>
            <span class="level__indicator__item"></span>
          </div>
        </div>
      </div>
    </div>

    <div class="card">
      <div class="card__image">
        <img src="https://firebasestorage.googleapis.com/v0/b/devchallenges-1234.appspot.com/o/CatwikiThumbnail.png?alt=media&token=4a59b587-4766-48ac-ada0-d59fe12d924e" alt="catwiki challenge" />          
      </div>

      <div class="card__content">
        <div class="tag">Full-stack</div>
        <h5 class="card__content__title">CatWiki Challenge</h5>
        <div class="level">
          <label class="level__title">Advanced</label>
          <div class="level__indicator">
            <span class="level__indicator__item level__indicator__item--active"></span>
            <span class="level__indicator__item level__indicator__item--active"></span>
            <span class="level__indicator__item level__indicator__item--active"></span>
            <span class="level__indicator__item level__indicator__item--active"></span>
            <span class="level__indicator__item"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

4단계: CSS 작업 - 가장 재미있는 부분

CSS 작업을 시작할 때 일관되고 쉽게 유지하기 위한 몇 가지 팁이 있습니다.

팁 1:

모든 기본 스타일을 재설정하고 다음을 사용합니다.

*, *:before, *:after {
    box-sizing: border-box;
}

팁 2:

CSS 변수 사용

:root {
  --font: 'Poppins', sans-serif;
  --primary-color: #FF7A4E;

  --grey-1: #F2F2F2;
  --grey-2: #BDBDBD;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.5rem;

  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;

  --rounded-sm: 8px;
  --rounded: 16px;

  --shadow: 0px 4px 10px rgba(0, 0, 0, 0.05);
}

자, 이제 스타일링은 모두 여러분에게 달려 있습니다. 여기에서 최종 결과를 확인할 수 있습니다: Final Result

4단계: 모바일에서 확인하고 필요한 경우 미디어 쿼리를 추가합니다.

@media only screen and (max-width: 600px)  {
  .card {
    display: block;
  }

  .card__image {
    width: 100%;
  }
}

5단계: 필요한 경우 간격과 색상을 수정합니다.

올바른 글꼴과 간격은 Figma를 확인하세요. 그리고 디자인을 개선하려고 노력하십시오.

싸서

제 이름은 devchallenges.io를 만든 Thu입니다. 저는 사용자인 학생들을 돕기 위해 블로그를 씁니다. devchallenge가 무엇인지 궁금하다면. 여기에서 확인하세요: https://devchallenges.io/

또는 나와 연결:

트위터:
유튜브: