웹찢남

HTML 정리 본문

FRONT_END/이론 정리

HTML 정리

harry595 2020. 12. 8. 20:24

공부용으로 HTML 관련 문헌들 쭉 보면서 머리를 한번 정리 해봤어요!

참고하세요! 

 

<a> target=”_blank” -> 새창에서 로드 title=”12” -> 마우스 올렸을 때 나오는 글

 

<li> 각각의 항목들을 구분         li:list

 

<ul><li> 로 그룹핑        ul: unordered list

 

<ol><li>는 숫자로 항목을 구분 1,2,3,4      ol: ordered list

 

<meta charset=”utf-8”> -> 문서의 인코딩 방법

 

<!DOCTYPE html> -> Document type declatation (브라우저에게 이거는 어떤 표준을 따르는지 알려주는 태그)

 

<p> -> 단락을 설정해줌, p와p의 사이엔 기본적으로 indent가 있음

 

<br> -> 줄 바꿈이 한 줄만 있음 p태그는 두 줄 있음

 

<img src=”img.jpg” width=200 height=300 alt=”산 사진” title=”산 사진”> height 하나만 설정하면 비율 맞게 조정, alt는 사진이 깨질 경우 대체 텍스트, title은 마우스를 올렸을 때 나오는 글

 

<table border=”2”> -> 모서리가 두개

    <thead>     ->    헤더

           <tr> <td>이름</td> <td>성별</td></tr> -> td는 table data

    </thead>

    <tbody>     ->        바디

           <tr> <td>정지운</td> <td>남자</td></tr> -> tr은 td를 그룹핑

    </tbody>    (추가로 tfoot 태그도 존재)

</table>

 

<td>에 <td rowspan=”2”> 이렇게 하면 행을 병합 <td colspan=”3”> 이러면 3개의 열을 병합

 

<form action=”/”> -> method는 default로 get이 됨

<input type=”text” name=”id”> -> text는 문자열을 의미 name은 서버에서 값을 받을 때 분별

<input type=”password” name=”pwd”> -> 값을 입력하면 자동으로 검정 동그라미로 됨

<input type=”submit” name=”address” value=”123”> -> value는 placeholder

<textarea cols=”50” rows=”2”> placeholder </textarea>

</form>

 

<form action=””>

  <select name=”color” mutiple> -> multiple 속성은 다중 선택 가능

      <option value=”red”> 붉은색 </option>

      <option value=”black”> 검은색 </option>

   </select>

   <p>

      <input type=”radio” name=:”color” value=”red”> -> name이 같아야 다중선택이 안됨

      <input type=”radio” name=:”color” value=”blue” checked> -> checked는 default 선택

   </p>

   <p>

      <input type=”checkbox” name=:”size” value=”55”> -> 다중 선택 가능

      <input type=”checkbox” name=:”size” value=”65”>

   </p>

   <label for=”id_submit”>제출</label>: -> 아래의 input type을 칭함

   <input id=”id_submit” type=”submit”>

   <input type=”button”> -> onclick을 통해 사용

   <input type=”reset”> -> 입력 값 초기화

   <input type=”hidden” name=”hide” value=”eging”> -> hidden 타입으로 value 전송

</form>

 

<form action=”” method=”post” enctype="multipart/form-data">

   <input type=”file” name=”profile”> -> 파일 선택 기능

   <input type=”submit”>

</form>

 

 

<font size=”8” color=”red”>Hello</font> -> css 속성을 tag로 먹일 수 있음

 

Meta tag는 브라우저에 자신의 정보를 보내는 역할

<meta charset=”utf-8”> -> 이 페이지는 utf-8로 인코딩 됨

<meta name=”description” content=”배고파”> -> 보통 웹 페이지를 소개하는 설명

<meta name=”keywords” content=”코딩,css”> -> 해쉬태그같은거

<meta name=”author” content=”egoing”> -> 개발자 이름

<meta http-equiv=”refresh” content=”30”> -> 30초 마다 새로고침

 

Semantic(의미론적) tag

Article: 본문       aside: 내용과 관계가 적은 내용

Nav: 문서의 네비게이션 항목       figure: 삽화나 다이어 그램

Header 화면의 상단정보             main: 문서에서 가장 중심이 되는 컨텐츠

Footer: 화면의 하단 정보            mark: 참조나 하이라이트 표시를 필요로하는 문자

Details: 화면에 표시되지 않는 정보를 의미           time: 시간을 정의

Section: 문서의 구획들을 정리 (역할이 분명하지 않는 부분을 tag)

 

<head><meta name="viewport" content="width=device-width, initial-scale=1.0"></head>

è  화면이 줄어도 device의 width에 맞춘다는 뜻

 

<iframe src=https://www.naver.com width=”500”></iframe> ->외부의 컨텐츠를 가져올 때 사용
iframe내에 sandbox 속성을 주면 js같은 행위들은 차단이 된다.

 

<video width=”400” controls><source src=”videos/small.mp4”></video> -> controls는 재생 기능

 

Input type의 종류

 

1.number(min,max기능)

2.date: 달력이 나옴

3.email: 이메일 양식

4.search: 검색할때 사용한다는 의미

5.tel: 전화번호를 넣는다는 의미

6.url: url 포맷을 지키도록 함

7.range: 슬라이더가 생겨 min=”0” max=”10” 이런 식으로 사용

 

<form action=”” autocomplete=”on”> ->autocomplete은 form tag 내의 모든 input에 적용

<input type=”text” name=”id” placeholder=”input하세요” autofocus required pattern=”[a-zA-Z]”>

-> autofocus는 맨 처음 페이페이 로드될 때 focus 될 곳 선언

-> Required의 경우 다른 input들과 함께 있을 때 꼭 필수로 값이 들어가야 할 값만 적어도 되도록 하는 것

'FRONT_END > 이론 정리' 카테고리의 다른 글

JAVASCRIPT 정리  (0) 2020.12.08
CSS 정리  (0) 2020.12.08
'FRONT_END/이론 정리' Related Articles more
Comments