HTML 핵심 개념

Jnns·2023년 11월 24일
html
1
post-thumbnail

html의 기본 구조는 다음과 같다.

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

페이지에 대한 정보를 담고있다. 웹 브라우저가 읽어서 처리하는 용도이다.

<head>에 포함되는 것들

  • 메타태그
  • 페이지 자체의 제목
  • 외부데이터 (CSS 불러오기 포함)
<meta charset="utf-8">
<title>제목입니다.</title>
<link rel="stylesheet" src="style.css">

1. 메타태그

메타데이터

데이터를 설명하는 데이터. 즉, HTML 데이터를 설명하는 데이터

메타데이터의 용도

  • 구글 검색 페이지에 사이트 설명을 입력해줄 수 있다.
  • 페이스북, 카카오, 트위터 등의 SNS 공유시 미리보기

웹 페이지에 설정하는 메타 태그

<meta charset="utf-8">
HTML 문서의 문자 인코딩을 utf-8로 지정
브라우저가 웹페이지를 해석하는 방식을 지정해서 문서의 깨짐이 없도록 한다.

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale, user-scalable=no">
name="viewport" 설정으로 반응형 웹 사이트를 제작할 수 있다.
width=device-width: 장치의 화면 너비를 따르도록 페이지 너비를 설정
initial-scale=1: 브라우저에서 페이지를 처음 로드할 때 배율을 1로 설정해
minimum-scale=1: 최소사이즈를 1배로 처리해서 축소를 못하게 막는다.
maximum-scale=1: 최대사이즈를 1배로 처리해서 확대를 못하게 막는다.
user-scalable=no: 사용자크기변화를 no로 처리해서 크기변화를 못하게 막

<meta http-equiv="X-UA-Compatible" content="IE=edge">
인터넷 익스플로러에서 최신 표준 모드로 보여주는 코드이다.

<meta name="robots" content="noindex">
name="robots" 설정으로 크롤러의 동작에 대해 규칙을 정할 수 있다.
검색결과에 이 페이지, 미디어 또는 리소스를 표시하지 않는다. 이 규칙을 지정하지 않으면 페이지, 미디어 또는 리소스가 색인 생성되어 검색결과에 표시될 수 있다.

크롤러? 색인?

사이트를 설명하는 데 사용하는 메타 태그

구글 검색 결과, 사이트 설명에 사용

<title>코드잇 | 코딩, 쉬워질 때도 됐다</title>
<meta name="description" content="월 2만원대로 Python, JavaScript, HTML/CSS 등 3,000개 이상 프로그래밍 강의를 배워보세요!">

SNS 공유할 때 링크 미리 보기에 사용

  • 페이스북
<meta property="og:image" content="/static/images/brand/og_tag.png">
<meta property="og:title" content="코드잇 | 코딩, 쉬워질 때도 됐다">
<meta
    property="og:description"
    content="월 2만원대로 Python, JavaScript, HTML/CSS 등 3,000개 이상 프로그래밍 강의를 배워보세요!"
>
<meta property="og:url" content="https://www.codeit.kr">
  • 트위터
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="/static/images/brand/og_tag.png">
<meta
    name="twitter:title"
    content="JavaScript 프론트엔드 개발자 - 커리어 강의 | 코드잇"
>
<meta
    name="twitter:description"
    content="예쁘고 편리한 웹사이트를 뚝딱 만들어 내는 프론트엔드 개발자를 꿈꾸고 게신가요? ..."
>

어떻게 사용해야 할까?

메타 태그의 특성
메타 태그에 name으로 설정 가능한 값들

메타 태그 설정 시 주의사항

동적인 OG 태그(Twitter 태그도 동일)

<head>
    <meta property="og:title" content={data?.title}>
</head>

웹 페이지 데이터 요청 시 HTML이 최초로 만들어지고 난 뒤, 추가로 데이터를 요청하고 받아와서 동적으로 OG 태그를 만드는 것은 불가능

위의 예를 보면,
1. 브라우저가 최초로 사이트에 데이터 요청
2. data?.title의 값은 undefined 인 상태로 HTML을 받음
3. 이후 브라우저가 데이터를 요청해서 data?.title 값이 채워짐

하지만, SNS 공유에서 링크 미리 보기를 만들 때는 한 번의 요청으로 받아온 데이터를 기준으로 미리 보기를 만들고 끝나기 때문에 content=undefined 인 상태로 링크 미리 보기를 만들어서 미리 보기가 보이지 않거나 원하는 데이터를 볼 수 없다.

그래서 이런 경우엔 data?.title 에 해당하는 데이터를 먼저 받고 나서 HTML을 생성해야 한다다. 이를 위해서 프론트엔드 서버에서 데이터를 받아서 HTML을 생성한 뒤 전달하거나, 소스 코드를 빌드하는 단계에서 미리 데이터를 받아 HTML을 생성하는 방법이 있다.

