좌충우돌 개발

2018-03-21_HTML

21 Mar 2018 | Dev HTML

태그 학습

  • <!DOCTYPE html>
  • <html>
  • <head>
  • <meta charset=”utf-8”> : 문자열을 utf-8로 처리 한다는 의미, 한글깨짐 방지
  • <body>
  • <a> : 링크 anchor 태그
  • <p> : 단락 정보를 표현, 간격조정은 CSS를 - 통해서 간격을 조정한다.
  • <br> : 줄바꿈 시각적인 줄바꿈
  • <img> : 이미지 삽입
    • src : 파일
    • width : 넓이
    • height : 높이
    • alt : alternative 이미지를 사용할 수 없었을 때
    • title : 도움말 이미지 마우스를 올렸을 때
  • <table> : 표 구조화된 정보를 표시하기 위해
    • <tr> : 행
    • <td> : 열
    • rowspan : 숫자 만큼 행 병합
    • colspan : 숫자 -1 만큼 열 병합
    • <thead> : 테이블 머릿말
    • <th> : 테이블 머릿말의 각 컬럼명을 표현
    • <tbody> : 테이블 본문(정보)
    • <tfoot> : 테이블의 최하단으로 표시
    • 테이블을 꾸밀 때는 속성보다는 CSS를 많이 사용한다.
  • <form>
    • action : 정보를 어디로 전송할지 설정
  • <input>
    • type :
      • text : 문자열 입력
      • password : 비밀번호 입력
      • submit : 버튼이 표시, 서버로 정보 전송
    • name : 서버로 전송할 값에 이름을 정함
    • value : 입력창의 값

  • <textarea> : 여러줄을 입력할 때 사용, default value는 열림 태그와 닫힘 태그 사이에 작성한다.

  • <select> : dropdown 선택지
    • name : 서버에 전송할 값의 이름
    • multiple : 다중 선택
    • <option> : 선택지
    • value : 서버에 전송할 값
  • <ipnut type = “radio”> : 라디오 버튼 선택지 중 하나만 선택되도록 할 때 사용
    • name : 동일하게 이름으로 그룹핑된다.
    • value : 서버에 전달될 값
  • <input type = “checkbox”> : 한번에 여러개를 선택할 수 있을 때 사용
    • name : 동일하게 이름으로 만들어 그룹핑한다. 서버에 전달될 정보의 이름
  • button javascrip와 사용할 때
    • <input type = “button” value =”버튼” onclick=””>

  • <input type =”reset”> : form태그 안의 내용이 지워진다.

  • 데이터 전송 - hidden
    • <input type=”hidden” name=”” >
  • <label> : 콘트롤러 이름
    • for : 연결하고 하는 태그의 id를 입력
    • 연결하고자 하는 태그를 label태그로 감싼다.
  • method
    • get : url에 값이 노출 된다
    • post : url에 값이 노출되지 않고 데이터 전송
  • 파일업로드
    • <form action=”” method=”post” enctype=”multipart/form-data”>
    • <input type=”file” name=””>
  • HTML은 정보를 담는 그릇이다
  • <meta> : 데이터를 설명하는 데이터
    • <meta charset=”utf-8”>
    • <meta name=”description” content=”내용”>
    • <meta name=”keywords” content=”블라,블라,블라”>
    • <meta name=”author” content=””>
    • <meta http-equiv=”refresh” content=”30”> : 30초마다 페이지가 다시 읽어들인다.
  • semantic : 의미론적인 태그
    • <header> :
    • <nav> : 네비게이션의 역할
    • <article> : 본문
    • <section> : 특정역할로 정의하기 애매한 정보
    • <footer> : 웹사이트 하단에 부가적인 항목을 표시

검색엔진 최적화

  • robots.txt : 검색엔진에 접근을 안내하는 정보
  • sitemap :

모바일 최적화

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

외부문서삽입-ifram

보안 : iframe 속성에 sandbox를 넣어주면 가져오는 페이지의 위협적인 요소를 실행시키지 않는다. javascript 혹은 입력페이지에 의한 데이터 전송 등을 막을 수 있다.

HTML5

  • <video> : 브라우저마다 지원하는 코덱이 다르다. 
      <video width="" controls>
      <source src ="">
  </video>
    • controls: 비디오재생 콘트롤을 보여줌
  • cnaiuse.com : 현재 브라우저의 지원하는 태그 안내
  • HTML5의 입력양식 : 모바일 지원이 강화되었다. 입력값의 min 과 max를 지정할 수 있다.
    • number :

HTML5 입력양식의 속성들###

  • <form>
    • autocompleate=”on” : form내의 자동완성 켬
  • <input>
    • autocompleate=”off” : 자동완성 끔
    • palceholder =”” : 입력창에 안내
    • autofocus : 해당 입력창으로 선택되어 입력을 기다림

HTML5 입력 값 체크###

  • <input>
  • required : 필수 항목
  • pattern = “[a-zA-Z]” : 정규표현식

Related Posts

Comments