[2022.07.15] css flex사용 시, 오른쪽 배치된 요소 안 글자는 왼쪽으로 배치 오류 / json data의 id에 +숫자0 출력 오류

 

오류1: Css로 flex를 줘서 양쪽에 배치하자 요소안에 글자도 오른쪽으로 배치됨 =>글자는 왼쪽 정렬을 원함

원인: map을 div자체를 계속 생성하게 하여 flex가 된 요소들이 2개가 아니라 map개수만큼 생성되어 각자 안에서만 flex가 이루어짐

 

▼ 오류코드

<div className="ztCsDataBox">
         {
            ztCsDt.map(function(data,i){
              return(
                <div className='ztCsData'>
                  <div className="ztCsDataTitle">
                    <p className='ztCsDataNum'>
                      {ztCsDt[i].id}
                    </p>
                    <p className='ztCsDataSub'>
                      {ztCsDt[i].field}
                    </p>
                  </div>
                  <div className='ztCsDataCont' dangerouslySetInnerHTML={{__html:ztCsDt[i].content}}>
                  </div>
                </div>
              )
            })
          } 
  </div>

▼ 오류화면

 

▼ 해결코드 : <div>로 감싸고 그안에서 map이 이루지도록 2개를 구성하여 해결함

<div className="ztCsDataBox">
          <div className='ztCsDtitleBox'>
            {
              ztCsDt.map(function(data,i){
                return(
                  <div className="ztCsDtTitle">
                    <p className='ztCsDtNum'>
                      {ztCsDt[i].id}
                    </p>
                    <p className='ztCsDtSub'>
                      {ztCsDt[i].field}
                    </p>
                  </div>
                )
              })
            }
          </div>

          <div className='ztCsDtCont'>
            {
              ztCsDt.map(function(data,i){
                return(
                  <div className="ztCsDtLibox">
                    <div className='ztCsDtLi' dangerouslySetInnerHTML={{__html:ztCsDt[i].content}}>
                    </div>
                  </div>
                )
              })
            }
          </div>

        </div>

 

▼ 해결화면

 

---

 

오류2: 나중에 aos 라이브러리 적용시 해당 가로 묶음마다 적용이 되어야 하기에 위에 방법으로 하면 효과가 적용안될 것같아 아래 코드로 변경

 

▼ jsx

<div className="ztCsDataBox">
          {
            ztCsDt.map(function(data,i){
              return(
                <div className='ztCsData'>
                  <div className="ztCsDataTitle">
                    <p className='ztCsDataNum'>
                      {ztCsDt[i].id}
                    </p>
                    <p className='ztCsDataSub'>
                      {ztCsDt[i].field}
                    </p>
                  </div>
                  <div className='ztCsDataCont' dangerouslySetInnerHTML={{__html:ztCsDt[i].content}}>
                  </div>
                </div>
              )
            })
          }
        </div>

 

▼ CSS : item에 flex:30%, flex:70%각각 주자 왼쪽기준이 맞춰져 정렬됨

.ztCsDataBox{
    padding-top: 11.6rem;
    .ztCsData{
        display: flex;
        justify-content: space-between;
        .ztCsDataTitle{
            flex: 30%;
            .ztCsDataNum{

            }
            .ztCsDataSub{

            }
        }
        .ztCsDataCont{
            flex: 70%;
            ul{
                li{

                }
            }
        }
    }
}

 

---

오류3: json파일 데이터를 불러와 map을 돌릴시 id값이 0..10까지 있으면 화면에는01,02...10으로 나오게 할 시 오류

해결: 삼항연산자를 이용해 출력되는 것을 따로 설정

 

▼ 오류 코드

{data.id<10?0:null}{ztCsDt[i].id+1}

 

▼ 해결 코드

{i<9?`0${ztCsDt[i].id+1}`:`${ztCsDt[i].id+1}`}