HTML_Cheat sheet

소고기는레어·2021년 9월 9일
0

Front-end 🖥

목록 보기
1/19
post-thumbnail

HTML

Hyper Text Markup Language

HTML은 웹 개발에서 웹의 구조와 정보를 담는데 중점을 두고있다.

이전의 HTML은 웹을 꾸며줄 다양한 문법을 지원했으나, 정보를 담는다는 그 역할에 집중할 수 있도록 이러한 문법을 전부 퇴출시키고 그 역할을 다른 언어들에게 넘겨주었다.


Tag

태그의 역할

HTML은 웹의 구조를 담당하는만큼 그 구조를 명확하고 직관적으로 구분할 필요가 있다.

Tag(이하 태그)는 HTML 문서에서 각 영역을 구분하는데 사용한다.

태그 자체에 특별한 기능이 있는 경우도 있지만,
그 외에는 별다른 기능 없이 각 영역의 구분만을 위해 존재한다.


일반 태그

시작태그 : <태그명>

종료태그 : </태그명>

일반적인 태그는 <시작태그> 와 </종료태그> 로 이루어져 있다.

<>로 태그의 이름을 감싸는 형태로 작성한다.


빈 태그

빈태그 : <태그명 />

종료태그가 없는 경우도 있는데, 이러한 태그를 빈 태그 라고 부른다.

빈 태그의 작성 시, 태그가 종료되었음을 명시하기 위해 태그를 닫기 전에 / 를 넣기도 한다.


태그 중첩

<부모 태그>
  <자식 태그>
  </자식 태그>
</부모 태그>

특정 태그의 시작태그와 종료태그 사이에 다른 태그를 넣는 방법으로 중첩시킬 수 있다.

이 때 상위에 있는 태그를 부모 요소,
하위에 있는 태그를 자식 요소라고 부른다.

이 부모 자식 관계는 바로 인접해있는 요소에 한하여 표현하는데,
그 부모 요소보다 한 단계 이상 위에 있는 요소는 상위 요소,
자식 요소보다 한 단계 이상 아래 있는 요소는 하위 요소 라고 부른다.


속성

<태그명 속성="값"> </태그명>

<빈태그명 속성="값" />

속성은 시작태그 혹은 빈 태그에 포함하여 작성하며, 태그의 확장 기능과 같은 역할을 한다.

각 태그들마다 적용할 수 있는 속성은 구분되어 있다. 하지만 모든 태그들에 대해 적용이 가능한 속성들 또한 존재하는데, 이를 전역속성이라 부른다.


Inline & Block

요소(태그)가 화면에 출력되는 특성을 말한다.


Inline Element

Inline Element(이하 인라인 요소)는 문자의 출력을 위한 요소이며, 요소가 브라우저에 출력될 때 수평으로 쌓이는 특징을 갖고 있다.

인라인 요소는 포함하고 있는 콘텐츠(내용) 크기에 맞게 최대한 줄어드는 특징이 있다.

또한 하나의 글자 취급을 받기 때문에 나중에 나올 width와 height 등의 크기를 지정할 수 없다.

마찬가지로 margin과 padding 등 여백을 지정할 때 좌우를 제외한 상하 여백은 적용되지 않는다.

자식 요소로 Block Element를 사용할 수 없다.

대표적으로 <span> </span> 태그가 있다.


Block Element

Block Element(이하 블록 요소)는 레이아웃을 만들기 위한 요소이며, 요소가 브라우저에 출력될 때 수직으로 쌓이는 특징을 갖고 있다.

블록 요소는 부모 요소의 크기에 맞게 최대한 늘어나는 특징이 있다.

세로 높이는 인라인 요소와 마찬가지로 최대한 줄어든다.

인라인 요소와는 반대로 크기와 여백을 자유롭게 조절할 수 있으며,

자식으로 블록 요소와 인라인 요소 모두 사용 가능하다.

여러모로 인라인 요소보다 제약이 적은 것이 특징이다.

대표적으로 <div> </div> 태그가 있다.



태그와 속성의 종류

사용 가능한 대표적인 전역속성

  • title="" : 요소의 정보나 설명을 지정하며 마우스 오버 시 출력된다.

  • style="" : 요소에 적용할 스타일(CSS)을 지정하며 우선순위가 높다.

  • class="" : 요소를 지칭하는 중복 가능한 이름이다.

  • id="" : 요소를 지칭하는 고유한 이름이다.

