[포스코x코딩온] 풀스택 부트캠프 1주차 정리 -2 (HTML, CSS)

VSCODE의 live server 확장 프로그램의 경우 경로를 이용할 때 workspace 이외의 경로로 벗어나면 인식하지 못하기 때문에 work space에 이미지 등을 가져와서 넣어야 한다.

 

HTML table

<table border="1" cellspacing="0"  cellpadding="5px" width="250px" height="300px">
          <tr>
            <td colspan="2">1</td>
            <td rowspan="2">2</td>
          </tr>
          <tr>
            <td rowspan="2">3</td>
            <td>center</td>
          </tr>
          <tr>
            <td colspan="2">4</td>
          </tr>
        </table>

밑 도형을 출력하기 위해서는 center에도 colspan ="2"를 하고 1,2에 colspan="3"을 해야만 하는지 알았지만

위 코드로 작성해도 center가 길이를 맞추기 위해서 늘어나기 때문에 위의 코드 또한 적용가능하다.

 

-아래-

 

1		2
3	center
	4

 

CSS ELEMENT

자식요소 복합선택자와 하위 요소 복합선택자

div > .orange { }       VS      div .orange { }

후자가 전자를 포괄하는 개념인 것 같지만 만약 다음과 같은 경우 자식요소 복합선택자도 쓸만하지 않을까 싶다.

물론 쓸 일은 극히 드물 듯하다.

 

<div>
      <ul>
        <li>사과</li>
        <li class="new-class">딸기</li>
        <li>오렌지</li>
        <li><span class="new-class">망</span>고</li>
        <li>사과</li>
      </ul>
</div>
      
          /* When you wanna find only line 4
      The answer is "ul > .new-class"  instead of ul .new-class*/

형제 요소 복합선택자

 

.orange + li {}  : orange클래스의 형제요소 충 첫 li태그

.orange ~ li {} : orange 클래스 형제요소 중 뒤에 있는 모든 li태그