HTML

최상민·2023년 8월 9일
0

천재IT

목록 보기
7/10

HTML5

원칙

웹표준

  • 크로스브라우징: 하나의 문서를 여러 브라우저가 열어봄
  • 크로스 미디어: 하나의 문서를 다양한 기기에서 열어봄
  • 문법, 호환성, 접근성(장애인 또는 고령자 등 약자 접근 가능)을 고려해야 한다.

EMMET

  • EMMET 자동 개행 C:\Users\db400tea\AppData\Roaming\Code\User\settings.json 여기서 이렇게 바꾸면 자동 개행된다.
    "emmet.syntaxProfiles": {
        
        "html": {
            "inline_break": 1
		    }
    }

  • 는 부모자식으로 요소를 만듦. 부모 태그 안에 자식 태그를 넣어줌.

  • +는 형제로 요소를 만듦
  • {내용}은 해당 태그의 오픈, 클로즈 태그 사이에 내용을 넣어줌

  • 는 아이디 속성을 달아

  • .는 클래스 속성을 달아줌
  • (괄호)는 >와 +을 혼합하여 사용할 때 하나의 단위로 묶어줌.
<!-- h1{내용}+h2{내용} -->
<h1>내용</h1>
<h2>내용</h2>

<!-- div>header -->
<div>
    <header></header>
</div>

<!-- div.container#div1 -->
<div class="container" id="div1"></div>

<!-- (header>nav)+div -->
<header>
    <nav></nav>
</header>
<div></div>

기본 tamplete 태그

  • VS Code에서는 아래와 같은 형식을 html5의 기본 폼으로 제공한다.
  • <태그>는 보통 </태그>와 같이 닫힘 태그와 같이 쓴다. 하지만 몇몇 태그(meta, link 등)의 경우에는 단일하게 쓰인다.
    • 통상적으로 태그라 부르지만, 정식 명칭은 (돔) 엘레멘트(요소)이다.
    • 태그 칠 때 같이 나오는 속성은 필수 속성이다.
  • html 주석은 이다.
<!-- 주석 -->
<!DOCTYPE html>
<!--document 타입 선언으로 브라우저에게 HTML 의 버전 및 웹브라우저 내용을 잘 출력할 수 있도록 도와주는 역할 -->
<html lang="en">
<!-- html의 언어코드. 한국의 언어코드는 ko 또는 ko_kr -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
		<!-- title: 문서에 대한 제목 -->
</head>
<body>
</body>
</html>
  • 문서가 열리기 전에 로드되는 부분으로, 창에 표시되지는 않지만, 문서에 사용되는 여러 자원(아이콘, css 등) 및 설정을 포함한다.
  • meta, title, style 태그는 head 태그 안에서만 쓰인다.
    • script 태그만이 head와 body 모두에서 쓰일 수 있다.

meta

  • meta: 문서 정보를 나타냄. meta는 데이터의 데이터라는 의미.
  • charset(character set) : 글자 세팅을 의미함. 문서와 문서 사이의 코드 형식. 문자 형식
    euc-kr은 한글, 영어. utf-8은 다국어 지원. 둘 다 유니코드지만 범주성이 다름.
    - 메모장의 기본 규격은 ansi로 미국 표준 규격이라 나중에 한국어 안 맞을 수 있음
  • viewport: 모바일 모드, 반응형(device-width)으로 할 건지 등등의 보기 설정. 기본 배율을 1.0으로 설정(1로 하면 못 인식하는 경우 있어서 float로)
    • device-width(반응형): 내용물의 폭을 기기의 폭에 맞춤

body

  • 문서가 로딩되면서 실행되는 부분으로 실질적으로 사용자가 보는 화면에 표시되는 내용.

기본 태그

headings와 p 태그를 혼용해서 사용 불가능하다. 즉, h 안에 p를, p 안에 h를, h 안에 h를, p 안에 p를 쓸 수 없다.

