본문 바로가기
개발

HTML Cheat Sheet

Han Lue 2020. 9. 1. 04:47

HTML Elements

  • HTML element는 start tag, content, end tag로 구성되어 있다 (<tagname>content</tagname>).
  • Empty element의 경우에는 content를 포함하지 않고, end tag를 포함하지 않는다 (<br>, <hr> 등의 tag).
  • <a> tag의 href 같은 것들을 attribute라 한다. Attributes는 HTML elements에 추가적인 정보를 제공한다.
  • end tag를 생략하여도 웹브라우저가 잘 처리할 수 있지만, 추후 예상하지 못한 버그가 발생할 수 있으니 end tag는 꼭 붙이도록 하자.
  • HTML tag는 대소문자를 가리지 않는다. <p> 대신에 <P>를 사용해도 된다. 하지만 W3C는 소문자를 권장하므로 소문자로 사용하도록 하자.

HTML Documents

  • 모든 HTML 문서는 <!DOCTYPE html>로 시작하여야 한다.
  • <!DOCTYPE>은 문서의 type을 선언하며, 웹브라우저가 웹 페이지를 제대로 보여줄 수 있도록 한다.

HTML Attributes

  • alt attribute는 이미지가 네트워크 문제나 경로 문제로 다운로드되지 않았을 때 표시될 text를 value로 갖는다.
  • <html> tag의 lang attribute는 언어와 나라를 지정한다. 웹브라우저나 검색엔진은 이 attribute를 참고하기도 한다.
  • title attribute는 해당 element에 마우스를 올려두었을 때 tooltip으로 표시할 text를 value로 갖는다.
  • attribute도 대소문자를 가리지 않지만 소문자로 사용할 것을 권장한다.
  • attribute의 value에 꼭 quote가 들어갈 필요는 없다. 하지만 quote를 넣는 것을 권장한다.
  • attribute는 start tag 안에만 포함된다.
<a href="https://hanlue.tistory.com">...</a> <!-- good -->
<a href=https://hanlue.tistory.com>...</a> <!-- bad -->

 

  • attribute의 value는 single quote ' 로도 감쌀 수 있다. value 안에 " 가 있는 경우에는 single quote로 감싸면 된다.

HTML Headings

  • title이나 subtitle을 적을 때 사용한다. 반드시 heading의 용도로만 사용해야 한다.
  • search engine은 주로 heading을 이용하여 웹페이지를 indexing 한다. 그러므로 단순히 글자를 크게, 굵게 만들기 위해서 사용하지 말자.
  • 중요한 순으로 <h1> ~ <h6>을 사용한다.
  • heading을 사용하면 앞에 white space가 생긴다. 나중에 white space 없애겠다고 css 고치면서 헤매지 말자.

HTML Paragraphs

  • <p> tag를 사용하면 새로운 줄이 시작되고 웹브라우저가 white space (margin) 를 앞뒤로 추가한다. 그러니 나중에 white space 없애겠다고 css를 만지작거리지 말자.
  • <p> 안에서는 연속된 띄어쓰기나 줄 바꿈이 무시된다.
  • 새로운 paragraph 없이 line break를 할 때에는 <br>을 사용하자.
  • <pre> tag는 연속된 띄어쓰기와 줄 바꿈을 그대로 보여준다.

HTML Styles

  • style attribute의 value는 아래의 문법을 따른다. property와 value는 CSS를 따른다.
<tag style="property:value;">

 

  • text를 align 할 땐 text-align property를 설정한다.

