markup validate(와이즈버즈)

by uiwwnw

HTML

<h1>1. inline은 block을 감쌀 수 없다</h1>
<code data-tag="span">display: inline;</code>은
<code data-tag="div">display: block;</code>을 감쌀 수 없다.
<div class="class1">
  <h2>예제1</h2>
  <div>div의 영역</div>
  <span>span의 영역</span>
  <h2>예제2</h2>
  <div>div의 영역 <span>span의 영역</span> <span>span의 영역</span></div>
  <h2>예제2</h2>
  <span>span의 영역<div>div의 영역</div><div>div의 영역</div></span>
</div>

<h1>2. 여러가지 reset 스타일</h1>
<code>display: none; // 다시 나타나게 하기 위해서<br>
<br>display: table; // table일 경우
<br>display: inline; // span, strong, a등과 같은 inline일 경우
<br>display: flex; // flex속성으로 그리드를 만들었을 경우 등등
</code>
<code>position: absolute; // fixed, relative를 없애기 위해서<br>
<br>position: static;
</code>
<code>width: 100px;//특정 사이즈를 제거하기 위해<br>
<br>width: auto; // 또는 initial; initial은 크로스브라우징에 약하기 때문에 auto가 적당합니다.
</code>
<code>margin: 10px; //마진일 경우<br>
<br>margin: 0; // 마진에서 오토는 리셋이 아닙니다. initial or 0으로 필요한 값으로 주어야합니다.
</code>

<div class="class2">
  <h2>3*3테이블</h2>
  <table>
    <tr>
      <th>헤더1</th>
      <th>헤더2</th>
      <th>헤더3</th>
    </tr>
    <tr>
      <td>내용1</td>
      <td>내용2</td>
      <td>내용3</td>
    </tr>
    <tr>
      <td>내용1</td>
      <td>내용2</td>
      <td>내용3</td>
    </tr>
  </table>
  <h2>2*2테이블로 만들땐(가릴땐 display: none;)</h2>
  <table>
    <tr>
      <th>헤더1</th>
      <th style="display: none;">헤더2</th>
      <th style="display: none;">헤더3</th>
    </tr>
    <tr style="display: none;">
      <td>내용1</td>
      <td>내용2</td>
      <td>내용3</td>
    </tr>
    <tr>
      <td>내용1</td>
      <td style="display: none;">내용2</td>
      <td style="display: none;">내용3</td>
    </tr>
  </table>
  <h2>3*3테이블로 복귀(block 속성을 주면 깨집니다.)</h2>
  <table>
    <tr>
      <th>헤더1</th>
      <th style="display: block;">헤더2</th>
      <th style="display: block;">헤더3</th>
    </tr>
    <tr style="display: block;">
      <td>내용1</td>
      <td>내용2</td>
      <td>내용3</td>
    </tr>
    <tr>
      <td>내용1</td>
      <td style="display: block;">내용2</td>
      <td style="display: block;">내용3</td>
...

SCSS

code {
  display: block;
  width: 100%;
  color: #f8b068;
  padding: 3px;
  padding-left: 20px;
  background: #20262e;
  &[data-tag] {
    &:before {
      content: attr(data-tag) ' {
 ';

    }
  }
  &:before {
    display: block;
    text-indent: -16px;
    content: '
 selector {
      ';

    }
    &:after {
      display: block;
      text-indent: -16px;
      content: '

    }
    ';

  }
}

.class1 {
  div {
    color: #fff;
    background: #000;
  }
  span {
    background: red;
  }
  
  *:not(h2) {
    position: relative;
    cursor: pointer;
    &:before {
      position: absolute;
      display: none;
      bottom: 100%;
      left: 0;
      margin-bottom: 5px;
      font-size: 10px;
      white-space: nowrap;
      color: #fff;
      background: blue;
      content: attr(data-text);
    }
    
    &:after {
      display: none;
    }
    &[data-text]:hover {
      &:before {
        display: block;        
      }
      &:after {
        position: absolute;
        display: inline-block;
        top: 0;
        left: 20px;
        margin-top: -5px;
        border-top: 5px solid blue;
        border-right: 2px solid transparent;
        border-left: 2px solid transparent;
        content: '';
      }
    }
  }
}

.class2 {
  table {
    border-collapse: collapse;
    td,
    th {
      border: 1px solid;
    }
  }
}

.class3 {
  strong {
    color: red;
    
    &:before {
      content: '<';
    }
    
    &:after {
      content: '>';
    }
  }
}

.class4 {
  .input {
    display: inline-block;
    color: #fff;
    border: 1px solid;
    background: #000;
  }
}

JavaScript

$('.class1 *:not(h2)').on('click', function() {
  var text = '너비: ' + $(this).width() + '. 높이: ' + $(this).height();
  $(this).attr('data-text', text);
})