[면접] Frontend 기술면접 대비2

https://wikidocs.net/book/7596

입문자를 위한 HTML5

웹 개발 입문자들을 대상으로 하는 HTML 교재입니다.

wikidocs.net

01장. 웹 개발 그리고 HTML

01-3. HTML을 소개합니다

HTML 이란

하이퍼텍스트 마크업 랭귀지 (HyperText Markup Language)
- 하이퍼텍스트: 사용자가 기존 문서에서 다른 문서로 이동할 수 있게 해주는 텍스트
- 마크업: 태그(tag)를 사용해 콘텐츠나 문서 구조를 표시하는 형식
- 마크업 랭귀지: 마크업 형식을 따르는 언어

HTML 문서

HTML이 제공하는 문법 규칙을 토대로 문서를 작성한 다음 '.html' 확장자를 붙여 저장한 문서
렌더링: 웹 브라우저가 HTML 문서의 내용을 해석해 화면에 콘텐츠를 표시하는 작업

HTML5

HTML의 최신 버전. 웹 표준 기술

02장. HTML 시작하기

02-1. HTML 기본 문법: 태그(Tag)

<tag>콘텐츠</tag> 형태

02-2. HTML 기본 문법: 속성(Attribute)과 주석

<태그명 속성명="속성값">콘텐츠</태그명>

주석

<!-- 주석 -->

02-3. HTML 문서 기본 구조

문서 기본 구조

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>여기에는 문서의 제목을 입력해주세요</title>
  </head>
  <body>
    여기에 웹페이지에 표시할 콘텐츠(태그)를 입력해주세요
  </body>
</html>

문서 형식 선언 <!Doctype HTML>

어떤 마크업 언어 형식으로 작성 되었는지 명시
HTML5 웹 표준 기술로 작성 되었다.
웹 브라우저가 해당 문서 해석할 때, 문서의 유효성 검사 할 때 참고 역할

문서의 시작과 끝 <html lang="ko">

<html> : 문서 형식 선언 이후 실제 문서의 내용을 표시하는 태그
실제 문서의 내용 포함
- 문서가 표시할 콘텐츠
- 문서에 대한 정보 (설정값)

문서의 정보 <head>

브라우저에 문서의 정보 전달 (설정값)

인코딩 방식 설정 <meta charset="utf-8">

<meta> : 문서의 키워드, 설정 등 문서와 관련된 여러 항목을 지정할 때 사용하는 태그
문자의 인코딩 방식 설정

문서의 제목 <title>

문서의 제목을 입력하는 태그

화면에 표시될 콘텐츠 <body>

웹 브라우저 화면에 표시될 콘텐츠를 입력하는 태그

03. 텍스트 표시하기

03-1. 제목과 문단

제목: <h1> - <h6>
문단: <p>
인용구: <blockquote>
수평선: <hr>

03-2. HTML 코드의 특징

공백:   (엔티티 코드)
- 엔티티 코드: &로 시작해서 ;로 끝나는 문자의 조합. HTML 코드 내 다양한 특수 문자를 나타내기 위해 사용하는 일종의 약속
<pre> : 태그 안에 작성된 텍스트를 HTML 코드에 작성된 그대로 화면에 표시하는 태그 (자주 사용 안함)

03-3. 태그의 유형과 인라인 텍스트

블록 레벨 요소: 요소가 화면 상에서 하나의 블록 형성
- <h1>-<h6>, <p>, <blockquote>
- 블록 레벨 요소: 화면의 가로 길이를 통째로 차지하는 요소 (세로 길이는 콘텐츠의 세로 길이와 동일)
인라인 레벨 요소: 태그에 포함 된 콘텐츠의 크기 만큼만 공간을 차지
- <strong>, <em>(이탈릭체), <mark>

03-4. 컨테이너와 전역속성

