HTML 정리

1.속성: name VS id

https://m.blog.naver.com/PostView.nhn?blogId=bluegriffin&logNo=40132483542&proxyReferer=https:%2F%2Fwww.google.com%2F

https://m.blog.naver.com/PostView.nhn?blogId=imansei0&logNo=110168823349&proxyReferer=https:%2F%2Fwww.google.com%2F

2.요소: 인라인 VS 블록

https://junistory.blogspot.com/2017/07/html5.html

https://homzzang.com/b/html-103

3. Tag

• - 블록
• - 인라인
• form Tag

태그의 속성 for를 이용해 레이블과 요소를 서로 연결. 마우스로 을 클릭해도 요소를 서로 연결할 수 있다.

• Input Tag

• Type 속성

  • text

  • email - required 속성 지정 시 유효한 이메일 주소인지 검사.

  • password

  • radio - 단일 선택

  • checkbox

  • reset

  • image

  • hidden - 사용자에게 보이지 않지만 서버로 전송. name, value 속성값이 전송

  • submit

  • date - 날짜

  • datetime - 날짜, 시간

  • datetime-local - 현지 날짜/시간

  • month, time, week

  • color - 색상 코드를 입력

  • tel - pattern 같이 사용

  • search

  • range - 2개의 숫자 사이의 숫자를 선택할 수 있는 슬라이더 바 형식

  • number - 위아래 버튼이 있어 숫자 증감 가능

  • url

• 속성

  • autocomplete - 자동으로 입력 완성

  • autofocus - 페이지가 로드되면 자동으로 입력 포커스

  • placeholder - 입력 힌트

  • readonly - 읽기 전용

  • required - 입력 양식 제출 전 반드시 채워져야 함

  • pattern - 허용하는 입력의 형태를 정규식으로 지정

    메타 문자

    . - 한개의 어떤 문자

    \d - 한개의 숫자

    \w - 문자, 숫자

    \s - 공백 문자(공백, 탭, 줄 바꿈, 캐리지 리턴)

    ^ - 시작(패턴의 시작)

    $ - 끝 (패턴의 끝)

    [ ] - 문자 종류. 범위([abc]는 a ~ c)

    수량 한정자(뒤에 입력)

    () - 문자 그루핑"abc|adc" == "a(b|d)c

  • • 0회 이상 반복

  • -1회 이상 반복

    ? - 0 또는 1회

    {m} - m회

