HTML 기초

Jason K·2022년 4월 6일
html

HTML

목록 보기
1/1

텍스트 요소

- 제목 - h1 ~ h6

  • 제목 단계를 뛰어넘으면 중간에 빠진 제목이 어디 있는 건지 모르므로 사용자의 혼란을 야기할 수 있습니다.
  • 제목 단계를 뛰어넘으면 중간에 빠진 제목이 어디 있는 건지 모르므로 사용자의 혼란을 야기할 수 있습니다. 순서대로 사용 할 것

- 본문 - p

  • <p> 요소는 하나의 문단을 나타냅니다.(paragraph)
  • HTML에서 문단은 이미지나 입력 폼 등 서로 관련있는 콘텐츠 무엇이나 될 수 있습니다.
  • 문단은 블록 레벨 요소
  • 자신의 닫는 태그 </p> 이전에 다른 블록 레벨 태그가 분석되면 자동으로 닫힙니다.
    * 컨텐츠 형태를 보고싶을 떄 lorem 입력

- 본문 - br

  • <br> : 줄바꿈 요소
  • 빈요소
  • 문단과 문단 사이 벌리기 위해서 br태그를 여러개 사용X -> CSS사용
  • 이야기가 나누어지면 br태그가 아닌 p태그를 사용해야

- 본문 - blockquote, q

  • blockquote와 q 태그는 인용 요소
  • blockquote는 긴 것
  • q는 인라인 인용문 요소
  • blockquote 안에 p태그 사용 가능
  • q태그는 자동으로 ""들어감
    * 주의사항: p태그 안에 blockquote 사용X
    • p태그는 안에 블록 요소 사용시 자동으로 닫힘
  • cite : 인용문 출처 문서나 URL.

- 본문 - pre

  • pre 요소는 미리 서식을 지정한 특스트를 나타냄 (preformatted)
  • 텍스트는 보통 고정폭 글꼴을 사용

- 본문 - figure, figcaption

  • <figure> 요소는 독립적인 콘텐츠를 표현합니다. <figcaption> 요소를 사용해 설명을 붙일 수 있습니다. 피규어, 설명, 콘텐츠는 하나의 단위로 참조됩니다.

- 본문 - hr

  • 수평선
  • 빈요소

- 본문 - abbr, address, cite, bdo

  • <abbr>: 약어
<abbr title="HyperText Markup Language">HTML</abbr>.

        Output: HTML.

  • <address>: 주소, email
<p>Contact the author of this page:</p>

<address>
  <a href="mailto:jim@rock.com">jim@rock.com</a><br>
  <a href="tel:+13115552368">(311) 555-2368</a>
</address>
  • <cite>: 인용 출처
<figcaption>First sentence in <cite><a href="http://www.george-orwell.org/1984/0.html">Nineteen Eighty-Four</a></cite> by George Orwell (Part 1, Chapter 1).</figcaption>

        Output: First sentence in Nineteen Eighty-Four by George Orwell (Part 1, Chapter 1).

- 포매팅 - b, strong

  • 굴게 표시하는 것은 같음
  • <b>: 요약 키워드, 리뷰의 제품명 등, 특별히 중요한 것은 아니지만 굴게 표시할 때 사용
  • <strong>: 높은 중요도
  • 문단 전체를 감싸는 것은 X => 그런 경우 CSS 사용

- 포매팅 - i, em

  • 두가지 모두 italic체
  • 보여지는 것은 같지만 완전히 다름
  • <i>: 구분해야하는 부분을 나타냄. 기숭용어, 외국어 구절, 등장인물의 생각 등
  • <em>: emphasize의 약어. 강조 강세 요소

- 포매팅 - mark, small, sub, sup

  • <mark> : 하이라이트 - 마음에 드는 구절 또는 검색 결과 등
  • <small>: 덧붙이는 글이나 저작권 법 표기 등 작은 글씨 사용
  • <sub>: 아래첨자
  • <sup>: 위첨자