이 외 태그별 필수 속성은 태그와 함께 표기하고, 선택 속성은 별도로 표기.



기본 뼈대 태그


<!DOCTYPE html>

DTD, Document Type Definition

문서의 HTML 버전을 지정한다.

웹 브라우저가 페이지를 해석할 때 사용할 HTML 버전을 명시한다.


<html> </html>

HTML 문서 구조의 최상위이다.

문서가 어디서 시작하고 어디서 끝나는지 브라우저에 알려주는 역할을 한다.

  • lang=""
    HTML이 동작하는 환경의 언어를 지정한다.

<head> </head>

문서와 문서에 필요한 눈에 보이지 않는 정보를 작성하는 범위이다.

하위 요소로 페이지 제목, 페이지 설명, 스타일, 불러올 파일 등의 정보를 작성한다.


<body> </body>

문서의 눈에 보이는 구조를 나타내는 범위이다.

로고, 헤더, 푸터, 카테고리, 버튼, 이미지 등 브라우저를 통해 출력되는 모든 요소는 이 태그의 하위에 작성된다.



<head> 하위 태그


<title> </title>

HTML 문서의 제목을 정의한다.

브라우저의 탭 부분에 표시된다.


CSS 파일, 아이콘 등을 불러와서 적용한다.

  • rel=""
    불러올 파일의 역할을 지정한다.

    • "stylesheet"
      CSS 문서

    • "icon"
      탭에 표시될 로고이다.
      이 로고 이미지는 다른 아이콘과 구분해서 favicon.ico로 프로젝트 최상위 루트에 저장하는 것을 권장한다.
      브라우저가 자동으로 탐색하여 연결하기 때문이다.

  • href=""
    불러올 파일의 디렉토리.


<style> </style>

CSS 코드의 작성 범위이다.


<script> </script>

JavaScript 코드의 작성 범위이다.

  • src=""
    외부의 JS 파일을 불러온다.
    불러올 JS 파일의 디렉토리를 입력한다.

  • defer
    HTML 문서의 해석이 끝난 뒤에 이 스크립트를 해석하도록 명령한다.
    값이 없는 단일 속성이다.


<meta />

HTML 문서의 제작자, 문서 내용, 검색 키워드 등의 정보를 검색엔진과 브라우저에 알린다.

  • name=""
    정보의 종류를 의미한다.

    • "author"
      페이지의 제작자

    • "description"
      페이지 설명

    • "keyword"
      검색 키워드

  • content=""
    정보의 내용을 의미한다.
    name에 대한 값이다.

  • charset=""
    인코딩 방식

  • 모바일 환경 대응

    <meta name=“viewport” content=“width=device-width, initial-scale=1.0” />

og

오픈 그래프에 사용하는 메타 태그의 속성이다.

작성 예시

<meta property="og:type" content="website" />
  • og:type
    페이지의 유형(website, video.movie 등)

  • og:site_name
    페이지가 속한 사이트의 이름

  • og:title
    페이지의 이름(제목)

  • og:description
    페이지의 간단한 설명

  • og:image
    페이지의 대표 이미지 주소(url)

  • og:url
    페이지 주소(url)


Twitter cards

트위터 전용 오픈 그래프이다.

작성 예시

<meta property="twitter:card" content="summary" />
  • og:type
    페이지의 유형(website, video.movie 등)

  • og:site_name
    페이지가 속한 사이트의 이름

  • og:title
    페이지의 이름(제목)

  • og:description
    페이지의 간단한 설명

  • og:image
    페이지의 대표 이미지 주소(url)

  • og:url
    페이지 주소(url)



<body> 하위 태그


<img src="" alt="" />

이미지를 삽입한다.

  • src=""
    이미지 파일의 경로를 입력한다.

  • alt=""
    대체 텍스트.


<a href=""> </a>

하이퍼 텍스트.
태그 내 요소를 클릭 시 지정한 주소, html 문서로 이동한다.

프로젝트 내 폴더 단위 까지만 주소를 명시할 경우 자동으로 해당 폴더 내 index.html 파일을 찾아서 불러온다.

같은 페이지 내의 다른 요소를 선택자를 통해 지정할 수도 있다. 스크롤이 해당 요소 위치로 이동한다.

  • href=""
    이동할 주소를 입력한다.

  • target=""
    링크의 오픈 방식.
    기본값은 "_self" 로, 현재 탭에서 링크를 오픈한다.

    • "_blank"
      새 탭에서 링크를 오픈한다.

