[React][개발기] 3. 우선 기초적인 것들부터 학습2(HTML, CSS, JS)
노근
[React][개발기] 3. 우선 기초적인 것들부터 학습2(HTML, CSS, JS)Develop/React2024. 7. 14. 17:40@노근
Table of Contents

깃허브 주소 ▼

 

GitHub - NOGUEN/dilemma_cafe_web

Contribute to NOGUEN/dilemma_cafe_web development by creating an account on GitHub.

github.com

 

개요

이전 포스트 참고 ▼

 

[React][개발기] 우선 기초적인 것들 부터 학습(HTML, CSS)

개요이전 글 참고 ▼ [React][개발기] React! 근데 React를 왜 써?개요 웹을 시작하게 된 이유 기존에 모바일로 개발하던 서비스에 배포 문제가 발생하면서 다 완성을 해도 배포에 시간이 걸리게 됐

noguen.com

 

학습 현황과 방향

 이전 포스트에 이어서 기초적인 것들(HTML, CSS, JS) 학습을 마쳤다. 완벽하게 공부한 것은 아니지만 '대략 이렇게 접근하면 되겠구나'를 익혔다. CSS부분은 아직 익혀야할 게 많지만, 프로젝트를 하면서 익히면 될 거 같다. 어느정도의 프로퍼티들은 외웠고, 이제 프로퍼티들이 어떻게 적용되고 어떤 순서로 적용되는지만 익히면 될 거 같다.

 

 다음으로는 JS를 익혀야하는데, 이 부분은 과감하게 프로젝트를 하면서 배우려고 한다. 문법이란게 대부분 비슷한 부분이 많고, 모르면 찾아보면 된다고 생각한다. 전체적인 구성에 대해서 안다면 간단한 코딩이야 금방 시작할 수 있다. 프로그래밍 언어들에 대한 학습 곡선이 초반에는 상당히 가파르고, 뒤로 갈 수록 완만해지는 곡선 형태라고 생각한다.

 

목표

 이번 목표는 간단하게 내가 만들고자 하는 서비스의 외관을 만들어보는 것이다. React에서 JSX 문법으로 작성을 하기도 하고, React가 최종적으로 만들어주는 HTML과 CSS가 어떻게 생겼는지에 대해서는 몰라도 프로젝트가 진행자체는 된다고 생각한다. 하지만 그럼에도 불구하고 전체적으로 어떻게 구성되는지 정도는, 기본기 정도는 알아야한다고 생각하기에 내가 만들고자 하는 서비스의 외관을 JS없이, HTML과 CSS로만 만들어봤다.

 

 

간단하게 만들어보기

 아래의 웹 사이트가 내가 대강 만든 사이트 외관이다. 이런 형태로 제작이 될 거고, 왼쪽 상단에 있는 랜덤 딜레마와 전체 딜레마는 고정적으로 해당 위치에 있게 하려고 한다. 그리고 오늘의 딜레마는 나머지 공간을 다 사용하게 할 건데, 화면이 너무 줄어들게 되면 아래로 내릴 예정이다.

 

 그 아래에는 인기 딜레마들의 리스트가 보여질 것이다. Top 10을 보여줄 예정이다. ▼

이렇게 만들었다.

 

랜덤 딜레마와 전체 딜레마

두 칸은 정사각형 모습을 보여줄 거고, 왼쪽 상단에 고정시킬 것이다. 오늘의 딜레마는 나머지 부분들을 차지하게 구성했는데, 이제와서 보니까 어느정도 줄어들면 아래로 내려가게 구성을 해야겠다. 반응형으로 짜긴 짰는데, 약간 엉성하게 짰다. ▼

 

CSS 코드는 이렇게 짰다. ▼

      .box {
        width: 200px;
        height: 200px;
        background-color: #31E5AF;
        border-radius: 8px;
        display: flex;
        margin: 20px 0px 20px 20px;
        padding: 20px;
        font-size: 20px;
        color: #181818;
        font-family: "JalnanGothic";
      }

 

 

오늘의 딜레마

 앞에서 잠깐 언급한 대로 랜덤 딜레마와 전체 딜레마가 차지하고 남은 나머지 공간을 다 차지하게 했다. 내용도 보여주고 조금 넓게 보여주려고 한게 그 이유인데, 창을 줄이면 내용이 다 어그러져서 아래로 내려야 한다. ▼

 