- 포매팅 - del, ins, code, kbd

  • <del>: 삭제된 텍스트를 나타낼 때 사용
  • <ins>: 추가된 텍스트를 나타낼 때 사용
  • <code>: 인라인 코드 요소 - 여러 줄을 사용할 떄는 <pre>를 사용
  • <kbd>: 키보드 키를 나타낼 떄 사용

- a 태그와 하이퍼링크 - href

  • anchor(닻)의 약자
  • href 특성을 통해 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일주소와 그 외 다른 URL로 연결 할 수 있는 하이퍼링크를 만듬
<a href="https://example.com">Website</a>
<a href="mailto:example@emil.com">Send email</a>
<a href="tel:010-123-2345">Phone</a>
href
하이퍼링크가 가리키는 URL. 
링크는 HTTP 기반 URL일 필요는 없고, 브라우저가 지원하는 모든 URL 스킴을 사용할 수 있음

- a 태그와 하이퍼링크 - target

  • 링크한 URL을 표시할 위치. 가능한 값은 브라우징 맥락으로, 즉 탭, 창, <iframe>의 이름이나 특정 키워드입니다.
  • 다음 키워드는 특별한 뜻을 가지고 있습니다.
    - _self: URL을 현재 브라우징 맥락에 표시합니다. 기본값.
    - _blank: URL을 새로운 브라우징 맥락에 표시합니다. 보통 새 탭이지만, 사용자가 브라우저 설정을 통해 새 창으로 바꿀 수 있습니다.

- 엔티티(Entity)

& = &amp;
< = &lt;
> = &gt;
" = &quot;
space = &nbsp;

구조를 나타내는 요소

- 컨테이너 (div, span)

  • <div> 요소는 플로우 콘텐츠를 위한 통용 컨테이너입니다. CSS로 꾸미기 전에는 콘텐츠나 레이아웃에 어떤 영향도 주지 않습니다.
    - <div> 요소는 의미를 가진 다른 요소(<article>, <nav> 등)가 적절하지 않을 때만 사용해야 합니다.
  • <span> 요소는 구문 콘텐츠를 위한 통용 인라인 컨테이너로, 본질적으로는 아무것도 나타내지 않습니다.
    - 스타일을 적용하기 위해서, 또는 lang 등 어떤 특성의 값을 서로 공유하는 요소를 묶을 때 사용할 수 있습니다.
    - 적절한 의미를 가진 다른 요소가 없을 때에만 사용해야 합니다. 
<div> example
// 블록레벨 최대 길이는 부모의 최대 길이

<span> example => span tag는 인라인

- 시멘틱 웹이란?

  • semantic: 의미의, 의미론적인
  • 요소의 의미를 고려하여, 구조를 설계하고 코드를 작성한다.
  • <div>, <span>같은 의미가 없는 순수 컨테이너: non-semantic 
// div로도 작성 가능하지만 의미론적인 마크업을 사용하는 것
<body>
    <header> <!--header--> </header>

    <nav> <!-- nav --> </nav>
    
    <main>
        <article>  <!-- 본문 --> </article>
        <aside>  <!-- 사이드바 --> </aside>
    </main>
    <footer>  <!-- Footer --> </footer>
</body>
  • 사용하는 이유
    - 검색엔진은 의미론적 마크업을 분석 - 검색 랭킹에 영향을 줄 수 있음
    - 스크린 리더로 페이지를 탐색할 때의미론적 마크업을 푯말로 사용할 수 있음

- header, footer

  • <header> 요소는 소개 및 탐색에 도움을 주는 콘텐츠를 나타냅니다.
    - 제목, 로고, 검색 폼, 작성자 이름 등의 요소도 포함할 수 있습니다.
    • 웹페이지의 소개를 위한 header는 하나만 사용
    • 페이지 제목, 글 제목을 적을때 사용하기도 함
  • <footer> 요소는 가장 가까운 구획 콘텐츠나 구획 루트의 푸터를 나타냅니다. 푸터는 일반적으로 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 담습니다.