<form action=""> </form>

사용자 입력 내용을 전송할 서버 경로를 지정한다.
아래 나올 <input /> 태그의 상위 요소로 쓰인다.

  • action=""
    입력 내용을 전송할 서버 경로를 작성한다.

  • method=""
    전송 방법을 지정한다.

    • "get"
      입력 내용을 url 자체에 포함하여 서버로 전송한다.
      눈에 그대로 보여지기 때문에 보안에 취약하다.

    • "post"
      입력 내용을 숨겨서 별도로 전송한다.


<input type="" />

사용자로부터 데이터를 입력 받는다.
앞서 나온 <form> 태그의 하위 요소로 쓰인다.

  • type=""
    입력 받을 데이터의 타입, 또는 입력창의 종류를 지정한다.

    • "text"
      일반적인 텍스트.

    • "password"
      패스워드, 입력 내용이 가려진다.

    • "checkbox"
      체크박스, 다중 선택이 가능하다.

    • "radio"
      체크박스,
      같은 name="" 값을 갖는 체크 박스들 안에서 다중 선택이 불가능하다.

    • "submit"
      전송 버튼.

  • value=""
    사용자가 입력하기 전에 미리 입력되어 있을 값을 지정한다. type="submit" 에 사용 시 버튼에 표시될 내용을 지정한다.

  • placeholder=""
    value="" 와 비슷하지만 focus 시 사라진다.

  • name=""
    입력 받은 내용을 담을 변수명을 지정한다.

  • disable
    비활성화.

  • checked
    체크박스 속성으로, 체그된 상태로 출력된다.


<label> </label>

<input /> 요소에 이름표를 붙인다.

이름표 부분을 클릭 시 자동으로 연결된 <input /> 요소가 focus 된다.

체크박스의 내용을 표시할 때도 사용이 가능하며, 이 경우 마찬가지로 해당 내용을 클릭 시 체크박스가 체크된다.

사용 방법으로는 <input/> 의 상위 요소로 감싸는 방법과 for="", id="" 속성을 사용하는 방법이 있다.

  • 상위 요소로 사용
  <label> ID :
    <input type="text" name="id">
  </label>
  • for, id 사용(같은 값을 부여한다.)
    <label for="input__id"> ID : </label>
    <input type="text" name="id" id="input__id">

<div> </div>

대표적인 블록 요소로,
아무 기능과 나타내는 바가 없는 단순히 콘텐츠의 영역을 구분하는 용도이다.

보통 class="" 속성과 함께 사용하여 그 역할을 명시한다.


<span> </span>

대표적인 인라인 요소로,
아무 기능과 나타내는 바가 없는 단순히 콘텐츠의 영역을 구분하는 용도이다.

보통 class="" 속성과 함께 사용하여 그 역할을 명시한다.


<h1> </h1>

제목을 나타낸다.
1~6 까지 존재하며, 숫자가 커질수록 중요도가 낮다는 것을 의미한다.


<p> </p>

문장을 나타낸다.
단락을 구분할 때 사용한다.


<ul> </ul>

순서가 구분되지 않는 목록의 범위를 의미하며,
아래 나올 <li> </li> 태그의 상위 요소로 필수적이다.


<ol> </ol>

순서가 구분되는 목록의 범위를 의미하며,
아래 나올 <li> </li> 태그의 상위 요소로 필수적이다.


<li> </li>

목록 내의 각 항목을 의미한다.


<table> </table>

표의 범위를 나타낸다.
아래 나올 <tr>, <td> 가 하위 요소로 들어간다.

<tr> </tr>

표에서 열을 지정하는 요소.(가로 줄)
하위 요소로 <td> 가 들어간다.

  • rowspan=""
    현재 열부터 입력한 숫자만큼 세로로 병합한다.

<td> </td>

표에서 행을 지정하는 요소로, <tr>의 하위 요소이다.
<tr> </tr> 로 이루어진 가로 한 줄을 쪼개서 나눠 갖는다.

  • colspan=""
    현재 행부터 입력한 숫자만큼 가로로 병합한다.

<header> <header>

헤더의 범위를 나타낸다.
별다른 기능은 존재하지 않는다.


<section> </section>

각 구역을 구분한다.
별다른 기능은 존재하지 않는다.

profile
https://www.rarebeef.co.kr/

0개의 댓글