HTML 기초

태그 : html문서를 구성하고 있는 요소

<>, 태그에는 이름과 속성이 있다
열린 태그와 닫힌 태그로 구성되어있다

<dd> </dd>

닫힌태그가 없는 태그들도 존재함

H1~H6 : 타이틀이 될만한 곳에 사용

P : 문단의 단락을 이루는 태그. 기본16px이다

a : 앵커태그 사이트를 연결해준다

<p><a href="http://www.google.com">구글홈페이지</a></p>

i 이태릭체 (기울임체)

sup 위첨자

ins 밑줄

del 가운데 밑줄

br 줄바꿈 태그. 닫는태그는 없다

리스트태그
-ul:비순차태그

    <p>메뉴리스트</p>
<ul>
    <li>메뉴1</li>
    <li>메뉴2</li>
    <li>메뉴3</li>
    <li>메뉴4</li>
    <li>메뉴5</li>
</ul>

-ol:순차태그

 <p>지역리스트</p>
<ol>
    <li>서울</li>
    <li>경기</li>
    <li>인천</li>
    <li>부산</li>
    <li>제주</li>
</ol>

지역리스트

1. 서울
2. 경기
3. 인천
4. 부산
5. 제주

target="_blank" : 기존사이트 외에 새 탭이 열림 > 구글 taeget="_self" : 현재 탭에서 새로운 탭으로 바뀜> 네이버

table
표 형식의 레이아웃을 만드는 태그. 현재는 사용빈도 줄어듬

<tr>:행
<td>:열

<table border="1">
    <tr>
        <td>중간고사성적</td>
    </tr>
    <tr>
        <td>국어</td>
        <td>영어</td>
        <td>수학</td>
    </tr>
    <tr>
        <td>100</td>
        <td>90</td>
        <td>80</td>
    </tr>
    <tr>
        <td colspan="2">평균</td>
        <td>80</td>
       
    </tr>
</table>

리스트태그 - dl,dd,dt

<dl>
    <dt>메뉴리스트</dt>
    <dd>짜장면</dd>
    <dd>짬뽕</dd>
    <dd>볶음밥</dd>
    <dd>탕수육</dd>

</dl>

img - 웹사이트에서 이미지를 출력해주는 태그

audio -웹사이트에서 사운드 출력해주는 태그
외부플러그인 없이 사운드 출력 가능

<audio src="" controls="" autoplay="" loop=""></audio>

video - 동영상을 출력하는 태그

    <video src="" type="" controls=""
    </video>

폼태그

이름:
이름:<input type="text" name="uname" />
아이디:
아이디:<input type="text" name="uid" />
비밀번호:
비밀번호:<input type="password" name="upw"/>
input type="radio"
radio =남 or 여 처럼 한가지만 선택해야할때
성별:남, 여
<input type="radio" name="gender" value="m">남, <input type="radio" name="gender" value="f">여
좋아하는 음식: 대림국수 열탄불고기 타코비

action:버튼을 눌렀을 때 넘어가는 서버쪽의 주소를 적어주는곳
method: 정보가 가는 방식을 결정하는것
method= get(도메인 뒤에 정보가 따라붙어가는것, 보안에 취약) or post(문서가 암호화되어 서버로 전송되는것)

div,span - 레이아웃 구성태그

블록요소
-전체를차지하여 한줄에 한 줄씩 차지,
-크기값 가질 수 있음
-상하좌우 마진 & 패딩을 가질 수 있음
-레이아웃을 작업하는 요소로 적합

<주요 블록 요소들>
div ul li p ol h1~h6 form header nav footer section article aside table th td figure figcaption caption blockquote

인라인요소
-사용 가능한 필요한 만큼의 영역을 사용함(컨텐츠너비만큼)
-한 줄에 여러개 배치
-크기값 가질 수 없음(사이즈지정x)
-상하 마진 적용 불가능
(좌우 마진은 가능 / 패딩은 상하좌우 가능 )
-텍스트를 작업하는 요소로 적합

<주요 인라인 요소들>
<span> <a> <em> <b> <strong> <video> <audio>등

인라인-블럭요소
-요소가 수평으로 쌓이지만 블록요소처럼 사이즈적용할 수 있다
-크기값 가질 수 있음(가로 너비& 세로 길이 지정가능)
-상하좌우 마진&패딩 적용 가능
(좌우 마진은 가능 / 패딩은 상하좌우 가능 )
-텍스트를 작업하는 요소로 적합
-사용 가능한 필요한 만큼의 영역 사용함(컨텐츠너비만큼)

<주요 인라인 블록 요소들>
<img> <input> <button>