headings

  • h1~h6까지 있으며 h1이 가장 크고, h6이 가장 작다.

    • h1은 관례적으로 문서 전체의 제목이다.

    • h2는 관례적으로 화면 하나의 제목이다.

      <h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>
<h4>제목4</h4>
<h5>제목5</h5>
<h6>제목6</h6>

Untitled

paragraph and inlines

  • p 태그: 문단 하나의 내용이 들어간다.
  • br: break line, 개행 태그. html은 소스 코드에서 줄바꿈을 하더라도 반영되지 않는다.
  • strong: 굵은 글씨
  • em: 이탤릭체, 기울임 글씨
  • ins: 밑줄
  • hr: 가로선
  • pre 태그: Preformatted text로 미리 설정된 형식을 따르며, html 코드에 적힌 내용을 그대로 반영한다. 즉, 두 개 이상의 공백이나 줄 바꿈 또한 반영된다.
<p>문단내용<br>
    <strong>우리나라</strong>&nbsp;&nbsp;&nbsp;&nbsp;

<!-- 줄바꿈해도 반영 X -->

    <span class="red_text">대한</span>민국
    <ins>아름다운</ins><em>우리</em>강산
</p>
<hr>

Untitled

html entities 🔗

  • 몇몇 문자는 html의 키워드로 쓰이므로 특수한 방식으로 입력해야 한다. 이를 entities라고 한다.
  • 대표적으로 공백의 경우 스페이스로 입력한 공백은 둘 이상 표시되지 않는다.
실제 문자entity namenumber code
(공백, non-breaking space)  
<<<
>>>
&&&
“""
‘''

Semantic HTML tags 🔗

  • 시멘틱: 구역을 나타내는 여러 태그들. div, header, nav, article, section, figure, address, footer 등이 있다.
  • div: 가장 큰 단위의 구역을 나타냄. 가장 많이 사용함.

목록 요소

  • 순서형 목록: 숫자(또는 한자 등) 순으로 목록을 만든다. ul 안에, li 태그들로 목록 안의 내용을 넣는다.
  • 비순서형 목록: ●과 같이 기호로 시작하는 목록을 만든다. ol 안에, li 태그들로 목록 안의 내용을 넣는다.
  • 나열형(그룹형) 목록: 여러 분류가 있는 목록을 만든다. 각 그룹별로 dl 태그 안에 dt(제목)과 dd(목록 내용)들을 넣는다.
<h2>순서형 목록</h2>
    <ol>
        <li><a href="">목록1</a></li>
        <li><a href="">목록2</a></li>
    </ol>
    
    <hr>

    <h2>비순서형 목록</h2>
    <ul>
        <li><a href="">목록1</a></li>
        <li><a href="">목록2</a></li>
    </ul>

    <hr>

    <h2>나열형 목록</h2>
    <dl>
        <dt>열거제목</dt>
        <dd>열거1</dd>
        <dd>열거2</dd>
    </dl>

Untitled

하이퍼링크 태그

  • a 태그를 통해서 다른 위치로 이동할 수 있다.
  • target 속성: _blank|_self|_parent|_top|프레임 값을 부여할 수 있다. 주로 _blank를 사용해 새 창이나 새 탭에서 연다.
  • href 속성: 이동할 위치를 명시한다.
    • “./location”: 디렉토리의 특정 파일로 이동할 수 있다.
    • “#id”: 같은 문서 내에 해당 아이디를 가진 태그로 이동할 수 있다.
    • “website”: 특정 외부 웹 사이트로 이동할 수 있다.
    • mailto: 메일을 보내는 프로토콜(실제로는 SMTP 이용)
    • tel: 전화번호 입력하면 전화기 모드에서 그 번호로 전화 걸 수 있도록 변화
    • sms: 전화번호 입력해두면 메시지 모드에서 그 번호로 문자 보낼 수 있는 상태로 변환
    • ?query: 쿼리 스트링으로 외부 사이트에 지정한 특정 값을 보내어 이동할 수 있다. 지정하는 값을 쿼리라 하는데, 영어는 그대로 넣을 수 있지미나 한국어는 아니다.