컨테이너 태그: 콘텐츠나 레이아웃에 아무런 영향도 주지 않고, 단지 다른 요소 여럿을 묶어 관리하게 편하게 만드는 역할을 하는 태그
- <div> : 블록 레벨의 컨테이너 요소를 만드는 태그
- <span> : 인라인 레벨의 컨테이너를 만드는 태그
전역 속성(Global Attributes): 모든 HTML 태그에서 공통으로 사용할 수 있는 속성
- id: 요소에 고유한 이름을 부여하는 식별자
- class: 요소를 그룹 별로 묶을 수 있는 식별자
- title: 요소에 대한 추가 정보 기입

04. 이미지와 링크

04-1. 이미지 태그

<img scr="penguin.png" width="250" height="100">

04-2. 링크 만들기

기존 창에서 열기: target="_self"(default)

<a href="https://www.naver.com/">여기</a>

새 탭에서 열기: target="_blank"

<body>
  <h1>두 링크의 차이를 비교해보세요</h1>
  <a href="https://www.naver.com/" target="_self">
    현재 탭에서 열기
  </a>
  &nbsp;&nbsp;&nbsp;&nbsp;
  <a href="https://www.naver.com/" target="_blank">
    새 탭에서 열기
  </a>
</body>

05. 목록과 표

05-1. 목록 만들기

unordered list

<body>
  <h1>항목 태그는 같은 것을 쓴다</h1>
  <ul>
    <li>강아지</li>
    <li>고양이</li>
    <li>거북이</li>
    <li>햄스터</li>
  </ul>
</body>

ordered list

<body>
  <h1>항목 태그는 같은 것을 쓴다</h1>
  <ol>
    <li>스타벅스</li>
    <li>커피빈</li>
    <li>파스쿠찌</li>
    <li>이디야</li>
  </ol>
</body>

05-2. 표 만들기

<table> : 하나의 표
<tr> : 표 안에서 하나의 행
<th> : 행 안에서 제목에 해당하는 셀
<td> : 행 안에서 항목에 해당하는 셀

<body>
  <table border="1">
    <tr>
      <th>한국 선수</th>
      <th>일본 선수</th>
      <th>미국 선수</th>
    </tr>
    <tr>
      <td>김철수</td>
      <td>오오다</td>
      <td>제임스</td>
    </tr>
  </table>
</body>

06. 입력 폼 만들기

06-1. 입력 태그

<input> : 웹 페이지 이용자로부터 입력을 받기 위해 사용하는 태그

<body>
  <h1>입력 필드를 만든다</h1>
  <input type="text" name="username">
  <input type="password">
</body>

input 태그의 type
- text: 텍스트
- password
- number: 숫자
- color
- button: 클릭
- radio: 선택
- checkbox: 다중 선택
label과 함께 사용하기
- 방법1. label 태그 안에 입력 요소 포함
- 방법2. input의 id 기준으로 label과 매핑

<body>
  <h1>로그인 해주세요</h1>
  <label>
    아이디
    <input type="text">
  </label>
  <br>
  <label for="pw">비밀번호</label>
  <input id="pw" type="password">
</body>

06-2. 입력 요소를 만드는 또 다른 태그들

<select>: 드롭다운 메뉴 (+ <option> 태그)
- 속성
  - size: 화면에 표시될 메뉴 항목의 개수
  - multiple: 여러개 항목 선택 가능
<option>: select 태그 내 선택지
- 속성
  - selected: 기본으로 선택될 항목
  - value: 항목 선택시 최종적으로 반영될 값

<body>
  <select>
    <option>커피</option>
    <option>콜라</option>
    <option>쥬스</option>
    <option>생수</option>
  </select>
</body>

<textarea>: 여러 줄의 텍스트 입력 (<-> <input> : 한 줄 텍스트 입력)
- cols: 텍스트 영역의 가로 너비 (문자의 개수 기준)
- rows: 텍스트 영역의 세로 너비 (문자의 개수 기준)

<body>
  <textarea cols="10" rows="6"></textarea>
</body>

<progress> : 진척도 표시
<button>: <input type="button">과 동일하지만 태그 사이에 콘텐츠(버튼명) 입력 가능

