Hyper Text Markup Language : 자료의 구조를 표현하기 위한 언어_
여는 태그와 닫는태그 안에 콘텐츠를 작성
속성 : 태그의 부가적인 기능을 정의하는 것 / 선택사항 -공백으로 구분, 큰따옴표 사용
<태그명 속성명="속성값">내용</태그명>블록레벨 : 한줄전부차지 (너비 100%) 인라인레벨 : 컨텐츠내용만큼만 차지
<p> : 본문 요소를 나타내는 태그로서 가장 많이 사용 / 문단과 문단사이에는 공백이 출력
<h> : 제목요소를 나타냄 <h1>이 글자크기가 크고 <h6>이 가장 작다
<hr> : 수평선 태그(구분선) / 단일태그로서 닫는태그 필요 없음
<br> : 텍스트 내에서 줄바꿈
: 텍스트에서 공백을 두번이상 사용할 때
<storng> : 굵은 글자 / p태그내에서 사용가능
<em> : 기울어진 글자 / p태그내에서 사용가능
<mark> : 형광팬글자 / p태그내에서 사용가능
<img 태그> : 이미지를 표시할 때 사용하는 태그 / alt = 이미지로딩실패시 텍스트 출력 / width height로 크기
<img src="이미지파일" alt="이미지 설명"/>컨테이너 태크 : 컨텐츠나 레이아웃에 영향을 주지 않고 다른 요소 여럿을 묶어 관리하기 편하게 만드는 역할
<div></div>: 블록레벨 컨테이버
<span></span>:인라인 컨테이너
span 태그는 display : inline 이라는 스타일 속성을 내포하고 있으며,
display : inline을 가지고 있는 요소는 폭, 높이 등을 단독으로 결정할 수 없습니다
<strong></strong> : 글자 일부를 감싸면 굵게 표현가능
<a></a> : anchor / href속성을 통해 링크연결 가능 / target속성을 통해 페이지가 열릴 탭 지정
→ <a>태그안에 이미지파일을 넣으면 이미지를 클릭하면 링크 이동
목록 : 순서없는 목록과 순서있는 목록으로 구분
<ul></ul> : 순서 없는 목록 <ol></ol> : 순서 있는 목록
리스트 항목 : list , 리스트아이템<li></li>
input 태그 : 사용자로부터 값을 입력받을 수 있다. 인라인요소 / 여러가지 type속성 존재 /name식별자 사용가능
<input type="text" name="id">select : 다수의 옵션을 포함할 수 있는 선택메뉴 - 드롭다운메뉴
각 옵션에 name식별자 지정 가능 / 각 옵션에 value 속성을 지정할 수 있다.value는 실제도 처리될 값
<select name="coffee">
<option value="sta">스타벅스</option>
<option value="ed">이디야</option>
<option value="bin">커피빈</option>
<select>textarea : 여러줄의 일반 텍스트를 입력 / name식별자 가능
form : 사용자가 입력한 데이터를 서버로 보내기 위해 사용하는 태그
입력 요소들을 감싸며, 입력값을 서버 측으로 제출할 수 있다.
<form>
<input type="text" placeholder="아이디">
<input type="text" placeholder="비밀번호">
<input type="submit" value="로그인">
</form>action : 입력값을 전송할 서버의 url
method : 클라이언트가 입력한 데이터를 어떤 식으로 전송할지 (GET / POST)
<form action=”example.php” method=”POST”> </form>GET : 서버에 요청을 보내 응답을 받아냄 / 정보를 가져오겠다
POST : 서버에 요청을 보내어 작업을 수행 / 정보를 조작하겠다
meta태그 : html 문서에 대한 메타데이터를 정의 / 데이터에 대한 데이터
웹페이지에 대한 정보를 제공하므로 검색엔진이 페이지를 검색할때 참고
뷰포트 : 현재 화면에 보여지고 있는 영역을 의미 / pc와 모바일에서 크기가 다르게 보이는 것
table구성
<table> <thead></thead> <tbody> <tr> <td>1</td> <td>2</td> <tr> </tbody> </talbe>
table태그 내의 tr은 row, td는 column을 의미
thead는 헤드영역, tbody는 바디영역 td대신 th를 사용하면 제목처럼 굵게 처리
