HTML&CSS

Margin auto

• 요소를 가로 중앙에 오게 한다.
• margin: 위,아래 왼,오른쪽;

<div class="center"></div>

.center {
	background-color: tomato;
    width: 300px;
    height: 300px;
    margin: 0 auto;
    /*
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    */
}

→ class가 center인 div는 300px의 너비를 가지며, 좌우 나머지 공간은 같은 비율로 나눠진다.

선택자(selector)-child

first-child

selector:first-child {
	/*첫번째 요소에 적용되는 스타일*/
}

last-child

selector:last-child {
	/*마지막 요소에 적용되는 스타일*/
}

nth-child(odd)

selector:nth-child(odd) {
	/*홀수번째 요소에 적용되는 스타일*/
}

nth-child(even)

selector:nth-child(even) {
	/*짝수번째 요소에 적용되는 스타일*/
}

List

<li>

• 목록 아이템

<li>apple</li>
<li>banana</li>
<li>orange</li>
<li>lemon</li>
<li>mango</li>
<li>grape</li>

<ol>

• ordered list
• 순번이 있는 목록
• <li>태그들을 감싼다.

<ol>
  	<li>apple</li>
	<li>banana</li>
	<li>orange</li>
	<li>lemon</li>
	<li>mango</li>
	<li>grape</li>
</ol>

<ul>

• unordered list
• 순번이 없는 목록
• <li>태그들을 감싼다.

<ul>
  	<li>apple</li>
	<li>banana</li>
	<li>orange</li>
	<li>lemon</li>
	<li>mango</li>
	<li>grape</li>
</ul>

• 목록 아이템 왼쪽 원은 list-style 속성으로 스타일을 바꿀 수 있다.

ul {
  list-style: none;
	/*원 모양 없어짐*/
}

list-style - CSS: Cascading Style Sheets | MDN

목록은 항상 <ul>이나 <ol>로 감싸야 한다!

참고) 요소들에는 브라우저에서 지정한 margin, padding등이 있다.
ul은 margin과 padding이 지정되어있다. 직접 margin과 padding을 지정하면 브라우저가 설정한 여백은 사라진다.

padding-inline-start - CSS: Cascading Style Sheets | MDN

Table

<table>,<tr>,<td>,<th>

• 테이블(표)은 항상 <table>태그로 감싸져있어야 한다.
• <tr> : table-row, 열
• <td> : table-data, 셀
• <th> : table-heading, 제목

<table>
    <tr>
      <th></th>
      <th>1열</th>
      <th>2열</th>
    </tr>
    <tr>
      <th>1행</th>
      <td>1, 1</td>
      <td>1, 2</td>
    </tr>
    <tr>
      <th>2행</th>
      <td>2, 1</td>
      <td>2, 2</td>
    </tr>
 </table>

테이블 선

• border-collapse : 테이블 테두리와 셀의 테두리 사이 간격. <table>에 적용한다.
  → collapse : 간격을 없앤다.
  → separate : 기본값, 간격이 있다. border-spacing속성으로 간격을 조절한다.(기본은 2px)

table {
  border-collapse: collapse;
}

table tr,td, th {
  border: 1px solid black;
}

셀 병합

• <td>나 <th>에 아래 속성들을 추가한다.
• colspan : 열 병합
• rowspan : 행 병합

<table>
    <tr>
      <th></th>
      <th>1열</th>
      <th>2열</th>
      <th>3열</th>
      <th>4열</th>
    </tr>
    <tr>
      <th>1행</th>
      <td>1, 1</td>
      <td rowspan="2">1, 2에 rowspan2추가</td>
      <td>1, 3</td>
      <td>1, 4</td>
    </tr>
    <tr>
      <th>2행</th>
      <td>2, 1</td>
      <td>2, 2</td>
      <td>2, 3</td>
    </tr>
    <tr>
      <th>3행</th>
      <td>3, 1</td>
      <td>3, 2</td>
      <td>3, 3</td>
      <td rowspan="2">3, 4에 rowspan2추가</td>
    </tr>
    <tr>
      <th>4행</th>
      <td>4, 1</td>
      <td colspan="2">4, 2에 colspan2 추가</td>
    </tr>
  </table>

Input

• type="text" : 텍스트 입력
• type="password" : 비밀번호 입력(까만 점)
• type="number" : 숫자만 입력 가능
• placeholder : 도움말(실제 텍스트가 입력되어있는건 아님)
• value 속성을 이용하여 사용자가 입력하기 전에 미리 텍스트를 input에 넣을 수 있다.

textarea

• input보다 긴 텍스트 입력 가능

hover

• 마우스 커서를 올렸을 때 스타일을 지정한다.

button:hover {
    cursor: pointer;
		/*마우스 커서 모양을 포인터로 바꾼다.*/
}

opacity

• 요소를 투명하게 만든다.
• 0으로 갈수록 투명해진다.

button:hover {
  opacity: 0.8;
	/*버튼에 커서를 올리면 살짝 투명해지게 했다.*/
}

position

position 포스팅 보러가기↗

inline/block/inline-block

display 포스팅 보러가기↗

flex

flex 포스팅 보러가기↗

---

조금만 더 힘내자!