<li><a href="./ex1_html 기초.html">내부문서</a></li>
<li><a href="https://www.naver.com" target="_blank">외부사이트</a></li>
<li><a href="#ft">푸터 id로 이동-네임 앵커</a></li>
<li><a href="mailto:sangmin990816@gmail.com">이메일</a></li>
<li><a href="tel:010-1234-1234">전화</a></li>
<li><a href="sms:010-1234-1234">문자</a></li>
<li><a href="https://search.naver.com/search.naver?query=%EC%B2%9C%EC%9E%AC%EA%B5%90%EC%9C%A1">검색하기</a></li>
<li><a href="https://search.naver.com/search.naver?query=NewJeans">뉴진스 검색하기</a></li>

미디어 태그

  • MIME: 멀티미디어 타입. mp3나 mp4는 브라우저마다 안 되는 경우(호환 정보)도 있어, 여러 개를 연결해야 하는데, 이때 MIME 타입을 명시해주어야 한다.
  • 5대 브라우저: 사파리, 오페라, 파이어폭스, 엣지, 크롬(최신, 빠름)
  • 원래는 넷스케이프와 인터넷 익스플로러가 양대 산맥. 브라우저 간에 표준을 정하기 위한 알력 싸움이 있었기 때문에 MIME 타입을 알고 있어야 한다.
  • 특히 핸드폰에서 사용하는 브라우저가 다르기 때문에 반드시 크로스브라우징 처리가 필요하다.
  • audio와 video 태그 안에 source (인라인) 태그를 넣어 미디어를 삽입한다.

오디오 태그

  • autoplay: 자동 재생
  • muted: 음소거
  • controls: 오디오 컨트롤러
  • loop: 자동 반복

비디오 태그

  • width: 너비
  • height: 높이
  • controls: 비디오 컨트롤러
  • poster: 비디오 썸네일(재생 전 뜨는 대표 이미지)

iframe 태그

테이블 태그

table은 표, 게시판을 만들 때 사용하는 태그

  • caption은 표 아래에 붙는 이름
  • table의 대 구성
    • thead: 줄 시작, 제목 행 부분
    • tbody: 각 열 이름에 대한 데이터가 들어간다.
    • tfoot: 통계 데이터
  • table의 소 구성
    • tr: 테이블의 한 행
    • td: 테이블의 일반 데이터 셀
    • th: 테이블의 제목 데이터 셀
    • colspan 속성: colspan=n만큼의 셀 열을 통합함
<table class="tb1">
        <caption>
            <h2>천재교육 풀스택 2기 성적표</h2>
        </caption>
        <!-- thead, tfoot, caption은 선택. 웹표준에 위배되지 않음 -->
        <thead>
            <tr>
                <th>번호</th>
                <th>이름</th>
                <th>점수</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>김일일</td>
                <td>11</td>
            </tr>
            <tr>
                <td>2</td>
                <td>김이이</td>
                <td>22</td>
            </tr>
            <tr>
                <td>3</td>
                <td>김삼삼</td>
                <td>33</td>
            </tr>
            <tr>
                <td>4</td>
                <td>김사사</td>
                <td>44</td>
            </tr>
            <tr>
                <td>5</td>
                <td>김오오</td>
                <td>55</td>
            </tr>
        </tbody>
        <tfoot><td colspan="3" style="color: darkmagenta; font-weight: bolder; font-size: 20px;">전원 통과</td></tfoot>

Untitled

⭐폼 요소

form 태그

form 태그는 사용자의 입력을 받아 특정 위치로 데이터를 전송해주는 태그로, XML의 Ajax로 대체할 수 있다. 자식으로 입력을 받는 태그로 input, select, textarea 등을 가진다.

  • method 속성: 폼을 서버에 전송할 http 메소드를 지정
    • 값 get: 폼 데이터를 url 끝에 붙여 Query로 보냄. 보안에 취약함.
    • 값 post: 내부적으로 보이지 않게 보냄