<body>
  <!-- value 속성에 콘텐츠를 써 줍니다. -->
  <input type="button" value="PUSH">

  <!-- 태그 사이에 콘텐츠를 써 줍니다. -->
  <button>PUSH</button>
</body>

06-3. 입력 폼 만들기

<form> : 폼 요소(양식)를 만드는 태그
- action: 폼 요소에 입력된 값들을 전달 받아 처리할 서버의 프로그램 지정 (URL)
- method: 사용자가 입력한 내용을 서버로 전송할 때의 방식 지정
  - get: 입력 후 전송 값이 주소창에 표시. 길이 제한 있음
  - post: 입력 후 전송 값이 주소창에 표시 되지 않음. 길이 제한 없음
- name: 폼 안에서 입력 요소 구분 역할 & 서버에 전송 된 입력값의 이름
  - name 속성 input 별로 달아서 관리해주기!
- submit: 클릭 시 해당 값들을 서버로 전송
  - type="button"과 화면 상 차이는 없지만 클릭 시 서버로 보내준다는 점이 다름

<body>
  <form method="post" action="fake_server.php">
    <label for="name">이름</label>
    <input type="text" id="name" name="name">
    <br>
    <label for="age">나이</label>
    <input type="number" id="age" name="age">
    <br>
    <label for="character">성격</label>
    <textarea id="character" name="character"></textarea>
    <br>
    <!-- 클릭하면 입력 값들이 서버로 전송됩니다 -->
    <input type="submit" value="전송">
  </form>
</body>

07. 미디어 다루기

07-1. 오디오와 비디오

<audio> : 오디오 태그
<video> : 비디오 태그
옵션
- controls: 오디오 파일의 컨트롤 패널 표시
- autoplay: 오디오 자동 재생
- muted: 오디오 음소거
- loop: 반복 재생 기능 추가

07-2. 외부 파일 및 문서 삽입

<object> : 외부 리소스를 나타내는 요소를 만드는 태그
- data: 외부 파일의 경로 지정
- type: 포함시킨 내용의 유형 지정
- name: 다른 요소와 구분할 수 있는 식별자 역할
- width: 너비
- height: 높이
<embed> : HTML5를 지원하지 않는 브라우저에서 재생할 수 없는 콘텐츠 삽입 시 사용
- src: 외부 파일의 경로 지정
- type: 포함시킨 내용의 유형 지정
- width: 너비
- height: 높이
<iframe> : 웹 페이지 안에 공간을 마련해 그 안에 또 다른 웹페이지 표시
- id
- title
- width
- height
- src: 삽입하려는 웹문서의 URL 입력

08. 서비스 품질 향상 시키기

08-1. 의미론적인 태그

시맨틱 태그: 이름만으로도 해당 태그가 문서에서 어떤 역할을 하는지 쉽게 파악할 수 있는 태그
- 장점
  - 1. 웹페이지 관리 용이
  - 2. 검색 엔진의 페이지 탐색 도움 (검색 최적화 작업)
- 종류
  - <section> : 연관된 콘텐츠를 묶어 영역 구분 (컨테이너 태그)
  - <article> : 독립적으로 사용할 수 있는 연관 콘텐츠 구분 (section 보다 구체적인 내용)
  - <aside> : 본문 내용과 연관성이 적거나 관계 없는 보조 정보를 나타내는 태그
  - <header> : 머릿말 (검색 엔진이 참고하는 정보)
  - <nav> : 네비게이션 메뉴 (<header> 태그 안에 포함하는 경우가 많음)
  - <footer> : 페이지 만든 사람, 저작권 정보, 연관 링크 등 요약글

08-2. 메타데이터

