HTML 기초 1

22.02.15
인프런에서 '유노코딩'님의 HTML기초 무료강의를 듣고 공부하였고 제가 스스로 복습하기 위해서 정리한 내용입니다.

1. 블록요소 vs 인라인요소

• 블록요소는 너비를 전체 차지한다. (영역을 차지한다.)
• 인라인요소는 특정부분만 차지한다. (strong, mark, em)
• strong은 굵게, mark는 형광펜 칠하기, em은 이탤릭체=기울이기
• &+nbsp는 1개이상의 공백이 필요할때 쓰기
• br은 줄바꿈, hr은 수평선을 나타낼때, 그리고 br과 hr은 단일태그!!

2. 이미지 넣기

• 이미지는 img 단일 태그로 표시한다.
• img태그에 src 속성으로 이미지 주소를 넣어준다. img src=”주소” url 주소도 가능!!
• 이미지 크기를 지정해주기 width=”너비” height=”높이” 각각 픽셀 정수로만 표시하기

3. 컨테이너

• 블록으로 지정할 수 있다. div로 묶어주면 css나 자바스크립트를 적용하기 쉽다.

  • cf. css는 스타일 적용, JS는 상호작용

• div=블록레벨컨테이너, span=인라인 컨테이너

4. 전역속성

• 태그의 부가기능을 정의 하는 것, 개수의 제한이 없다. 사용자 정의 값을 사용한다.
• 식별자 속성은 태그명이 같은 태그를 구별하기 위해서 사용한다.
  💡 id : 요소에 고유한 이름을 부여함, 하나의 태그에만 가능
  💡 class : 요소를 그룹별로 묶는다, 다중지정 중복지정 가능
  💡 style : css선언
  💡 title : 요소에 추가적인 정보제공, 사용자에게 툴팁 제공
  (cf. 툴팁? 마우스 커서를 갖다 댔을 때 작은 말풍선이 뜨는 것)

5. 링크 만들기

• a태그로 링크 만들기 href속성으로 링클를 만든다. 인라인 요소이다.
• target 속성으로 현재탭 or 새탭 선택가능
  💡 target=”_self” 현재탭에서 열기(기본값) target=”_blank” 새탭에서 열기
• href속성에서 전화하기, 메일보내기도 가능
  💡 href=”mailto:메일주소” href=”tell:전화번호”

6. 목록만들기

• ul,ol,li는 블록레벨 요소를 만드는 태그
• ul = unorderedlist = 순서없는 목록
• ol = orderedlist = 순서있는 목록

<ul>
 <li>토끼</li>
 <li>다람쥐</li>
</ul>
<ol>
 <li>html</li>
 <li>css</li>
<ol>

7. 입력요소 만들기 - input

• input : 사용자로부터 값을 입력 받을 수 있는 대화형 컨트롤(=필드)를 나타낸다.

• 인라인요소, 단일태그, 입력창

• input에는 다양한 요소가 있다. 매우 많으므로 쓰면서 익숙해지자

• 중요! name속성으로 input태그를 식별해줄것!! 왜냐면 JS작업할때 수월해지도록!!

• input속성 모음 (링크↓) 출저=강의참고자료
  HTML: Hypertext Markup Language | MDN

• 오늘 배운 입력요소들 ↓↓

  <input name="text" type="text" maxlength="10" placeholder="메시지를 입력해주세요!" /><br> <br>
  <input name="push" type="button" value="PUSH!"/> <br> <br>
  <input name="color" type="color"/> 색상팔레트 <br> <br>
  <input name="score" type="range" max="100" min="0" step="10"/> <br> <br>
  <input name="birthday" type="date"/> <br> <br>

 💡text : 텍스트 입력창 만들기 / maxlength : 입력 글자수 제한 
 💡placeholder : 텍스트 입력창에 뜨는 안내 메시지 (사용자가 입력하면 사라짐)
 💡button : 클릭할 수 있는 버튼 생성 / value : 버튼에 표시할 내용
 💡color : 색상팔레트에서 색을 선택하여 입력할 수 있게 해주는 것
 💡range : '바'로 보이며 값이 가려진 숫자를 입력할 수 있게 해주는 것 
 💡max,min : range의 최댓값과 최솟값을 지정한다.
 💡date : 특정 날짜를 지정하여 입력할 수 있게 한다.