HTML Text Formatting

  • Text formatting elements는 text에 특별한 의미?를 부여할 때 사용한다.
  • <strong>은 중요한 문장에 사용하는 것 같다. 일반적으로는 <b>랑 같은 효과를 낸다.
  • <i>는 alternate voice, mood를 표현하는 text에 사용한다. 기술적 용어나, 다른 언어로 된 phrase, 생각 등에도 사용된다.
  • <em>은 text를 강조할 때 사용하지만 보통은 italic체 효과가 난다. Screen reader가 <em> tag의 content를 읽을 때에는 verbal stress를 넣는다고 한다......
  • <small>은 그냥 더 작은 text를 표현한다.
  • <mark>는 text를 highlight 할 때 사용한다 (형광펜 효과와 비슷).
  • <del>은 text에 취소선을 그을 때 사용한다.
  • <ins>는 inserted text를 정의할 때 사용하는데, 웹브라우저는 그냥 밑줄을 긋는다.
  • <sub>는 subscript text를 정의하는 데에 사용한다. 화학식에서 아래에 있는 작은 글자처럼 보이는 효과가 있다.
  • <sup>는 superscript text를 정의할 때 사용한다 (수학에서 지수와 같은 효과). 보통 각주를 적을 때 사용한다고 한다.

HTML Quotation and Citation Elements

  • <blockquote>는 인용을 할 때 사용한다. <blockquote>를 사용하면 들여 쓰기가 된다.
  • <q>는 "를 삽입한다. 짧은 인용을 할 때 사용하고, cite attribute에 출처를 적을 수 있다고 한다.
  • <abbr>는 축약어 (abbreviation)를 적을 때 사용한다. title attribute에 자세한 용어를 적으면 마우스를 올려두었을 때 description이 나온다. 웹브라우저나 검색엔진은 <abbr>의 정보를 사용한다고 한다.
  • <address>는 주소를 적을 때 사용한다. 위아래로 linebreak가 생기고 글자가 italic체로 보이는 효과가 있다.
  • <cite>는 작품명에 사용한다. <cite> tag안에 포함된 content는 italic체로 보인다.
  • <bdo dir="rtl"> tag 는 content를 flip 할 때 사용한다 (오른쪽에서 왼쪽으로 읽는 형태로).