<link rel="icon" href="icon.ico">
<link rel="stylesheet" href="style.css">

<body>

페이지의 실질적으로 보여지는 부분이 들어간다.

<body>에 포함되는 것들

1. 페이지의 구조 만들기

div - 아무 의미 없지만 특정 태그들을 감싸서 하나의 블록으로 만드는 태그

<div></div>

시멘틱 태그

<head>
<nav>
<main>
<article>
<section>
<figure>
<footer>
  • div와 기능은 똑같지만 의미가 담겨있는 태그들
  • 작성하는 사람의 의도가 중요
  • 검색엔진 최적화(SEO), 접근성(Accessibility)을 높여 장벽없는 웹 브라우저를 만들 수 있다.

2. 내용 삽입 - CSS

<h1> ~ <h6> // 제목
<p> // 단락
<br> // 줄바꿈
<a> // 링크
<strong> // 강조(굵은 글씨)*
<em> // 강조(기울임)
<s> // 취소(line-through)
<bloackqoute> // 인용
<q> // 짧은 인용
<sup> // 위 첨자
<sub> // 아래 첨자
<pre> // 미리 정해진 서식 보여주기
<code> // 글 안의 짧은 코드

<strong> 은 글씨를 굵게 만들때 사용X -> 그럼언제?
의미상 강조의 의미가 있을 때. 음성변환시 강조해서 읽음

리스트

<ol type="a A i I hangul...">
  <li></li>
  <li></li>
</ol>
<ul>
  <li></li>
  <li></li>
</ul>

표

<table>
  <thead>
    <tr>
      <th></th> // <thead> 내에는 <th>로만 작성
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th></th>
      <td></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th></th>
      <td></td>
    </tr>
  </tfoot>
</table>
  • CSS
// 표 테두리 CSS
table {
	border: 1px solid red;
}

th {
	border: 1px solid red;
}

td{
	border: 1px solid red;
}

// 테두리 겹치기
table {
	border: 1px solid red;
    border-collapse: collapse;
}

// 테두리 간격 설정
table {
	border: 1px solid red;
    border-spacing: 10px;
}

멀티미디어

<img src="이미지 주소" width="" height="" alt="이미지 설명"> // 이미지
<video src="동영상 주소" width="" height="" autoplay muted controls></video> // 동영상
<audio src="오디오 주소" autoplay controls></audio> // 오디오
<iframe src="html 주소" width="" hright=""></iframe> // html

CSS에서 width랑 height를 설정해주는데 왜 넣나요?
-> 너비, 높이를 미리 지정해주면 브라우저가 미리 자리를 비워두고, 콘테츠 크기를 더 쉽게 가늠할 수 있다!!

form 삽입 - 로그인, 비밀번호, 체크박스, 달력, 여러 항목 중 선택 등을 입력할 수 있는 것들

<form method="get"></form>
  • form 태그들을 감싸는 태그
  • get(기본값) : 데이터를 요청할 때
  • post : 데이터를 포스팅할 때
  • 서버에 보내는 데이터의 용량이 크면 get으로는 전송이 불가하기에 post를 사용해야 한다.

input

<input type=""  id="input_id" name="" value="">
  • text(기본값), password, checkbox, date, file, email, number, radio, range 등이 type으로 설정된다.
  • id는 라벨과 묶기 위해 사용.
<input type="password"  id="input_id" name="" value="" placeholder="비밀번호" autocomplete required>
  • placeholder : 아무것도 입력안했을 때 보여줄 값
  • autocomplete : 자동완성
  • required : 필수 입력 부여

label

<label for="input_id">

  • 보통 다른 form 태그와 묶여서 사용된다. 묶일 때 id를 for로 받는다. 해당 id를 가진 form이 뭔지 설명해주는 역할

  • id : label과 묶기위해 사용

  • name : 입력한 데이터를 서버에 어떤 이름으로 보낼지 정하는 것.
    value : input에 담긴 정보에 따라 값을 부여해서 보내줄 수 있다.
    예시) 기분 상태 고르는 radio에 '좋음' 항목을 골랐다면 name="feelings" value="good" 형태로 서버에 데이터를 넘겨줄 수 있다.

button

<button type="">
  • type= "submit(기본값), reset, menu, button"

select - 여러 항목 중 하나 선택하는 박스 만들기

<select id="select_id" name=""> 
	<option value="">1번</option>
    <option value="">2번</option>
</select>

textarea - 긴 글 삽입

<textarea></textarea>

script - JS 불러오기

<script src="javascript.js">
profile
Jnns
이전 포스트

프로그래밍 언어

다음 포스트

CSS 레이아웃 - Position

0개의 댓글