HTML / CSS - 기초 4편

* table 태그

1. 행은 가로! 열은 세로!

테이블은 1행씩 작성된다고 생각하면 편하다
thead : 제목 행 // tbody : 본문 행

2. 셀안의 요소 정렬

verticalalign:top/middle/bottom...
++ inline/inline-block 요소간의 세로정렬 할때 사용

3. 합병( 가로 / 세로 )

<td colspan="2"> // 가로 2칸 합치기
<td rowspan="2"> // 세로 2칸 합치기

4. 크기 조절

<td style="width: 300px; height: 400px;">

5. 테두리

<table style="border 1px solid black">
테이블에 전체 테두리에 1px 너비에 검은색 점선

6. 행간 margin 제거

table { border-collapse : collapse; }

7. 주의점!!

하나의 td, th에 width를 주더라도 전체 열의 속성이 변합니다.

1. 열이 기준이 되는 table ( 가장 많이 사용 )

<table>
  <thead>
    <tr>
      <th>제</th>
      <th>목</th>
      <th>행</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>본</td>
      <td>문</td>
      <td>행</td>
    </tr>
  </tbody>
</table>

미리보기

2. 행이 기준이 되는 table

<table>
    <tr>
      <th>1. 제</th>
      <td>본</td>
      <td>문</td>
    </tr>
    <tr>
      <th>2. 목</th>
      <td>본</td>
      <td>문</td>
    </tr>
  	<tr>
      <th>3. 행</th>
      <td>본</td>
      <td>문</td>
    </tr>
</table>

미리보기

* pseudo-class(의사-클래스)

이벤트 발생시 CSS로 스타일 변경

<button> <a> <input> 등에 많이 사용한다

button(버튼)

.button:hover { background : red } /* 마우스를 올려 놓았을 때 css 변경 */
.button:focus { background : blue } /* 클릭 후 계속 포커스 상태일 때 */
.button:active { background : green } /* 계속 클릭 중일 때 */

a(하이퍼링크)

.a { text-decoration : none } /* 모든 링크 밑줄 제거 */
.a:link { background : red } /* 방문 전 링크 */
.a:visited { background : blue } /* 방문 후 링크 */

input(입력 요소)

.input:hover { background : red } /* 마우스를 올려 놓았을 때 css 변경 */
.input:focus { background : blue } /* 클릭 후 계속 포커스 상태일 때 */
.input:active { background : green } /* 계속 클릭 중일 때 */

...등등 엄청나게 많은 pseudo-class와 적용할 수 있는 스타일이 있다.

더많은 pseudo-class 참조

https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes

React 와 Vue를 사용하지않고 Html과 Css만을 사용하여 웹사이트를 개발할때 꿀팁

* 코드 양을 줄이는 CSS 작성법 (OOCSS : Object Oriented CSS / Bootstrap에서 자주 사용)

가장 뼈대가 되는 class를 지정하고 부가적인 class를 추가로 지정해서 CSS적용

이런 방식을 사용하게되면 수정해야 하는 개수가 많을 때

1. 생산성을 높임

2. 시간을 단축

3. 중복된 스타일을 재사용 가능

4. 유지보수 편리

예시

.main-btn { padding : 10px; margin : 10px; cursor : 10px; } /* main class 분리 */
.btn-red { background : red; } /* sub class 분리 */ /* utility class 라고 부름 */
.btn-blue { background : blue; } /* sub class 분리 */ /* utility class 라고 부름 */

* class 작명에 도움이 되는 작명방식 (BEM : Block__Element--Modifier)

1. "component" 로 분리

<div class="profile">
  <img class="profile">
  <h4 class="profile">이름</h4>
  <p class="profile">소개글</p>
  <button class="profile">빨간버튼</button>
  <button class="profile">파란버튼</button>
</div>

2. "요소" 로 분리

<div class="profile">
  <img class="profile__img">
  <h4 class="profile__h4">이름</h4>
  <p class="profile__p">소개글</p>
  <button class="profile__button">빨간버튼</button>
  <button class="profile__button">파란버튼</button>
</div>

3. "디자인","역할" 로 분리

<div class="profile">
  <img class="profile__img">
  <h4 class="profile__name">이름</h4>
  <p class="profile__content">소개글</p>
  <button class="profile__button--red">빨간버튼</button>
  <button class="profile__button--blue">파란버튼</button>
</div>