CSS 코드는 이렇게 짰다. ▼

      .featured {
        margin: 20px;
        padding: 20px;
        background-color: #85F9D6;
        border-radius: 8px;
        display: flex;
        flex: 1;
        color: #181818;
        font-size: 20px;
        font-family: "JalnanGothic";
      }

 

리스트

제목과 좋아요가 보이는 리스트 셀을 만들었다. 내부에 들어가는 요소가 조금 있어서 각기 다르게 적용되게 해주었다. ▼

 

CSS 코드는 이렇게 짰다. ▼

      .dilemma-list-cell {
        flex: 1;
        background-color: #2F2F2F;
        border-radius: 8px;
        padding: 20px;
        margin: 20px;
      }

      .dilemma-list-cell > .dilemma-list-cell-title {
        color: white;
        font-family: "JalnanGothic";
      }

      .dilemma-list-cell > .dilemma-list-cell-like {
        padding-top: 10px;
        color: #ACACAC;
      }

 

 

전체 코드는 접은 글 안에 있다. ▼

더보기

전체 코드

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
      /* Simple Reset CSS */
      * {
        margin: 0; padding: 0;
        box-sizing: border-box;
      }
      @font-face {
        font-family: 'JalnanGothic';
        src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_231029@1.1/JalnanGothic.woff') format('woff');
        font-weight: normal;
        font-style: normal;
      }

      body {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        color: #58666e;
        background-color: #181818;
        -webkit-font-smoothing: antialiased;
        -webkit-text-size-adjus: 100%;  /* iphone font size 변경 방지 */
      }
      .logo {
        height: 36px;
        display: inline-block;
        font-size: 26px;
        font-weight: bold;
        color: #31E5AF;
        padding: 10px 0 10px 20px;
        text-decoration: none;
      }
      .logo:hover, .logo:link, .logo:visited, .logo:active {
        color: #31E5AF;
      }

      a {
        text-decoration: none;
        color: inherit;
      }

      li {
        list-style: none;
        left: 20px;
      }

      nav {
        float: right;
      }

      header {
        width: 100%;
        height: 60px;
        z-index: 2000;
        background-color: #181818;
        position: fixed;
        top: 0;
      }

      #content-wrap {
        margin-top: 60px;
      }

      .nav-items > li {
        display: inline-block;
      }
      .nav-items > li > a {
        line-height: 60px;
        padding: 0 30px;
        color: #13AC7E;
      }
      .nav-items > li > a:hover {
        color: #31E5AF;
      }

      .container {
        display: flex;
        flex-wrap: warp;
        justify-content: flex-start;
      }

      .box {
        width: 200px;
        height: 200px;
        background-color: #31E5AF;
        border-radius: 8px;
        display: flex;
        margin: 20px 0px 20px 20px;
        padding: 20px;
        font-size: 20px;
        color: #181818;
        font-family: "JalnanGothic";
      }

      .featured {
        margin: 20px;
        padding: 20px;
        background-color: #85F9D6;
        border-radius: 8px;
        display: flex;
        flex: 1;
        color: #181818;
        font-size: 20px;
        font-family: "JalnanGothic";
      }

      .dilemma-list{

      }

      .dilemma-list-cell {
        flex: 1;
        background-color: #2F2F2F;
        border-radius: 8px;
        padding: 20px;
        margin: 20px;
      }

      .dilemma-list-cell > .dilemma-list-cell-title {
        color: white;
        font-family: "JalnanGothic";
      }

      .dilemma-list-cell > .dilemma-list-cell-like {
        padding-top: 10px;
        color: #ACACAC;
      }



      /* Media Query */
      /* for tablet: ~ 800px */
      @media screen and (max-width: 800px) {

      }
      /* for smartphone: ~ 480px */
      @media screen and (max-width: 480px) {

      }
    </style>
  </head>
  <body>
    <div id="nav-bar-wrap">
      <header>
        <a class="logo" href="#home">
          Dilemma Cafe
        </a>
        <nav>
          <label class="navicon" for="nav-toggle"><span class="navicon-bar"></span></label>
          <ul class="nav-items">
            <li><a href="#guide">사용법</a></li>
            <li><a href="#contact">문의</a></li>
          </ul>
        </nav>
      </header>
      <div id="content-wrap">
        <div class = "container">
          <div class = "box">
            랜덤 딜레마
          </div>
          <div class = "box">
            전체 딜레마
          </div>
          <div class = "featured">
            오늘의 딜레마
          </div>
        </div>
        <ul class = "dilemma-list">
          <li><div class = "dilemma-list-cell">
            <div class = "dilemma-list-cell-title">송강호 떡 사주기 VS 송강 호떡 사주기 </div>
            <div class = "dilemma-list-cell-like">❤️ 100 </div>
          </li>
          <li><div class = "dilemma-list-cell">
            <div class = "dilemma-list-cell-title">송강호 떡 사주기 VS 송강 호떡 사주기 </div>
            <div class = "dilemma-list-cell-like">❤️ 100 </div>
          </li>
          <li><div class = "dilemma-list-cell">
            <div class = "dilemma-list-cell-title">송강호 떡 사주기 VS 송강 호떡 사주기 </div>
            <div class = "dilemma-list-cell-like">❤️ 100 </div>
          </li>
          <li><div class = "dilemma-list-cell">
            <div class = "dilemma-list-cell-title">송강호 떡 사주기 VS 송강 호떡 사주기 </div>
            <div class = "dilemma-list-cell-like">❤️ 100 </div>
          </li>
          <li><div class = "dilemma-list-cell">
            <div class = "dilemma-list-cell-title">송강호 떡 사주기 VS 송강 호떡 사주기 </div>
            <div class = "dilemma-list-cell-like">❤️ 100 </div>
          </li>
          <li><div class = "dilemma-list-cell">
            <div class = "dilemma-list-cell-title">송강호 떡 사주기 VS 송강 호떡 사주기 </div>
            <div class = "dilemma-list-cell-like">❤️ 100 </div>
          </li>
        </ul>
        <!-- end of content-wrap -->
      </div>
    <!-- end of wrap   -->
    </div>
  </body>