<meta> : 메타데이터 표현하기 위해 사용하는 태그 (문서 정보를 나타내므로 <head> 내부 위치)
- name: 메타데이터의 이름(유형)
- content: 메타데이터 설정 값
- charset: 문자 인코딩
- http-equiv: 프래그마 지시문
표준 메타데이터 사용 예시
- author: 문서 제작자 정보
- description: 웹페이지에 대한 설명
- keywords: 웹페이지 콘텐츠와 관련된 키워드
- viewport: PC 화면에서 보이는 페이지를 모바일 기기에서 보기 위해 추가하는 정보
  - height : 웹 페이지를 렌더링 하고자 하는 viewport의 높이
  - maximum-scale : 가능한 최대 확대 비율
  - minimum-scale : 가능한 최소 확대 비율.
  - user-scalable : 사용자가 웹 페이지를 확대할 수 있는지 여부 지정하기. yes 또는 no로 결정합니다

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="author" content="강윤호">
  <meta name="description" content="예시를 위해 만들어 본 페이지입니다.">
  <meta name="keywords" content="메타데이터, meta, HTML, 프론트엔드, 웹 개발">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>메타데이터란 이런 것이다</title>
</head>
<body>
  <h1>표준 메타데이터 이름</h1>
  <p>
    &lt;meta&gt; 태그는 name 속성을 메타데이터의 이름으로, content 속성을 값으로 하여 메타데이터를 추가합니다. HTML 표준 명세를 비롯한 웹 페이지 관련 명세에는 사용 가능한 메타데이터 이름과 값들이 정의되어 있는데, 이를 '표준 메타데이터'라 합니다. 여기에서는 대표적인 표준 메타데이터 몇 가지를 알아보겠습니다.
  </p>
</body>
</html>

저작자표시

'Programming' 카테고리의 다른 글

[면접] Frontend 기술면접 대비3 - CSS 책 정리 (1)	2024.07.09
[면접] Frontend 기술면접 대비1 (0)	2024.07.09
필수 리눅스 터미널 명령어 (0)	2022.03.03
개발 참고 사이트 (0)	2019.11.20
무료 상업폰트 (0)	2019.11.19

김땡땡 블로그

[면접] Frontend 기술면접 대비2 - HTML 책 정리

01장. 웹 개발 그리고 HTML

01-3. HTML을 소개합니다

02장. HTML 시작하기

02-1. HTML 기본 문법: 태그(Tag)

02-2. HTML 기본 문법: 속성(Attribute)과 주석

02-3. HTML 문서 기본 구조

03. 텍스트 표시하기

03-1. 제목과 문단

03-2. HTML 코드의 특징

03-3. 태그의 유형과 인라인 텍스트

03-4. 컨테이너와 전역속성

04. 이미지와 링크

04-1. 이미지 태그

04-2. 링크 만들기

05. 목록과 표

05-1. 목록 만들기

05-2. 표 만들기

06. 입력 폼 만들기

06-1. 입력 태그

06-2. 입력 요소를 만드는 또 다른 태그들

06-3. 입력 폼 만들기

07. 미디어 다루기

07-1. 오디오와 비디오

07-2. 외부 파일 및 문서 삽입

08. 서비스 품질 향상 시키기

08-1. 의미론적인 태그

08-2. 메타데이터

'Programming' 카테고리의 다른 글

댓글

티스토리툴바

[면접] Frontend 기술면접 대비2 - HTML 책 정리

01장. 웹 개발 그리고 HTML

01-3. HTML을 소개합니다

02장. HTML 시작하기

02-1. HTML 기본 문법: 태그(Tag)

02-2. HTML 기본 문법: 속성(Attribute)과 주석

02-3. HTML 문서 기본 구조

03. 텍스트 표시하기

03-1. 제목과 문단

03-2. HTML 코드의 특징

03-3. 태그의 유형과 인라인 텍스트

03-4. 컨테이너와 전역속성

04. 이미지와 링크

04-1. 이미지 태그

04-2. 링크 만들기

05. 목록과 표

05-1. 목록 만들기

05-2. 표 만들기

06. 입력 폼 만들기

06-1. 입력 태그

06-2. 입력 요소를 만드는 또 다른 태그들

06-3. 입력 폼 만들기

07. 미디어 다루기

07-1. 오디오와 비디오

07-2. 외부 파일 및 문서 삽입

08. 서비스 품질 향상 시키기

08-1. 의미론적인 태그

08-2. 메타데이터

'Programming' 카테고리의 다른 글

관련글

댓글

티스토리툴바