- nav

  • <nav> 요소는 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획을 나타냅니다. 자주 쓰이는 예제는 메뉴, 목차, 색인입니다.
//	예제 코드
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

- aside

  • <aside> 요소는 문서의 주요 내용과 간접적으로만 연관된 부분을 나타냅니다. 주로 사이드바 혹은 콜아웃 박스로 표현합니다.
<article>
  <p>
    디즈니 만화영화 <em>인어 공주</em>는
    1989년 처음 개봉했습니다.
  </p>
  <aside>
    인어 공주는 첫 개봉 당시 8700만불의 흥행을 기록했습니다.  // 중요하지 않은 내용 
  </aside>
  <p>
    영화에 대한 정보...
  </p>
</article>

- main

  • body태그 안에 유일하게 하나만 사용 가능
  • 주요 콘텐츠

- article

  • <article> 요소는 문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타냄
  • 사용 예제로 게시판과 블로그 글, 매거진이나 뉴스 기사 등

- section

  • <article>요소와 비슷함
  • 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용.
  • 보통 <section>은 제목을 포함하지만, 항상 그런 것은 아닙
  • 요소의 콘텐츠를 외부와 구분하여 단독으로 묶는 것이 나아보인다면 <article> 요소가 더 좋은 선택일 수 있음.

목록과 표

- 목록 - ul, ol, li

  • 순서가 있는 목록: Ordered List = ol
  • 순서가 없는 목록: Unordered List = ol
  • ol태그와 ul태그의 단일 아이템: li (List Item)

<ol>

type

  • 항목을 셀 때 사용할 카운터 유형.
    - 'a'는 소문자 알파벳,
    - 'A'는 대문자 알파벳,
    - 'i'는 소문자 로마 숫자,
    - 'I'는 대문자 로마 숫자,
    - '1' 는 숫자(기본값)을 나타냅니다.
<ol type="i">
  <li>로마숫자 i</li>
  <li>로마숫자 ii</li>
  <li>로마숫자 iii</li>
</ol>

start

  • 식작 숫자 변경
<ol start="4">
  <li>4번부터 시작</li>
  <li>5번</li>
  <li>6번</li>
</ol>

reversed

  • 숫자를 거꾸로 할 때 사용

<ul>

  • 중첩 사용 가능

- 정의 목록 - dl, dt, dd

<dl>

  • <dl> 요소는 설명 목록을 나타냅니다.
  • <dl>은 <dt>로 표기한 용어와 <dd> 요소로 표기한 설명 그룹의 목록을 감싸서 설명 목록을 생성합니다.
  • 주로 용어사전 구현이나 메타데이터(키-값 쌍 목록)를 표시할 때 사용합니다.
  • <dt>와 <dd>를 1:1 매칭으로 사용시 <dd>가 <dt>를 설명
  • <dt> 여러개 와 <dd> 여러 매칭시: 여러개의 이름이 하나의 의미일 때
  • <dt> 하나 와 <dd>가 여러개 : 하나의 용어가 여러 의미를 가지고 있을 떄
  • <dt>와 <dd>의 형제로 <div> 사용 금지

- 표 - table, tr, th, td

  • tr = table row: 하나의 행 묶음
  • th = table head: 행이나 열을 대표하는 요소
    - th가 가질 수 있는 속성: scope
    ex) <th scope="col">나라이름</th>
    => col : column을 대표
    ex) <th scope="row">한국</th>
    => row : row를 대표
  • td = table data
    - td가 가질 수 있는 속성: colspan
    ex) <td colspan="2">합계</td>
    => 두칸을 합칠 때 사용

- 표 - thead, tbody, tfoot

  • thead: table head
    - thead 사용시 형제 태그로 tr 금지, tbody또는 tfoot을 형제로 사용해야함
  • tbody: table body
  • tfoot: table footer
  • 구획을 나눠서 샤용시 CSS 사용시 용이함

