Html 구조 및 간단 코드정리
Html의 구조
1.head부분
-문서의 정보 및 스타일 특징이 입력되는 부분
2.body부분
-사이트에 보여지는 정보가 입력되는 부분
1.head부분 요소
1)title
창에 띄웠을때 나타나는 이름
사용
<title>제목</title>
2)link
다른곳에 저장된 파일을 불러올 때 사용
사용
<link href="style.css" rel="~" type="~~" />
href는 위치 rel, type는 파일의 타입에 관한 내용
3)meta name
웹사이트가 담고 있는정보 (공유될 때 제목으로 나타나는 부분!)
사용
<meta name="description" content="원하는 제목">
4>style
css가 사용되는 부분으로 디자인 글짜크기 등을 정리하는 부분
사용
<style> .item{ color: red;} </style>
2.body요소
태그의 종류
1.글씨관련 태그
2.이미지태그
3.링크태그
4.테이블태그
5.목록태그
6.구역태그
7.입력태그
1)글씨관련태그
<h1~6></h1~6>tag -> 글씨 크기를 제목처럼 바꿔줌
<b></b>tag->굵은 글씨
<i></i>-> 기울은 글씨
<p></p>->한문단글씨
2)이미지태그
<img src="주소"/>
<video src="주소" controls/>
3)링크태그
<a href="주소">구글</a> 주소로 향하는 구글 글씨자체가 링크
<a href="주소" target="_blank">페이스북</a>윗 줄과 똑같으나 _blank는 새창에서 띄우라는말
4)테이블 태그
<table>-> <table border="1"> 테이블에 표 생성
<thead>칼럼의 개수와 이름
<tr>
<th>이름</th>
<th>나이</th>
</tr>
</thead>칼럼의 들어가는 속성
<tbody>
<tr>
<td>승균</th>
<td>22살</th>
</tr>
</tbody>
5)목록태그
<ol>->넘버 리스트 1.~~ 2.~~ 이런식
<li>누구1</li>-->1.누구1
<li>누구2</li> 2.누구2
</ol>
<ul>->숫자-> 점으로 표시
<li>누구1</li>-->누구1
<li>누구2</li> 누구2
</ul>
6)구역태그
<div> </div> 1줄을 모두 차지 block 요소
<span></span> 정해진 구역만 차지 inline 요소
7)input 태그->정보받을때 사용
텍스트<input type="text"/>
체크박스<input type="checkbox"/>
라디오<input type="radio"/>
색깔<input type="color"/>
여러 문장<textarea></textarea>
드랍다운<select name="name">
<option value="균1">균1</option>
<option value="균2">균2</option>
</select>
로그인 입력창 만들시
<form>
<input type="email" placeholder="이메일"/>
<input type="password" placeholder="비밀번호"/>
<button type="submit"/>로그인</button>
</form>
시작한지 얼마안돼서 잘 모르는 부분이 많은데 댓글에 부족한 부분 추가해주시면 감사하겠습니다! :)