리엑트 개발자에게 퍼블 html 마크업 전달시 고려사항
본문
일반적으로 퍼블 html 마크업시 id 나 class 는 별 제약없이 작업을 한다면
리엑트 개발단에 넘겨줄 때는 각 모듈형식으로 사용하기 편하게 class 를 짤라서 전달해달라는데
정확하게 이해를 좀 시켜주실 분 계신가요?
어쨋든 wrap 클래스가 있어야 하고 그 안에 또 어떤 클래스들로 작성을 하게 되는데 자꾸 더 짤라 달라는데
음 ..
아래 마크업이 리엑트 개발자들이 불편한 마크업인가요?
아래 마크업이 늘 하던 마크업인데 자꾸 뭘 짤라 달라는지..
ex)
<div class="dataFiled" style="display:none">
<ul>
<li>
<h4>Jornal Name</h4>
<div class="data">
<div class="txtBox">Chiral Alkyl Amine Synthesis via Catalytic Enantioselective Hydroalkylation of Enamides</div>
</div>
</li>
<li>
<h4>Others</h4>
<div class="data">
<div class="txtBox">Chiral Alkyl Amine Synthesis via Catalytic Enantioselective Hydroalkylation of Enamides</div>
</div>
</li>
<li>
<h4>Others</h4>
<div class="data">
<div class="txtBox">Chiral Alkyl Amine Synthesis via Catalytic Enantioselective Hydroalkylation of Enamides</div>
</div>
</li>
</ul>
</div>
<style>
.PdfDocument .contents-Recognition .resultWrap .dataFiled { background:#f9f9f9; border-radius:1rem; padding:1rem; }
.PdfDocument .contents-Recognition .resultWrap .dataFiled li { padding:1rem; }
.PdfDocument .contents-Recognition .resultWrap .dataFiled li:hover { background:rgba(229, 229, 230, 0.6); border-radius:1rem; }
.PdfDocument .contents-Recognition .resultWrap .dataFiled li h4 { font-size:1.4rem; font-weight: 500; color:#000; margin:0 0 1.2rem; }
.PdfDocument .contents-Recognition .resultWrap .dataFiled li .data { display:flex; align-items:center; }
.PdfDocument .contents-Recognition .resultWrap .dataFiled li .data .img { width:18rem; height:18rem; border-radius:1rem; border:1px solid #cdcdcd; background:#fff; margin-right:2rem; }
.PdfDocument .contents-Recognition .resultWrap .dataFiled li .data .img img { width:100%; height:100%; object-fit:contain; }
.PdfDocument .contents-Recognition .resultWrap .dataFiled li .data .arrow { width:4rem; height:4rem; background:url('../../assets/images/ico-data-arrow.png') 0 0 no-repeat; margin-right:2rem; }
.PdfDocument .contents-Recognition .resultWrap .dataFiled li .data .txt { flex:1; font-size:1.4rem; font-weight:300; color:#050505; }
.PdfDocument .contents-Recognition .resultWrap .dataFiled li .data .txtBox { width:100%; padding:2.2rem 2.4rem; font-size:1.4rem; font-weight: 300; color:#000; border-radius:1rem; border:1px solid #cdcdcd; background:#fff; }
</style>
답변 2
같이 커피라도 하실수있는 상황이시면
커피라도하시고
작업을 오래 하셔야 하면 한번 식사라도 하시면서
상황이나, 작업스타일을 공유하시는게 상호간에 스트레스를 줄이는 방법이 아닐까 싶습니다.
리엑트라고해서 html을 사용하지 않는것도아니고
원하는 로직을 어떤스타일로 구현을 하는지
그에 맞게 html / css를 맞춰주면되는지 협의가 필요해보입니다.
각자의 스타일대로하면
골이 깊어질겁니다.
협업을 하자고 제안해서 처음엔 불편하더라도 조율을 하시길 추천드립니다.
dataField 앞에 선택자는 다 지워도 될것 같아요