HTML Colors

  • Color name으로 색을 지정할 수 있다. Tomato, Orange, DodgerBlue, MediumSeaGreen, Gray, SlateBlue, Violet, LightGray...... 140가지나 있다고 한다. 나 땐 없었던 것 같은데;;
  • style에서 글자색을 지정하는 property는 color이다.
  • 같은 color라도 다양한 방법으로 표현할 수 있다. Tomato, rgb(255, 99, 71), #ff6347, hsl(9, 100%, 64%)는 모두 같은 색이다.
  • rgb, hsl에 a를 붙이면 투명도를 조정할 수 있다. 범위는 0~1이다.
  • rgb는 (0, 0, 0)일 때 검은색, (255, 255, 255)일 때 하얀색이다.
  • hexadecimal color를 8자리로 적으면 투명도 조절이 가능하다! (#deadbeef 와 같이).
  • hsl은 생소한데 hue (색깔), saturation (채도), lightness (명도)의 약자이다. hue의 범위는 0~360, saturation과 lightness의 범위는 0~100%이다.

HTML Styles - CSS

  • CSS는 Cascading Style Sheets의 약자인데 여기서 cascading은 parent element에 적용된 style이 chile element에도 적용된다는 것을 의미한다.
  • CSS는 inline, internal (<head>안에 <style> tag로 사용), external (<link>)의 세 가지 방법으로 사용할 수 있지만 external 방식으로 사용하는 것이 일반적이다.
  • <link>로 css link를 추가할 때에는 <head> 안에서 해야한다.
  • style의 border property 를 활용하면 대부분의 HTML elements에 border를 정의할 수 있다.
  • padding property 는 text와 border 사이의 공간을 결정한다.
  • margin property 는 border 밖의 공간을 결정한다. 항상 padding과 헷갈린다.

HTML Links

  • link는 visited, unvisited, active 상태에 따라 다른 색으로 보인다. 마우스를 클릭하고 떼지 않은 상태를 active 라고 하는 것 같다. Active link는 underlined and red라는데 왜 그렇지 않지?;;
  • link를 눌렀을 때 페이지를 어디에 띄울 것인지는 target attribute로 결정한다
    • _self: 현재 페이지에 띄우는 default
    • _blank: 새로운 window나 tab에 띄움
    • _parent은 parent frame에 띄우고 _top은 full body of the window에 띄운다는데 사용법을 잘 모르겠다.
  • href attribute의 주소는 relative URL로도 적을 수 있다.
  • image를 link로 사용하려면 <a href="..."><img ...></a> 와 같이 사용하면 된다.
  • href attribute의 value를 'mailto:email@address.com' 와 같이 설정하면 email 프로그램으로 연결한다.
  • button을 link로 사용할 때에는 onclick attribute에 js code를 넣어주어야 한다 (onclick="document.location='link url'")
  • title attribute에 text를 넣으면 링크 위에 마우스를 올렸을 때 tooltip이 뜨도록 할 수 있다.
  • <a>와 관련된 state는 link (unvisited), visited, hover, active가 있다.
  • link를 이용하면 bookmark를 만들 수도 있다 (웹 페이지가 긴 경우에 사용하면 좋다). Bookmark를 만들기 위해서는 특정 element에 id를 부여한 후 bookmark link의 href를 "#id"로 설정해야 한다.

HTML Images

  • <img>의 width, height를 비율에 맞지 않게 강제로 조정하면 이미지에 왜곡이 생긴다.
  • width, height는 pixel로만 정의한다.
  • <img>의 width, height를 정의하지 않으면 이미지를 로드하는 동안 웹 페이지가 움직여버린다.
  • <img>의 크기는 style attribute로도 정의할 수 있는데 이 방법이 css 코드와 충돌을 일으키지 않아 권장된다 (width, height attribute가 정의되어 있는데 css에 img에 대한 property가 정의되어 있으면 style이 우선적으로 적용된다).
  • <img>의 style에 float를 정의하면 (left or right), 글자 옆에 이미지를 띄울 수 있다.
  • <map>은 image map을 정의한다? Image map은 뒤에 메모해두었다.
  • <area>는 image map 안에 클릭 가능한 영역을 정의한다.
  • <picture>는 여러 이미지를 담을 수 있는 container를 정의한다.

HTML Image Maps

  • image map은 클릭 가능한 영역이 있는 이미지이다.
  • image map은 <img>에 usemap attribute를 정의하여 사용할 수 있다. usemap이 정의된 이미지와 map을 연결하이 위해서는 연결할 <map>의 name 앞에 #를 붙여 usemap의 value로 설정해야 한다.
  • <map> 안에서 클릭 가능한 영역은 <area>로 정의한다. 클릭 가능한 영역의 모양은 rect, circle, poly, default (전체영역) 이 있다.
  • <map> 안의 coords는 클릭 가능한 영역의 크기를 결정한다. 모양에 따라 정의되어야 하는 값의 개수가 달라진다 (rect는 왼쪽 상단, 오른쪽 하단의 좌표를 정의 (x1, y1, x2, y2 총 4 개의 값), circle은 원의 중심과 반지름을 정의 (x, y, r), poly는 각 point를 정의 (x1, y1, x2, y2, ..., xn, yn)). 

Background image on a HTML element

  • HTML element에 background image를 넣기 위해서는 style에 다음과 같은 property를 넣어주어야 한다.
<tag style="background-image: url('image url');">

 

  • image가 element 크기보다 작은 경우에는 element 영역을 다 채울 때까지 바둑판식으로 반복된다. 이를 방지하기 위해서는 style의 background-repeat 속성 값을 no-repeat 로 설정해야 한다.
  • 이미지의 가로, 세로 비율을 유지하면서 element를 다 채우기 위해서는 'background-attachment: fixed', 'background-size: cover' 속성을 추가해야 한다.

HTML <picture> Element

  • <picture> tag를 사용하면 화면 크기에 따라 다른 이미지를 보여줄 수 있다.
  • 사용 방법은 아래와 같다.
<picture>
  <source media="(min-width: 100px)" srcset="img1.png">
  <source media="(min-width: 200px)" srcset="img2.jpg">
  ...
  <img src="final_img.png">
</picture>
  • <source> tag를 이용해 이미지를 정의할 수 있다.
  • <source> tag의 media attribute는 이미지를 보여주기 위한 width, height 조건을 정의한다.
  • srcset attribute에는 이미지의 경로를 정의한다.
  • <picture> tag 안에서 마지막에는 <img> tag를 넣어주는 것이 좋다 (picture tag를 지원하지 않는 웹브라우저에 대한 대응을 위해).
  • <picture>를 쓰면 큰 이미지를 load 할 필요가 없어 traffic 관리에 도움이 된다 (웹브라우저가 media 조건에 부합하는 이미지만 가져오기 때문).
  • <picture>를 사용하면 특정 확장자를 지원하지 않는 웹브라우저에 대한 대응도 가능하게 된다 (웹브라우저가 지원하지 않는 확장자는 무시하고, 지원하는 확장자의 이미지만 가져온다).
  • <picture> 안에서 <source>는 첫 번째로 조건에 맞는 것만 인식되는 것에 주의.

HTML Tables

  • <tr>은 table row, <td>는 cell을 정의한다.
  • 두 column 을 합치려면 colspan property에 합칠 column의 수를 넣어주어야 한다.
  • table에 caption을 추가하려면 <caption> tag를 사용하면 된다 (<table> tag 바로 아래에).
  • 특정 table에만 스타일을 적용하고 싶으면 id를 부여한 후 css 코드에서 #id {} 안에 속성을 설정하면 된다.

HTML Lists

  • <ul>은 unordered list, <ol>은 ordered list.
  • <ul>의 marker 모양을 바꾸기 위해서는 style에서 list-style-type 값을 설정해주어야 한다.
  • <ol>의 type 속성 설정을 통해서 item marker를 바꿀 수 있다 (알파벳으로 변경하려면 type="A" or type="a").
  • <ol>의 start 속성을 설정하면 counting 시작 위치를 설정할 수 있다.
  • HTML list는 nest 될 수 있다.
  • list item은 다른 HTML element를 포함할 수 있다.

HTML Block and Inline Elements

  • block-level element는 새로운 line에 full width를 차지하는 element이다 (ex.<div>)
  • Inline element는 새로운 line을 시작하지 않고 필요한 width만 차지한다.
  • Inline element는 block-level element를 포함할 수 없다.

HTML Classes

  • class name은 case sensitive 하다.
  • class를 만들 때에는 . 으로 시작하여 class 이름을 적은 후 {} 안에 속성 값을 명시한다.
  • javascript에서 특정 class에 속한 element를 가져오기 위해서는 document.getElementsByClassName("class name") 을 사용한다.

HTML The id Attribute

  • css에서 id에 style을 적용할 때에는 #id {} 의 안에 property를 정의한다.
  • id에 space는 포함할 수 없다.
  • <a> tag의 href 속성에 #id를 넣어주면 id에 해당하는 element로 이동하는 링크 (bookmark) 를 만들 수 있다.
  • id는 case sensitive 하다.

HTML Iframes

  • <iframe>을 사용할 때에는 title을 넣어주는 것이 좋다 (screen reader를 위해).
  • <iframe>에 name을 지정한 후 <a> tag의 target 속성에 iframe의 name을 넣어주면 <a> link의 페이지를 iframe에 띄울 수 있다.

HTML JavaScript

  • <script>를 지원하지 않는 웹브라우저를 위해서 <noscript> tag를 사용할 수 있다.

HTML File Paths

  • /로 시작하면 root 디렉토리부터 시작, ../ 는 one level up 디렉토리, dirname/a.jpg면 현재 디렉토리에 있는 dirname 내의 a.jpg를 가리킴 (HTML에서의 file path는 linux와 유사).

HTML - The Head Element

  • Search Engine Optimization을 위해 <title>은 꼭 넣어야 한다.
  • <link>, <style> 등도 <head> 안에 넣어야 한다.
  • <meta> tag는 charset, keywords, description, author 등을 명시하는 데에 사용한다. keywords는 search engine에 의해 사용된다.
  • <meta> tag의 http-equiv attribute에 refresh를 설정하고 content attribute에 시간 (초) 을 설정하면 일정 시간마다 refresh를 한다.
  • <meta> tag의 name attribute에 viewport를 설정하면 처음 페이지를 load할 때 화면 크기에 따라 페이지를 어떻게 보여줄지를 정의할 수 있다.
  • <base> tag의 href, target attribute 설정을 통해 페이지의 모든 relative path에 대한 base URL을 지정할 수 있다.
  • target 속성에 default blank를 설정할 때에는 _blank를 입력하면 된다.

HTML Layout Elements and Techniques

  • Semantic element는 사이트 내의 각 요소를 용도에 맞게 정확하게 정의하기 위해 사용하는 tag 같다. HTML5에서 도입된 elements 라고 한다.
  • Semantic element로는 <header>, <nav>, <section>, <article>, <aside>, <footer>, <details>, <summary> 등이 있다.
  • Layout을 만드는 방법은 아래의 4가지가 있다.
    • CSS framework: W3.CSS나 Bootstrap 등.
    • CSS float property: CSS의 float property를 활용하는 방법이다. Floating element는 document flow에 묶여 유연성이 저해된다고 하는데 무슨 의미인지 이해는 못하겠다.
    • CSS flexbox: 여러 screen size와 device에 대응해야 할 때 예측 가능하게 동작한다는 장점이 있으나 explorer 10이 지원하지 않는다.
    • CSS grid: Float, positioning 없이 rows, columns을 나눌 수 있다.

HTML Responsive Web Design

  • Responsive web design은 모든 디바이스를 지원하는 웹페이지를 만들기 위해 element를 숨기거나, resize 하는 등의 디자인 방법을 지칭한다.
  • Responsive website를 만들기 위해 처음 해야할 일은 <meta> tag에 viewport를 설정하는 것이다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • Image에 width 100% property를 설정하면 reponsive image가 된다.
    • max-width property를 100%로 설정하면 image의 원래 size보다는 커지지 않는다.
  • 화면 크기에 따라 다른 이미지를 보여주기 위해서는 <picture> tag를 사용해야 하고, 각 이미지를 보여줄 width는 <source> tag의 media에 설정한다.
  • Responsive text 는 style의 font-size에 vw 단위 크기를 명시하여 만들 수 있다. 1vw는 viewport width의 1%를 의미한다.
  • media query를 사용하면 화면 크기에 따라 적용되는 style을 바꿀 수 있다.
  • W3.CSS framework는 Bootstrap 대신에 사용할만하다고 한다. 다른 js library에 독립적이라고 한다.

HTML Computer Code Elements

  • <code> tag를 이용하여 code block을 만들 수 있다.
  • <kdb> tag를 이용하면 keyboard input을 정의할 수 있다.
  • <samp> tag는 computer program의 output을 정의할 때 사용한다.
  • <var> tag는 수식이나 코드에서의 변수를 표현할 때 사용한다.

HTML Semantic Elements

  • Semantic elements = elements with a meaning
  • <section> tag는 section을 정의할 때 사용한다. Section은 heading을 포함하고 주제에 관한 정보를 포함한다.
  • <section>은 보통 introduction, content, contact information으로 구성된다.
  • <article> tag는 독립적인 컨텐츠를 표현하기 위해 사용한다. 일반적으로는 기사나 포스트를 포함한다.
  • <section> tag와 <article> tag는 서로를 nest 할 수 있다.
  • <header>는 navigational link나 introductory content를 표현하며 주로 heading element 를 포함한다. <header>는 다른 <header>나 <footer>, <address> 등에 포함하지 않는 것이 좋다.
  • <footer>는 주로 authorship, copyright, contact information, sitemap, back to top links, related documents 등의 내용을 포함한다.
  • <nav>에는 major block으로의 link만이 포함되어야 한다. 굵직굵직한 페이지 링크만 넣으라는 뜻 같다.
  • <aside>는 메인 컨텐츠와 연관이 있는 부가정보를 표현할 때 사용한다. 자습서에서 사이드에 있는 용어설명과 비슷한 느낌.
  • <figure>는 그림, 도표 등을 포함하며, <figcaption>은 <figure> tag 내에 포함되어 caption을 표현한다.
  • Semantic tag는 data를 공유하고 재활용하기 위하여 도입되었다고 한다.

HTML Sytle Guide and Coding Conventions

  • document type은 항상 명시하자.
  • element 이름은 소문자로 쓰자.
  • attribute의 value에는 꼭 quote를 사용하도록 하자.
  • 이미지에는 항상 alt, width, height를 명시하자.
  • equal sign 전후에 space를 넣지 말자.
  • indentation 쓸 때에는 2칸 space를 사용하자 (tab 키 사용 금지).
  • SEO와 웹브라우저를 위해 lang attribute를 html에 명시하자 (meta data도).
  • CSS 에서 속성을 정의할 때 quote는 space가 있는 value에만 사용하자.
  • 파일 이름은 소문자로만 사용하자.

HTML Entities & Emojis & Encoding

  • Reserved character는 character entity로 표현해야 한다.
    • &entity_name
    • &#entity_number
  • < 같은 경우에는 &lt나 &#60으로 써야 한다.
  • entity_name을 인식하지 못하는 웹브라우저도 있으므로 문자가 의도치 않게 보일 경우 entity_number로 바꿔보자.
  • non-breaking spacesms &nbsp. 더 여러가지 html entity 가 있으니 필요할 때 찾아서 사용하도록 하자.
  • 알파벳에 superscript가 붙은 것을 diacritical mark라 한다. a&#768은 à 로 보인다. 이 역시 필요할 때 찾아서 사용하도록 하자.
  • 그리스어나 수학 기호도 entity를 이용하여 표현할 수 있다.
  • entity name은 case sensitive.
  • Emojis는 utf-8에 정의되어 있는 character다.
  • utf-8 문자 표현 형식은 &#<number>; 를 따른다.

HTML Uniform Resource Locators

  • URL은 웹 상의 파일을 가리키며, URI의 special case이다.
  • URI는 인터넷 상의 자원을 가리키는 유일한 주소.
    • URL 뒤에 argument가 있는 경우도 URI라 할 수 있다.
    • Argument 전까지만 URL이라 부를 수 있다.
  • scheme://prefix/domain:port/path/filename
  • URL은 ascii character-set으로만 구성되어야 한다.
  • non-ascii character가 URL에 포함될 경우 "%"가 붙은 16진수로 변환하여 전송한다.
  • URL은 띄어쓰기를 포함할 수 없다. 띄어쓰기를 포함하고 싶다면 + 나 %20 을 사용하도록 하자.

HTML vs. XHTML

  • XHTML은 더 strict한 HTML이다.
  • XML은 문서를 잘 형식화 하기 위한 markup language이다. XHTML은 HTML보다 XML과 더 닮아있다.
  • HTML과 달리 에러를 무시하지 않는다.
  • 그러므로 <!DOCTYPE>, <html>, <head>, <title>, <body> tag를 꼭 명시해야 하며, <html> tag의 attribute로 xmlns를 꼭 써주어야 한다. 이외에도 element와 attribute는 모두 소문자여야 한다. Attribute의 경우에는 꼭 quote로 감싸주어야 에러로 취급되지 않는다.
  • Empty element는 꼭 닫아주어야 한다 (<br/> 과 같이).
  • XHTML에서는 Attribute minimization도 금지된다.
    • Attribute minimization의 예는 다음과 같다. <input ... checked>
    • XHTML에서는 다음과 같이 사용해야 한다. <input ... checked="checked">

'개발' 카테고리의 다른 글

CSS Cheat Sheet  (0) 2021.08.10
본 블로그는 쿠팡 파트너스 활동을 포함하고 있으며, 이에 따른 일정액의 수수료를 제공받습니다.

티스토리툴바