a태그는 보통 get 방식의 http 메소드를 사용한다.

  • 🔗name 속성: 폼을 식별하기 위한 이름. name 속성은 서버로 제출된 폼 데이터(form data)를 참조하기 위해 사용되거나, 자바스크립트에서 요소를 참조하기 위해 사용됩니다.
  • action 속성: 폼을 전송할 서버 쪽 스크립트 파일.
  • 🔗target 속성: action에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 지정함. "_blank|_self|_parent|_top|프레임 이름” 값을 지정할 수 있다.
<form action="/examples/media/action_target.php" name="loginform">
    이름 : <input type="text" name="st_name"><br>
    학번 : <input type="text" name="st_id"><br>
    학과 : <input type="text" name="department"><br>
    <input type="button" onclick="submit()" value="제출하기"></button>
</form>

<script>
    function submit() {
        document.forms["loginform"].submit();
    }
</script>

fieldset 태그

form 요소에서 연관된 요소들을 하나의 그룹으로 묶을 때 사용. 자식요소로 legend태그를 갖는다.

  • legend 태그: fieldset 요소의 캡션(caption)을 정의

label 태그

  • 사용자 인터페이스(UI) 요소의 라벨(label)을 정의할 때 사용. 사용자가 마우스로 해당 텍스트를 클릭할 경우 label 요소와 연결된 요소를 곧바로 선택할 수 있음.
  • for 속성: 라벨을 눌렀을 때 이동하게 될 태그의 id.

input 태그

사용자의 입력을 받는 태그로 닫는 태그가 없다.

  • name 속성: 폼(form)이 제출된 후 서버에서 폼 데이터(form data)를 참조하기 위해 사용되거나, 자바스크립트에서 요소를 참조하기 위해 사용
  • placeholder 속성: input 칸 안의 기본 설명으로, 값을 넣으면 사라짐. 모바일은 보통 이렇게 되어 있다.
  • autofocus 속성: 문서가 시작과 동시에 커서가 옮기게끔 함. 하나의 요소에만 걸 수 있다.
  • required 속성: 반드시 input 값이 입력되어야 한다. 입력되지 않으면 submit이 되지 않는다.
  • checked 속성: radio나 checkbox 등의 input 타입에 대해 문서의 시작부터 기본값으로 선택되게 한다.
  • aceept 속성: MIME 타입 또는 확장자를 값으로 가지면, file 타입의 input에 대해 업로드할 파일을 한정할 수 있다.
  • value 속성: input의 기본값을 지정한다.
  • readonly 속성: 읽기 전용으로 설정된 입력 필드는 사용자가 수정할 수는 없지만, 해당 내용을 하이라이트하거나 복사할 수는 있습니다. 서버로 제출된다.
  • disabled 속성: 수정할 수도 없고, 입력 필드의 값이 서버로 제출되지 않는다.
  • type 속성
    • 값 “text”: 단문 텍스트 값을 입력받는다. 255자 이하로 입력 제한
    • 값 ”password”: 입력한 내용을 *로 보이게함으로써 보안 유지
    • 값 “submit”: 제출 버튼. 누르면 form 태그 안의 내용을 전송한다.
    • 값 “reset”: 취소 버튼. 누르면 form 태그 안의 입력받은 내용을 모두 초기화한다.
    • 값 “email”: email 형식을 입력받는다. @가 반드시 포함되어야 한다.
    • 값 “tel: 연락처를 입력받는다.
    • 값 “date”: 년월일을 입력받는다. 달력에서 선택이 가능하다.
    • 값 “checkbox”: 다중 선택이 가능한 체크박스이다. 네모나게 뜬다.
    • 값 “radio”: 단일 선택지로 동그랗게 뜬다.
    • 값 “file”: 파일을 업로드하여 입력 받을 수 있다.
    • 값 “color”: 색상을 선택할 수 있다. RGB 컬러픽커를 사용할 수 있다.
    • 값 “hidden”: 사용자에게는 보이지 않는 숨겨진 입력 필드. 폼 제출 시 사용자가 변경해서는 안 되는 데이터를 함께 보낼 때 유용하게 사용