- 표 - caption

  • <caption> 요소는 표의 설명 또는 제목을 나타냅니다
  • table의 첫번째 요소로 사용되어야 함
  • <caption> 요소를 가진 <table> 요소가 만약 <figure> 요소의 유일한 자식인 경우, <figcaption>을 대신 사용하세요.

임베디드 요소

img

  • 빈요소
  • src, alt, width, height 
<img class="picture" 
     src="/주소source/이미지.jpg" 
     alt="이미지설명"
     title="이미지제목"
     width="200"
     height="100"
     />

웹에서 사용하는 이미지 유형

반응형 이미지 - srcset

  • viewport(화면 크기)별로 반응형 이미지

반응형 이미지 - sizes

  • srcset는 다른 사진을 보여주는 것이지만 sizes는 조건에 따라 다른 파일을 보여주거나 지정된 사이즈로 보여줌

video

audio

canvas, iframe

폼 관련 요소

form - action, method 속성

  • get과 post 차이

label과 input

  • label
  • get을 통해 받는 값 name
  • 자식 요소로도 사용시 for와 id값 불필요

fieldset

  • <fieldset> 요소는 웹 양식의 여러 컨트롤과 <label>을 묶을 때 사용합니다
  • <legend>는 <fieldset>의 자식으로만 사용
<form>
  <fieldset>
    <legend>Choose your favorite monster</legend>

    <input type="radio" id="kraken" name="monster">
    <label for="kraken">Kraken</label><br/>

    <input type="radio" id="sasquatch" name="monster">
    <label for="sasquatch">Sasquatch</label><br/>

    <input type="radio" id="mothman" name="monster">
    <label for="mothman">Mothman</label>
  </fieldset>
</form>

input - type 속성

text

<input type="text" name="text" minlength="5" maxlength="8">
  • text output:

password

<input type="password" name="pwd">
// get method 사용시 마스킹을 하여도 전송시 주소창에 보임
// post 사용할 것
// minlength maxlength 사용 가능
  • pasword output:

email

<input type="email" name="email">
  • Email output:

tel

<input type="tel" name="tel">
// 모바일에서 접속시 숫자패드 다이얼 뜸
// 문자 입력은 가능
  • Tel output:

number

<input type="number" name="number">
// 숫자만 입력 가능
  • number output:

range

<input type="range" name="range">
// 0~100까지 조절 가능
  • range output:

date / month / week / time

<input type="date" name="date"> // 년 월 일 선택
<input type="month" name="month"> // 년 월 선택
<input type="week" name="week"> // 주차 선택
  • date output:
    month output:
    week output:
    time output:

submit button reset

<input type="submit" value="기본 값 '제출' 버튼">
<input type="button" value="빈 버튼"> // 눌러도 보내지 않음, javascript를 통해 작업 필요
<input type="submit" value="기본 값 '제출' 버튼">
<input type="reset"> // 입력 값 초기화 버튼
  • text:

checkbox

<label>CheckBox:
	<input type="checkbox" name="check1">
  	<input type="checkbox" name="check2" checked> // checked 사용시 체크값으로 시작
</label>
  • CheckBox:

radio

<label>RADIO:
	<input type="radio" name="radio" value="r1"> // value 값이 없으면 어떤 값을 제출했는지 알 수 없음
  	<input type="radio" name="radio" value="r2"> // checkbox와 다르게 하나만 선택 가능(name이 같을 떄)
</label>
  • RADIO:

input - placeholder

<label>ID: <input type="text" name="id" placeholder="아이디를 입력하세요"></label>
  • ID:

input - autocoplete

<label>text: <input type="text" name="text" autocomplete="on"></label>
  • text:

input - required

<label>text: <input type="text" name="text" required></label> // 반드시 입력해야 제출 가능
  • text:
profile
Jason K

0개의 댓글