[CSS]WeCode-2

### 레이아웃

div {
  background-color: yellow;
  margin-bottom: 20px;
}
.has-width {
  width: 150px;
}

block 요소일 때 width값을 주면 한줄 전체가 아니라 텍스트만 적용
margin에 auto로 설정하면 가로 중앙 배치
.center {
  margin: 20px auto;
}  
이걸 풀어서 표현하면

.center {
  margin-top: 20px;
  margin-right: auto;
  margin-bottom: 20px;
  margin-left: auto;
}

### List

= 목록을 표현하는 태그<li>
  <ol> ordered list 자동 numbering
  <ul> unordered list , numbering X
    
  ul의 스타일은 css 수정
  list-style: none;  #세로줄
  padding: 0; # ul 테두리 내부 여백 없애기
<li> 스타일 수정
  li {
  padding-bottom: 10px;
}
padding-bottom 대신 margin-bottom을 사용가능
  

### table 
  <table>, <thead>, <tbody>, <tr>, <th>, <td>
	<th> 가운데 정렬, 글씨 두껍게(제목에 사용)
  
  <table>
    <tr>
      <td>Row 1, column 1</td>
      <td>Row 1, column 2</td>
    </tr>
    <tr>
      <td>Row 2, column 1</td>
      <td>Row 2, column 2</td>
    </tr>
  </table>
  
  2행 2열의 테이블, 선이 출력되지 않아 css에서 추가해야함.
  
  
   <table class="border-table">
      <tr>
        <th></th>
        <th>내용</th>
        <th>장소</th>
      </tr>
      <tr>
        <th>1시</th>
        <td>HTML이란</td>
        <td>101호</td>
      </tr>
       <tr>
        <th>2시</th>
        <td rowspan="2">HTML실습</td> #행병합
        <td>102호</td>
      </tr>
       <tr>
        <th>3시</th>
        <td>103호</td>
      </tr>
      <tr>
        <th>4시</th>
        <td>CSS란</td>
        <td>104호</td>
      </tr>
      <tr>
        <th>5시</th>
        <td>CSS실습</td>
        <td>104호</td>
      </tr>
      <tr>
        <th>6시</th>
        <td colspan="2">수업 없습니다.</td> #열병합
      </tr>
    </table>
    
    
   	내용	 장소
  1시	HTML이란	101호
  2시	HTML실습	102호
  3시	 	103호
  4시	CSS란	104호
  5시	CSS실습	104호
  6시	수업 없습니다.
  
  

Input

= 직접 텍스트를 입력할 수 있는 태그
type="text" # text를 입력
type="password" # text를 입력하지만 보이지않게
type="number" # number만 입력
type="placeholder" # 도움말

textarea = input보다 더 긴 텍스트를 입력받을 때 사용하는 태그