TIL42. html & css (2)

block vs inline

• block요소: 대부분의 html요소 (<header>, <footer>, <p>, <li>, <table>, <div>, <h1>)
• inline요소: 딱 크기만큼만 차지 (<span>, <a>, <img>)

block -> inline 요소로 바꾸기

• display: inline-block; 블록요소를 인라인 요소로 바꿔준다.
• float: 방향설정; 원하는 방향으로 인라인요소로 바꾼 후 정렬 시켜준다.
  

inline -> block 요소로 바꾸기

• display: block; 인라인요소를 블록요소로 바꿔준다.
  

리스트 중 짝수 or 홀수만 변경하고 싶을 때

li:nth-child(odd) {
  background: red;
}


li:nth-child(even) {
  background: blue;
}

이러한 코드를 입력하면

이렇게 변경할 수 있다!!

table

• table은 표를 html css 에서 표를 만들 때 사용된다.
• 테이블은 항상 <table> 태그로 감싸져 있고 <table> 태그 내에서 행도 만들고 열도 만든다.
• <tr> : table row의 줄임말로 행을 의미한다.
• <td> : table data의 줄임말이다.
• <th> : table heading의 줄임말로 사용하면 가운데 정렬이 되고 글씨 두께가 두꺼워진다.

 <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>

아직 css를 추가하지 않아서 선은 보이지 않는다.

• rowspan : 행병합

• colspan : 열병합
  

  위처럼 테이블 데이터에 씌워서 활용하면 된다!!

  input

• <input>태그에는 마침태그가 없다.
  <input> 태그 뒤에는 많은 속성들이 따라오는데

  <input type="text" placeholder="ID"> 
  <input type="password" placeholder="비밀번호"> 
  <input type="number" placeholder="학번">

.relative {
  position: relative;
}
.top-20 {
  top: -20px;
  left: 30px;
}