vue-프로젝트 CSS(19일차 ~)

19~20일차

---

21일차

---

22일차

 

- addClass

    active(index) {
      var element = document.getElementsByClassName("wordButton");
      element[index].classList.add("unClick");
    },

한개의 버튼만 class를 추가할때는 id로 접근해도 되지만 여러개의 버튼에 class를 추가하고 싶다면

class로 접근 접근해야 한다 그리고

element[index] 꼭!! 해당 버튼만 class를 추가하고 싶다면 배열의 인덱스에 접근해야 한다

 

- checked

    if(state.checked == 0 || state.checked == 4) {
      state.checked = 1
    }

스페인어만 보기, 한국어만 보기, 랜덤 보기, 누른 상태에서

단어를 추가하게 되면 전체보기로 가게되는 오류 수정

단 랜덤 보기 일때는 전체보기로 이동 

 

---

23일차(단어장, 날씨 css완성)

전체보기

랜덤 보기

 

// html

      <div class="AllWordTable">
        <div class="dayAddTable" v-for="randomWord in randomWord">

          <div class="dayWordTable" v-for="randomWord in randomWord"  v-if="checked===4">
           <span class="wordContent"> {{randomWord[0]}}</span>
           <span class="wordContent"> {{randomWord[1]}}</span>
          </div>

        </div>
      </div>

// css

  .AllWordTable {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .dayAddTable {
    width: 45%;
    margin: 1%;
  }

  .dayWordTable {
    width: 100%;
    background: azure;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

  }
  .wordContent {
    width: 49%;
    border: 1px solid gray;
    text-align: center;
    height: 40px;
  }

.AllWordTable - 선택한 날짜 전체 단어장 box ( ex:1~4일차 단어장 전체)

.dayAddTable - 날짜별 단어장 box ( ex:1~4일차 중 1일차 단어장)

.dayWordTable - 스페인어 : 한국어 1줄 ( ex: 1일차 단어장 중 첫번째줄)

.wordContent - 스페인어 OR 한국어 ( ex: 첫번째줄 중 한국어 or 스페인어)

 

1. AllWordTable 크기를 100%로 잡고 flex를 이용해서 100%를 넘어가면 줄바꿈

2. dayAddTable 크기를 45%로 잡아서 가로에 최대 2일차까지만 화면에 보이게 만들기

 

3. dayWordTable 크기를 100%로 잡고 flex를 이용해서 100%를 넘어가면 줄바꿈

4. wordContent 크기를 50%로 잡아서 한줄에 스페인어 : 한국어 모양으로 줄바꿈

 

날 씨

24,25일차(비트코인 로딩, 차트 css완성)

1. (로딩 페이지)

2. (로딩 후 페이지)

3. (코인 클릭 후 차트)

 

-가장 많이 오른 코인

-가장 많이 떨어진 코인