저번 시간 HTML,CSS 정리(1)에 이은 정리(2)입니다.
정리(1) 이후로 했던 개념들을 제외한 나머지 개념들에 대한 정리를 하겠습니다.

1.이미지

1.<img> 태그로 이미지 넣기

<img alt="HTML" src="https://www.w3schools.com/whatis/img_js.png">

img 태그에는 alt, src 등의 속성이 포함됩니다.

• alt: 이미지가 뜨지 않았을 때(서버에서 이미지가 삭제됐거나 잘못된 이미지 주소일 때), 이미지 대신 보여줄 텍스트
• src: 이미지 파일 경로 or 이미지 url 주소

2.background-image로 이미지 넣기

background-img로 이미지를넣는 것은 html 내에서 이루어지지 않고, css 속성으로 이미지를 추가한다.

html

<div class="bg-img">배경이미지</div>

css

bg-img {
  background-color: yellow;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1280px-HTML5_logo_and_wordmark.svg.png");
}

2.margin-auto

block 요소를 레이아웃을 할 때 정중앙으로 위치를 이동시키기 위해서 margin-auto를 사용합니다.

.center {
  margin: 20px auto;
}

3.list

list(목록)을 표현할 때 ol, ul, li 태그를 사용합니다.

1.ol태그와 li태그

숫자가 필요할 때 씁니다.

<ol>태그의 목록</ol>
  <li>b<li>
  <li>p<li>

2.ul 태그와 li 태그

숫자가 필요없을 때 씁니다.

<ul>태그의 목록</ul>
   <li>b<li>
   <li>p<li>

list를 표현할 때 margin,padding,border 등이 브라우저에 따라 default값으로 나올 때 css 스타일을 변경해주어야 하는 점을 유의하자.

4.table

table(표)을 만들기 위한 태그로는

<table>, <thead>, <tbody>, <tr>, <th>, <td> 가 있습니다.

테이블은 <table>태그로 시작합니다.
<table>태그 내에 행과 열이 만들어지며,

행을 만들 때는 <tr>
각각의 셀은 <tr>태그 내에 <td>태그를 사용합니다.

또한 제목을 설정할 경우

<table>
   <tr>
     <th>축구선수</th>
     <td>손흥민</td>
     <td>메시</td>
   </tr>

다음과 같이 <td>위쪽에 써줍니다.

셀의 병합을 사용하게 될 경우
<td>나 <th>태그내에 colspan(세로셀), rowspan (가로셀)이라는 속성을 넣어 병합합니다.
사용예시)

<td colspan="2">안녕하세요</td>

5.input

1.input, textarea,placeholer

사용자가 텍스트를 직접 입력할 때는 input 또는 textarea 태그를 사용합니다.

<input type="text" placeholder="ID"> 
<input type="password" placeholder="비밀번호"> 
<input type="phonenumber" placeholder="전화번호">

위 코드는 아래와 같이 구현이 됩니다.

위 코드에서 placeholder는 '도움말'이라고 생각하면 됩니다.

textarea의 경우 input보다 더 긴 텍스트를 넣고 싶을 때 사용합니다.

<textarea>방명록:</textarea>

*위 표의 resize 기능은 textarea{resize:none;}을 설정해 없앨수 있습니다.

2.button

버튼을 설정하는 태그는 <button> 태그입니다.

<button>가입완료</button>

위 코드는 아래와 같이 구현됩니다.

가입완료

버튼을 선택했을 때 커서가 나오게 하려면 hover를 이용합니다.

button:hover {
cursor: pointer;
}