- 자동으로 스크롤바 생김</p> <select name=""> <option value=""></option> </select> <p>반드시 value 속성 option이 가져야함</p> <form enctype="multipart/form-data"> <input type="file" accept="image/jpg, image/gif"> </form> <p>파일 업로드</p> <p>enctype="multipart/form-data" → 파일을 올바르게 업로드하게 도움.</p> <p>accept 속성은 업로드시킬 파일의 MIME 타입을 브라우저에게 알려준다.</p></div> <!-- System - START --> <!-- System - END --> <div class="container_postbtn #post_button_group"> <div class="postbtn_like"><script>window.ReactionButtonType = 'reaction'; window.ReactionApiUrl = '//louisus.tistory.com/reaction'; window.ReactionReqBody = { entryId: 234 }</script> <div class="wrap_btn" id="reaction-234" data-tistory-react-app="Reaction"></div><div class="wrap_btn wrap_btn_share"><button type="button" class="btn_post sns_btn btn_share" aria-expanded="false" data-thumbnail-url="https://t1.daumcdn.net/tistory_admin/static/images/openGraph/opengraph.png" data-title="HTML 정리" data-description="1.속성: name VS id https://m.blog.naver.com/PostView.nhn?blogId=bluegriffin&logNo=40132483542&proxyReferer=https:%2F%2Fwww.google.com%2F https://m.blog.naver.com/PostView.nhn?blogId=imansei0&logNo=110168823349&proxyReferer=https:%2F%2Fwww.google.com%2F 2.요소: 인라인 VS 블록 https://junistory.blogspot.com/2017/07/html5.html https://homzzang.com/b/html-103 3. Tag - 블록 - 인라인 form Tag 태그의 속성 for를 이용해 레이블과 요.." data-profile-image="https://tistory1.daumcdn.net/tistory/3844828/attach/f398e65af1c94e278b9432cc16077a30" data-profile-name="Louisus" data-pc-url="https://louisus.tistory.com/234" data-relative-pc-url="/234" data-blog-title="개발자 도비"><span class="ico_postbtn ico_share">공유하기</span></button> <div class="layer_post" id="tistorySnsLayer"></div> </div><div class="wrap_btn wrap_btn_etc" data-entry-id="234" data-entry-visibility="public" data-category-visibility="public"><button type="button" class="btn_post btn_etc2" aria-expanded="false"><span class="ico_postbtn ico_etc">게시글 관리</span></button> <div class="layer_post" id="tistoryEtcLayer"></div> </div></div> <button type="button" class="btn_menu_toolbar btn_subscription #subscribe" data-blog-id="3844828" data-url="https://louisus.tistory.com/234" data-device="web_pc" data-tiara-action-name="구독 버튼_클릭"><em class="txt_state"></em><strong class="txt_tool_id">개발자 도비</strong><span class="img_common_tistory ico_check_type1"></span></button><div class="postbtn_ccl" data-ccl-type="2" data-ccl-derive="2"> <a href="https://creativecommons.org/licenses/by-nd/4.0/deed.ko" target="_blank" class="link_ccl" rel="license"> <span class="bundle_ccl"> <span class="ico_postbtn ico_ccl1">저작자표시</span> <span class="ico_postbtn ico_ccl3">변경금지</span> </span> <span class="screen_out">(새창열림)</span> </a> </div> <!-- <rdf:RDF xmlns="https://web.resource.org/cc/" xmlns:dc="https://purl.org/dc/elements/1.1/" xmlns:rdf="https://www.w3.org/1999/02/22-rdf-syntax-ns#"> <Work rdf:about=""> <license rdf:resource="https://creativecommons.org/licenses/by-nd/4.0/deed.ko" /> </Work> <License rdf:about="https://creativecommons.org/licenses/by-nd/4.0/deed.ko"> <permits rdf:resource="https://web.resource.org/cc/Reproduction"/> <permits rdf:resource="https://web.resource.org/cc/Distribution"/> <requires rdf:resource="https://web.resource.org/cc/Notice"/> <requires rdf:resource="https://web.resource.org/cc/Attribution"/> </License> </rdf:RDF> --> <div data-tistory-react-app="SupportButton"></div> </div> <!-- PostListinCategory - START --> <!-- PostListinCategory - END --> </div> <div class="area_etc"> </div> <div class="area_reply"> <strong class="tit_reply" onclick=""> Comments</strong> <div data-tistory-react-app="Namecard"></div> </div> </div> </div> </div> <hr class="hide"> <div id="footer" class="area_foot"> <small class="info_copyright"> Blog is powered by <a href="http://www.kakaocorp.com" class="emph_t" target="_blank">kakao</a> / Designed by <a href="http://blogpack.tistory.com" class="emph_t" target="_blank">블로그팩</a> </small> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://tistory1.daumcdn.net/tistory/3844828/skin/images/script.js?_version_=1588575788"></script> <div class="#menubar menu_toolbar "> <h2 class="screen_out">티스토리툴바</h2> <div class="btn_tool btn_tool_type1" id="menubar_wrapper" data-tistory-react-app="Menubar"></div><div class="btn_tool"><button class="btn_menu_toolbar btn_subscription #subscribe" data-blog-id="3844828" data-url="https://louisus.tistory.com" data-device="web_pc"><strong class="txt_tool_id">개발자 도비</strong><em class="txt_state">구독하기</em><span class="img_common_tistory ico_check_type1"></span></button></div></div> <div class="layer_tooltip"> <div class="inner_layer_tooltip"> <p class="desc_g"></p> </div> </div> <div id="editEntry" style="position:absolute;width:1px;height:1px;left:-100px;top:-100px"></div> <!-- DragSearchHandler - START --> <script src="//search1.daumcdn.net/search/statics/common/js/g/search_dragselection.min.js"></script> <!-- DragSearchHandler - END --> <div style="margin:0; padding:0; border:none; background:none; float:none; clear:none; z-index:0"></div> <script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-fc4490cda2c6023719518a22328fdd43d083c13b/static/script/common.js"></script> <script type="text/javascript">window.roosevelt_params_queue = window.roosevelt_params_queue || [{channel_id: 'dk', channel_label: '{tistory}'}]</script> <script type="text/javascript" src="//t1.daumcdn.net/midas/rt/dk_bt/roosevelt_dk_bt.js" async="async"></script> <script>window.tiara = {"svcDomain":"user.tistory.com","section":"글뷰","trackPage":"글뷰_보기","page":"글뷰","key":"3844828-234","customProps":{"userId":"0","blogId":"3844828","entryId":"234","role":"guest","trackPage":"글뷰_보기","filterTarget":false},"entry":{"entryId":"234","entryTitle":"HTML 정리","entryType":"POST","categoryName":"개발/HTML","categoryId":"883716","serviceCategoryName":null,"serviceCategoryId":null,"author":"4340683","authorNickname":"Louisus","blogNmae":"개발자 도비","image":"","plink":"/234","tags":[]},"kakaoAppKey":"3e6ddd834b023f24221217e370daed18","appUserId":"null"}</script> <script type="module" src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.5/index.js"></script> <script src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.5/polyfills-legacy.js" nomodule="true" defer="true"></script> <script src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.5/index-legacy.js" nomodule="true" defer="true"></script> </body> </html>