[HTML] 기본 작성 방법

HTML은 Hypertext Markup Language이다.

다른 문서 연결하는 텍스트 이다. ( 비순차적으로 언제든 다른 문서 연결 가능 )

 

팀 버너스리 - 하이퍼링크 제안 ( 페이지 이동)

----> 1991년 WWW을 개발해서 배포했다.

 

MarkUp - 부가적으로 표시하는것

 

HTML용어 정리

1. 태그

 - 부등호( <> ) 안에 텍스트가 들어갈 때 태그!

2. 엘리먼트

 - 자식 태그끼리 서로 포함관계를 가질 수 있다.

3. 속성 (border, cellpadding, bgcolor)

 - 공백 WhiteSpace 

테이블 안에서의 padding은 글씨가 칸 안에 위치하는 것이다.

 

!DOCTYPE은 선언이다. (declare 하듯이)

pre태그 입력한 그대로 출력 ( 문서상의 공백, 엔터 유지)

---

문자 진하게 표시하기 (b, strong)

<strong><u>sirings</u></strong>

--> sirings

 

리스트 만들기 (ul, ol, li)

	<!-- unOrdered 순서가 정의 되지 않은 -->
    <ul>
		<li>짜장면</li>
		<li>짬뽕</li>
		<li>볶음밥</li>
		<li>탕수육</li>
	</ul>
	
    <!-- ordered 순서가 정의된 ex. 1,2,3순으로 나옴 -->
	<ol>
		<li>짜장면</li>
		<li>짬뽕</li>
		<li>볶음밥</li>
		<li>탕수육</li>
	</ol>

 

링크 이동 ( a태그 ,앤커(Ancher) ) **

<a href="#bottom">맨 아래로 이동</a> <!-- a태그 생성 - #뒤의 아이디 위치 호출 -->
<a name="bottom"></a> <!-- bottom 여길로 와라. 단어가 bottom이 아닌 다른단어라도 실행 됨 -->

<a href="https://www.naver.com">네이버로 이동하기</a>
<a href="hello.html">html페이지로 이동하기 </a>

<img alt="http://news1.kr/articles/?2786566" src="http://image.news1.kr/system/photos/2016/9/28/2152752/article.jpg" width="250" height=300>
<img 
	alt="이미지가 있는 링크나 위치" 
	src="이미지.jpg(인터넷 이미지 사용하는 경우 이미지주소복사)"
	width=" 넓이 "
	height="길이" >

pre태그

<pre>
	pre태그안에 입력을하면
		띄어쓰기와 엔터가 그대로
			출력이 됩니다.
</pre>

 

tabler 태그

  <table border="1" bgcolor="pink" width="50%">
    <!-- tr:테이블의 행,  th:열의 제목,  td:출력 데이터 -->
    <caption>테이블 제목 설정</caption>
    <tr bgcolor="skyblue">
     <th width="20%">이름</th>
     <th width="30%">나이</th>
     <th width="50%">직업</th>
    </tr>
    
    <tr>
     <td bgcolor="yellow">홍길동</td>
     <td>13</td>
     <td rowspan="3">학생</td>
    </tr>
    
    <tr> 
     <td>길라임</td>
     <td>15</td>
    </tr> 
    
    <tr> 
     <td>김주원</td>
     <td>17</td>
    </tr> 
    
    <tr>
     <td colspan="2" align="center">학생수</td>
     <td align="right">3명</td>
    </tr>
    
  </table>