</html>

 

 

JS 학습

 프로젝트를 진행하며 학습을 할 거라고 했지만, 간단하게 문법을 쭉 훑어봤다. 전에 이야기를 들었을 때 '이런 것도 돼? 아니 근데 이게 안돼?' 하는 이야기들을 많이 들어 사전 지식을 조금만 주입한 채로 하기로 했다.

 

그래서 이번에도 아래의 사이트에서 간단하게 사전지식들을 배웠다. ▼

 

웹 프로그래밍 튜토리얼 | PoiemaWeb

Front-end Development Tutorial

poiemaweb.com

정리가 잘 되어있다.

 

TS, 타입스크립트도 익히고 가야하나 싶은데, 아직은 왜 타입을 지정해주는게 좋은지 체감이 안되어 일단은 JS로만 하기로 했다. 타입을 지정해주는게 좋다는건 대강의 이유로 알고는 있지만 사실 개발을 할 때에는 오히려 자동 타입이 더 편하기도 하니까 말이다. 물론 이렇게 말 하긴 했지만 Flutter로 할 때는 다 타입을 지정해주고 코딩하긴 한다.

 

 

마치며

 이제 기초적인 학습은 다 했으니 본격적으로 컴포넌트를 만들어볼 것이다. 간단하게 버튼부터 시작해서 리스트, 그리고 가능하면 애니메이션 까지 넣어보자.

저작자표시 비영리 변경금지

'Develop > React' 카테고리의 다른 글

[React][개발기] 6. Stateless하기 만들기, 페이지 만들기, 그리고 Map 활용  (0) 2024.07.17
[React][개발기] 5. Component 이어서 만들기와 고민 해결  (0) 2024.07.16
[React][개발기] 4. Styled-Component로 Component 만들기  (0) 2024.07.16
[React][개발기] 2. 우선 기초적인 것들부터 학습(HTML, CSS)  (0) 2024.07.13
[React][개발기] 1. React! 근데 React를 왜 써?  (0) 2024.07.13
노근
@노근 :: NOGUEN 블로그

Develop/React 추천 글
more
image

티스토리툴바