는

Question

나는이에 상당히 새로운 오전 내 자신이 내용에 대한 그려 마진로 된 div를 사용하여 내부 대신이 같은 패딩을 사용하여 찾을 수 :

<div class="container" style="width:100%; height:500px; positon:relative;"> 
 
    <div class="subcontainer" style="width:25%; height:100%; position:relative; float:left;"> 
 
\t  <div class="subcontainer" style="width:100%; height:40%; position:relative; overflow:visible;"> 
 
\t \t  <img src="" style="width:200px; height:200px; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);"> 
 
\t \t </div> 
 
\t \t <div class="subcontainer" style="width:100%; height:60%; position:relative;"> 
 
\t \t  <div class="marcontainer" style="position:absolute; width:80%; height:80%; top:50%; left:10%; transform:translateY(-50%); text-align:left;"> 
 
\t \t \t  <h5>Build a website</h5> 
 
\t \t \t \t <h6>You'll learn the basics to building a website with an introduction to text editors, basic HTML tags, and advanced HTML skills.</h6> 
 
\t \t \t \t <a href="#"><h6>Leer más</h6></a> 
 
\t \t \t  
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
\t <div class="subcontainer" style="width:25%; height:100%; position:relative; float:left;"> 
 
\t  <div class="subcontainer" style="width:100%; height:40%; position:relative; overflow:visible;"> 
 
\t \t  <img src="" style="width:200px; height:200px; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);"> 
 
\t \t </div> 
 
\t \t <div class="subcontainer" style="width:100%; height:60%; position:relative;"> 
 
\t \t  <div class="marcontainer" style="position:absolute; width:80%; height:80%; top:50%; left:10%; transform:translateY(-50%); text-align:left;"> 
 
\t \t \t  <h5>Build a website</h5> 
 
\t \t \t \t <h6>You'll learn the basics to building a website with an introduction to text editors, basic HTML tags, and advanced HTML skills.</h6> 
 
\t \t \t \t <a href="#"><h6>Leer más</h6></a> 
 
\t \t \t  
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
\t <div class="subcontainer" style="width:25%; height:100%; position:relative; float:left;"> 
 
\t  <div class="subcontainer" style="width:100%; height:40%; position:relative; overflow:visible;"> 
 
\t \t  <img src="" style="width:200px; height:200px; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);"> 
 
\t \t </div> 
 
\t \t <div class="subcontainer" style="width:100%; height:60%; position:relative;"> 
 
\t \t  <div class="marcontainer" style="position:absolute; width:80%; height:80%; top:50%; left:10%; transform:translateY(-50%); text-align:left;"> 
 
\t \t \t  <h5>Build a website</h5> 
 
\t \t \t \t <h6>You'll learn the basics to building a website with an introduction to text editors, basic HTML tags, and advanced HTML skills.</h6> 
 
\t \t \t \t <a href="#"><h6>Leer más</h6></a> 
 
\t \t \t  
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
\t <div class="subcontainer" style="width:25%; height:100%; position:relative; float:left;"> 
 
\t  <div class="subcontainer" style="width:100%; height:40%; position:relative; overflow:visible;"> 
 
\t \t  <img src="" style="width:200px; height:200px; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);"> 
 
\t \t </div> 
 
\t \t <div class="subcontainer" style="width:100%; height:60%; position:relative;"> 
 
\t \t  <div class="marcontainer" style="position:absolute; width:80%; height:80%; top:50%; left:10%; transform:translateY(-50%); text-align:left;"> 
 
\t \t \t  <h5>Build a website</h5> 
 
\t \t \t \t <h6>You'll learn the basics to building a website with an introduction to text editors, basic HTML tags, and advanced HTML skills.</h6> 
 
\t \t \t \t <a href="#"><h6>Leer más</h6></a> 
 
\t \t \t  
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</div>

을

좋은 방법입니까? 그것은 제가 만들고자하는 페이지의 레이아웃을 시각화하는 데 도움이되지만, 불필요하게 물건을 어수선하게 만들지는 모르겠습니다. 나를 위해 이해하는 것이 좋다.

Answer 1

IMO, 안 좋은 연습

• 코드 길이가 증가하기 때문에
• 가독성은 인라인 스타일의
• 사용도 좋은 옵션이 아닙니다 감소한다.

페이지 디자인에 맞는 div 만 사용하십시오.

예 : 머리글/바닥 글/주 컨텐츠 영역에 대한 블로그 게시물 사용 div 및 클래스를 통한 스타일 지정과 함께 블로그 게시물에 각각 하나씩