Untitled

Untitled

Untitled

Untitled

select

단일 드롭다운 메뉴를 생성한다. 드롭다운 리스트는 option 태그 안에 들어간다.

  • option selected: 기본으로 선택될 드롭다운 리스트이다.
  • option value: 실제로 폼에 전송될 데이터이다.

Untitled

textarea

textarea의 지정 영역을 벗어난 입력은 스크롤로 표시되며, 오른쪽 하단을 드래그 하여 영역을 재조정할 수 있다.

  • cols 속성: 텍스트 입력 영역의 가로(열 개수, 한 줄의 글자) 넓이를 정한다.
  • rows 속성: 텍스트 입력 영역의 세로(행 개수) 넓이를 정한다.

Untitled

button

누를 수 있는 버튼

  • type 속성: 버튼의 타입을 지정할 수 있따.
    • 값 “button”:
    • 값 “submit”: 제출 버튼. 누르면 form 태그 안의 내용을 전송한다.
    • 값 “reset”: 취소 버튼. 누르면 form 태그 안의 입력받은 내용을 모두 초기화한다.

meta tag(SEO)

검색엔진 최적화하기 위해 head 부분에 meta 태그를 단다. 

<meta name="Subject" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta name="Robots" content="noindex, nofllow">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="Author" content="">
<meta http-equiv="Publisher" content="">
<meta http-equiv="Copyright" content="copyright@chunjae.co.kr">

Untitled

  • Subject: 홈페이지 주제를 지정
  • Keywords: 검색에 걸리는 키워드 설정
  • Description: 웹 페이지에 대한 설명 정의
  • Robots: 검색 로봇 제어
  • http-equiv: 특정 브라우저로 실행되게 한다.
  • Author: 페이지 저자를 명시한다.
  • Publisher: 제작사를 지정
  • Copyright: 저작

오픈 그래프

<meta property="og:type" content="website">
<meta property="og:title" content="천재교육">
<meta property="og:description" content="앞선 생각으로 더 큰 미래의 교육을 준비하는 기업">
<meta property="og:image" content="https://www.chunjae.co.kr/webdata/_cj/www/meta/chunjae_logo.png">
<meta property="og:url" content="https://www.chunjae.co.kr">
  • 노션의 북마크 되었을 때 표시되는 내용과 같다. 즉 SNS 공유를 위한 메타 태그이다.

트위터🔗

<meta name="twitter:card" content="picture">
<meta name="twitter:title" content="천재교육">
<meta name="twitter:description" content="앞선 생각으로 더 큰 미래의 교육을 준비하는 기업">
<meta name="twitter:image" content="https://kktlove.github.io/web01/images/chunjae_logo.png">

모바일 앱 태그

<meta property="al:ios:url" content="applinks://docs" />
<meta property="al:ios:app_store_id" content="12345" />
<meta property="al:ios:app_name" content="App Links" />

<meta property="al:android:url" content="applinks://docs" />
<meta property="al:android:app_name" content="App Links" />
<meta property="al:android:package" content="org.applinks" />
<meta property="al:web:url" content="http://applinks.org/documentation" />
  • 모바일 앱으로 제공 가능할 때 경로를 제공함

파비콘🔗

<link rel="shortcut icon" href="">

<link rel="apple-touch-icon-precomposed" href="./images/logo_64.png">

// IE 계열 브라우저
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="">

<link rel="icon" href="favicon-16.png" sizes="16x16">
<link rel="icon" href="favicon-32.png" sizes="32x32">
<link rel="icon" href="favicon-48.png" sizes="48x48">
<link rel="icon" href="favicon-64.png" sizes="64x64">
<link rel="icon" href="favicon-128.png" sizes="128x128">
  • 파이어 폭스, 오페라, 구형 크롬/사파리는 favicon 중 사용 가능한 가장 큰 크기를 선택한다.
profile
최상민
상민
이전 포스트

JSP/Servlet

다음 포스트

CSS

0개의 댓글