웹 퍼블리싱할 때 꿀팁

1. inline style 을 피하는 것이 좋습니다.

<div style="margin-left: 750px"></div>

인라인 스타일은 간단한 내용을 적을 때 태그 자체에 대한 가독성은 좋지만 style 안에 내용이 길어지면 가독성이 급격하게 떨어집니다.

또한 인라인 스타일을 사용하게되면 스타일 코드를 재활용할 수 없게됩니다.

ex1)

<!-- 인라인으로 작성했을 때-->
<div style="margin-left: 30px; font-size: 13pt">
</div>
<div style="margin-left: 30px; font-size: 13pt">
</div>

ex2)

<!-- selector 로 따로 분리 했을 때 -->
<style>
  .box{
    margin-left: 30px;
    font-size: 13pt;
  }
</style>
<div class='box'>
</div>
<div class='box'>
</div>

2. Semantic Tag 를 활용하는것이 좋습니다.

HTML5에서 추가된 Semantic Tag를 활용하면 좀 더 간결하게 작성할 수 있습니다. 또한 브라우저의 코드 인식률도 올라가게됩니다.

<div class='section'>
</div>
<section>
</section>

3. 가운데 정렬을 위한 여러가지 방법

흔히 center-position-box 를 가운데 정렬하기 위해서 box-wrapper에 display: flex 를 줘서 가운데 정렬을 하곤하는데, box-wrapper 에 display: flex 를 줄 수 없을 때는 안쪽 div 에 양쪽 margin을 auto로 줌으로 서 가운데 정렬을 할 수 있습니다.

<style>
  .center-position-box{
    margin: 0 auto;
  }
</style>
<div ckass='box-wrapper'>
  <div class='center-position-box'>

  </div>
</div>

4. 모바일에서는 꽉찬 사이즈, PC에서는 양쪽 여백이 남도록 하는 방법

container 가 콘텐츠라고 가정할 때 아래와 같이 작성하면 768px 아래에서는 container 가 공간을 전부 차지하고 큰 화면에서는 768px 사이즈를 최대로 가지면서 양쪽에 여백을 가지게됩니다.

<style>
  .wrapper{
    width: 100vw;
  }
  .wrapper container{
    max-width: 768px;
    margin: 0 auto; 
  }
  @media (max-width: 786px){
    .wrapper container{
      width: 100vw;
    }
  }
</style>
<div class='wrapper'>
  <container>
  </container>
</div>

좀 급하게 적은거라서 틀린 부분이 있을 수 있습니다 지적해주시면 반영하겠습니다.