<![CDATA[ HTML - freeCodeCamp.org ]]> https://www.freecodecamp.org/korean/news/ https://cdn.freecodecamp.org/universal/favicons/favicon.png <![CDATA[ HTML - freeCodeCamp.org ]]> https://www.freecodecamp.org/korean/news/ Eleventy Sat, 23 May 2026 08:27:48 +0000 60 <![CDATA[ HTML이란 무엇인가 - 하이퍼텍스트 마크업 언어의 정의와 의미 ]]> https://www.freecodecamp.org/korean/news/what-is-html-definition-and-meaning/ 6527283229e03d03e8aba9bd Thu, 12 Oct 2023 12:36:35 +0000 기사 원문: What is HTML – Definition and Meaning of Hypertext Markup Language


HTML, 혹은 하이퍼텍스트 마크업 언어는 웹페이지의 구조를 정의하는 웹을 위한 마크업 언어입니다.

모든 웹사이트의 가장 기본적인 구성 요소이기 때문에 웹 개발자로서 경력을 쌓고 싶다면 반드시 배워야 할 언어이기도 합니다.

이 글에서는 HTML이 무엇인지 자세히 설명하고, HTML이 웹페이지에서 어떤 역할을 하는지와 HTML 중에서도 정말 멋진 시맨틱 HTML도 다룰 예정입니다.

HTML이 무엇인가요?

"HTML"을 처음부터 끝까지 이해하기 위해 이 약어를 구성하고 있는 각각의 단어를 하나씩 살펴보겠습니다.

하이퍼텍스트(Hypertext): 관련 항목을 연결하기 위해 구성된 텍스트(종종 이미지 등 삽입 포함)

마크업(Markup): 하드카피나 소프트카피로 출력될 모든 활자에 관한 스타일 가이드

언어(Language): 컴퓨터 시스템이 명령어를 이해하고 해석할 때 사용하는 언어

HTML은 웹페이지의 구조를 결정합니다. 이 구조만으로는 웹페이지를 보기 좋게 꾸미거나 상호작용이 가능하게 만들기는 어렵습니다. 그렇기 때문에 HTML을 예쁘게 꾸미거나 상호작용이 가능하게 하기 위해서는 각각 CSS와 자바스크립트라는 보조 기술을 사용하게 됩니다.

이 경우에 저는 이 HTML, CSS, 자바스크립트라는 세 가지 기술을 사람의 몸에 빗대어 설명하는 것을 좋아합니다.

  • HTML은 뼈,
  • CSS는 살,
  • 그리고 자바스크립트는 뼈와 살에 생명을 불어넣는 순환계, 소화계, 호흡계라고 할 수 있습니다.

HTML, CSS, 자바스크립트를 이런 식으로도 볼 수 있습니다. HTML은 집을 이루는 뼈대, CSS는 집의 내부 및 외부 장식이며, 자바스크립트는 집을 거주 가능한 곳으로 만들어 주는 전기, 수도 시스템 및 그 밖의 여러 기능이라고 말입니다.

HTML 태그

HTML은 특정 웹페이지의 마크업을 정의하므로 텍스트, 이미지 등 삽입하는 내용을 특정한 방식으로 표시하는 것이 가능합니다.

예를 들어 어떤 텍스트는 크게, 다른 텍스트는 작게, 또 어떤 텍스트는 굵게, 혹은 이탤릭체나 글머리 기호 형식으로 하고 싶은 경우,

HTML의 "태그"를 사용하여 이런 일을 수행할 수 있습니다. 제목, 단락, 굵은 글씨 단어, 이탤릭체 단어 등을 표현하는 태그들이 있습니다.

아래의 이미지는 HTML 태그의 구조를 보여줍니다.

HTML 태그의 구조

HTML 요소

한 HTML 요소는 시작 태그(opening tag), 글자, 내용, 종료 태그(closing tag)로 이루어져 있습니다. HTML 요소의 내용이 비어 있을 때도 있습니다. 종료 태그 대신 웹페이지에 삽입하려는 콘텐츠의 소스나 링크가 있는 경우입니다.

비어 있는 HTML 요소의 예로는 웹페이지에 이미지를 삽입할 때 쓰는 <img>가 있습니다.

HTML 요소는 종종 태그와 호환해서 사용되지만, 둘 사이에는 약간의 차이점이 있습니다. HTML 요소는 한 쌍의 시작 태그와 종료 태그, 그리고 그 사이에 콘텐츠가 포함된 조합을 말합니다.

HTML 요소의 구조를 시각화하는 데 도움이 될 만한 또 다른 이미지를 만들어 봤습니다.

HTML 요소의 구조

HTML 속성

HTML 태그에도 속성이라 불리는 것이 있습니다. 이 속성들은 시작 태그 안에 위치하며, 스타일 및 id부터 class까지 다룹니다. 이들은 요소에 관한 추가 정보를 전달하고 스타일 지정 및 자바스크립트를 사용한 조작과 같은 작업의 수행을 돕는 속성값을 사용합니다.

아래의 인포 그래픽에서 시작 태그에는 "text"라는 값을 가진 class 속성이 있습니다. 이는 요소의 스타일을 지정하거나 상호작용을 위해 자바스크립트에서 선택하는 데 사용할 수 있습니다.

속성-1

HTML 페이지의 기본적인 구조는 다음과 같습니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Definition of HTML</title>
  </head>
  <body>
    <!--Page content such as text and images goes in here-->
  </body>
</html>

여기에서 중요한 코드를 짚어 봅시다.

<!Doctype html>: 이 코드에서 HTML5를 사용하고 있음을 명시합니다. HTML5가 도입되기 전까지는 <!Doctype> 태그 속에 코딩 중인 HTML 버전을 분명하게 명시해야 했습니다. 예를 들면 HTML4.0 혹은 3.2, 이런 식으로요. 하지만 더 이상 그럴 필요가 없어졌습니다. 코드에 "html"이라고 적혀 있으면 브라우저는 자동으로 HTML5로 코딩하는 것으로 받아들입니다.

<html></html>: 모든 HTML 문서의 루트, 혹은 최상위 요소입니다. 다른 모든 요소는 이 안에 래핑 되어야 합니다.

<head></head>: 웹 크롤러는 페이지에서 중요한 정보를 얻기 위해 head 태그 내부를 살펴봅니다. 여기에는 페이지 타이틀, 스타일시트, SEO용 메타 인포메이션 등과 같은 정보가 포함되어 있습니다.

<meta />: 페이지의 메타 인포메이션을 전달하는 빈 요소입니다. 이러한 정보에는 작성자, 사용 중인 인코딩 유형(거의 항상 UTF-8), 응답성, 호환성 등이 포함될 수 있습니다. 웹 크롤러는 SEO에서 중요한 역할을 하는 웹페이지에 관한 정보를 얻기 위해 언제나 메타 태그를 확인합니다.

<title></title>: 웹페이지의 타이틀을 정의하며, 항상 브라우저 탭에 표시됩니다.

<body></body>: HTML 문서의 모든 내용은 body 태그 안에 있습니다. 전체 페이지에는 단 하나의 <body> 태그만 존재할 수 있습니다.

시맨틱(Semantic, 의미론적) HTML이 무엇인가요?

시맨틱(Semantic) HTML이란, HTML 태그가 어떤 역할을 하는지 실제 의미가 부여되었다는 것을 의미합니다.

처음 도입된 90년대 초반부터 시맨틱 HTML은 HTML의 필수 요소였습니다. 하지만 CSS가 대부분의 브라우저에서 사용되기 시작한 90년대 후반까지는 특별한 관련이 없는 것으로 여겨졌습니다.

시맨틱 HTML을 사용하면 <div> and <span> 와 같이 의미론적으로 중립적인 태그들은 홀대받게 됩니다. 왜냐하면 <header>, <nav>, <main>, <section>, <footer>, <article>와 같이 의미론적으로 설명이 더 잘된 태그가 동일한 작업을 수행할 수 있기 때문입니다.

시맨틱 태그를 사용했을 때 뚜렷한 이점은 웹 크를러가 웹페이지나 웹사이트를 쉽게 인덱싱할 수 있어 SEO가 향상된다는 것입니다.

또한 시맨틱을 사용하는 웹사이트는 스크린 리더(화면 판독기, 시각장애인을 위한 웹 서핑 프로그램)를 이용하는 접속자에게 더 많은 정보를 제공하고 적응 및 접근이 용이해집니다.

주요 시맨틱 태그와 역할

가장 일반적으로 쓰이는 시맨틱 HTML 태그 중 일부를 살펴보겠습니다.

<header>: <header> 요소는 웹페이지의 소개 영역을 정의합니다. 여기에는 로고, 내비게이션, 테마 스위처, 검색창 등의 항목이 포함되어 있습니다.

<nav>: <nav>  요소는 홈, 연락처, 정보, FAQ 등과 같은 페이지의 내비게이션 항목을 지정합니다.

<main>: <main> 요소는 일반적으로 태그의 직계 자손으로 취급됩니다. 여기에는 HTML 문서에서 <header> 와 <footer> 를 제외한 HTML 문서의 메인 영역이 포함되어 있습니다. 전체 HTML 문서에는 이 태그들(<header>, <footer>, <main>) 중 하나만 있는 것이 좋습니다.

<section>: <section> 요소는 웹페이지의 특정 영역을 정의합니다. 쇼케이스 영역이 될 수도 있고, 소개 영역이나 연락처 영역 등이 될 수도 있습니다. 하나의 HTML 문서에서 수많은 영역을 사용할 수 있습니다.

<article>: <article> 요소는 웹페이지에서 특정한 정보를 전달하는 특정 부분을 나타냅니다. 이러한 정보는 텍스트, 이미지, 동영상, 삽입(임베드)의 조합이 될 수도 있습니다. 다른 블로그 포스트들을 인용한 페이지의 독립적인 블로그 포스트로 보시면 됩니다.

<aside>: 이름에서 알 수 있듯이 이 요소는 웹페이지의 사이드바를 나타냅니다. 보통 메인 콘텐츠와 직접적인 관련이 없는 웹페이지의 일부입니다.

<footer>: <footer> 요소는 바로가기 링크, 저작권 정보 또는 전체 웹사이트나 웹페이지와 관련된 기타 데이터 같은 항목을 포함합니다.

시맨틱 요소는 실제 의미와 일부 특정 콘텐츠가 실제로 수행하는 작업(예: 내비게이션에는 nav, 사이드바에는 aside)을 전달하므로, 이러한 요소는 해당 위치에 자동으로 배치되지는 않는다는 사실을 알아두십시오. CSS로 그 작업을 해야 합니다.

아주 단순한 시맨틱 HTML 문서는 아래와 같습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Definition of HTML</title>
  </head>

  <body>
    <header>
      <h1 class="logo">LOGO</h1>
      <nav>
        <ul>
          <li>Home</li>
          <li>About</li>
          <li>Contact</li>
          <li>FAQs</li>
        </ul>
      </nav>
    </header>
    <main>
      <section class="about-me">
        <article>
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Optio magni
          est asperiores nemo, adipisci minus itaque quam, rem libero aliquam
          nesciunt, nisi inventore assumenda earum repellat labore ratione
          architecto eos quis. Soluta mollitia cupiditate dolorem. Consequatur a
          soluta laudantium nihil. Molestias, officiis ut! Nobis adipisci
          voluptatem quam at officia beatae!
        </article>
      </section>
      <section class="contact-me">
        You can find me on
        <a href="https://twitter.com/koladechris">Twitter</a> You can find me on
        <a href="https://Instagram.com/koladechris">Instagram</a>
      </section>
      <aside class="address">My Address</aside>
    </main>
    <footer>© 2020 All Rights Reserved</footer>
  </body>
</html>

브라우저에서는 이렇게 보입니다.

시맨틱 HTML-4

<aside> 태그 내부의 콘텐츠는 사이드바에 없고 <nav> 태그 내부의 콘텐츠는 자동으로 내비게이션바(navigation bar)로 사용되지 않는 사실을 알 수 있을 겁니다. 의도한 대로 보이도록 하기 위해서는 CSS를 사용해야 하는 이유가 바로 이 때문입니다.

결론

이 글이 HTML의 기본과 기능을 이해하는 데 도움이 되었기를 바랍니다. 이제 CSS와 자바스크립트와 같은 고급 기술을 배우고, 웹 개발자로서 탄탄한 경력을 쌓으실 수 있을 겁니다.

읽어 주셔서 대단히 감사합니다. 즐거운 하루 보내세요.

]]> <![CDATA[ 기본 HTML5 템플릿: 모든 웹 개발 프로젝트를 할때, HTML 보일러플레이트로 시작하세요. ]]> 보일러 플레이트 코드 또는 그냥 보일러 플레이트는 거의 변하지 않는 여러 곳에서 관습적으로 반복되어 사용되는 ]]> https://www.freecodecamp.org/korean/news/basic-html5-template-boilerplate-code-example/ 645ef85b670e16066f8f2a29 Tue, 16 May 2023 06:48:57 +0000 기사 원문: Basic HTML5 Template: Use This HTML Boilerplate as a Starter for Any Web Dev Project

새 웹페이지를 만들 때, 좋은 기반을 갖고 시작하는 것은 매우 중요합니다.
이 아티클에서는 HTML5 보일러 플레이트가 무엇인지 또 어떻게 기본 템플릿을 프로젝트에 사용하는 것에 대하여 설명합니다.

HTML5 보일러 플레이트란 무엇인가요?

Wikipedia 에 따르면,

보일러 플레이트 코드 또는 그냥 보일러 플레이트는 거의 변하지 않는 여러 곳에서 관습적으로 반복되어 사용되는 코드의 부분을 말합니다.
HTML 템플릿의 보일러 플레이트는 프로젝트를 시작할 때 추가할 템플릿입니다.
모든 HTML 페이지에 보일러 플레이트를 넣어야 합니다.

HTML5 보일러 플레이트의 예시

기본 예제를 봅시다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML 5 Boilerplate</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
	<script src="index.js"></script>
  </body>
</html>

HTML 안의 doctype는 무엇인가요?

HTML코드의 첫 번째 줄은 doctype 선언이어야 합니다.
doctype은 브라우저에 HTML이 어떤 버전인지 알려줍니다.

<!DOCTYPE html>

만약 당신의 파일에 이 코드 라인을 넣는 것을 잊어버리면, <article> , <footer>, and <header> 같은 HTML5 태그 중 일부는 브라우저에서 지원을 하지 못합니다.

HTML 기본(root) 요소는 무엇인가요?

<html> 태그는 HTML파일의 최상위 요소입니다. <html> 안에 <head>태그와 <body>가 포함되어 있습니다.

<!DOCTYPE html>
<html lang="en">
  <head></head>
  <body></body>
</html>

<html> 태그 안에 있는 lang 속성은 페이지의 언어를 설정합니다.
화면 리더기가 올바르게 발음하는 방법을 알 수 있고 접근성을 위해서도 lang 속성을 포함하는 것이 좋습니다.

HTML의 head 태그란 무엇인가요?

<head> 태그에는 기계가 처리할 수 있는 정보가 포함되어 있습니다.
<head> 태그 안에는 기계가 문서를 설명할 수 있는 메타데이터가 포함되어 있습니다.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML 5 Boilerplate</title>
    <link rel="stylesheet" href="style.css">
</head>

UTF-8 문자 인코딩이란 무엇인가요?

UTF-8은 웹페이지에서 사용하는 표준 문자 인코딩을 말합니다.
보통 이 <meta>태그는 <head>요소의 첫 번째에 있습니다.

<meta charset="UTF-8">

월드 와이드 웹 컨소시엄(World Wide Web Consortium(W3C)에 따르면,

UTF-8과 같은 유니코드 기반 인코딩은 다양한 언어를 지원할 수 있으며 언어가 혼합된 페이지와 서식을 처리할 수 있습니다.
또한 각 페이지 또는 수신되는 서식 제출에 대한 문자 인코딩을 개별적으로 결정하기 위해 서버 로직(server-side logic)을 사용할 필요가 없습니다.

HTML의 뷰포트 메타 태그란 무엇인가요?

이 태그는 페이지의 너비를 기기의 화면 크기의 너비에 맞게 렌더링합니다.
너비가 600픽셀인 모바일 기기를 사용하는 경우 브라우저 창도 너비가 600픽셀이 됩니다.
초기 배율은 확대/축소의 크기 배율을 조절합니다. 초기 배율을 1로 설정하면 브라우저의 기본 확대/축소를 방지할 수 있습니다.

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

X-UA-호환(X-UA-Compatible)은 무엇인가요?

이 <meta>태그는 인터넷 익스플로러의 문서모드를 지정합니다.
IE=edge 가 가장 많이 지원되는 모드입니다.

<meta http-equiv="X-UA-Compatible" content="ie=edge">

HTML의 타이틀(<title>) 태그란 무엇인가요?

<title>태그는 웹페이지의 타이틀을 말합니다. 이 태그의 값은 브라우저의 타이틀 바의 글귀를 바꿔줍니다.

    <title>HTML 5 Boilerplate</title>

Screen-Shot-2021-07-30-at-4.15.25-AM

CSS 스타일시트

이 코드는 사용자가 정의한 CSS를 HTML 페이지에 링크합니다 rel="stylesheet"는 HTML 파일과 외부 스타일 시트의 관계를 정의합니다.

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

HTML의 스크립트 태그란 무엇인가요?

스크립트<script> 태그는 <body> 태그 바로 앞에 배치됩니다. 여기에 외부 자바스크립트 코드를 링크할 수 있습니다.

	<script src="index.js"></script>

결론

모든 HTML 페이지에 HTML 5 보일러 플레이트를 추가해야 합니다.
이 시작 코드에는 문서 유형(doctype), 메타데이터, 외부 스타일 시트 및 스크립트 태그와 같은 중요한 정보가 포함되어 있습니다.

]]> <![CDATA[ HTML 폼 - 입력 유형과 제출 버튼 예제 ]]> https://www.freecodecamp.org/korean/news/html-form-input-type-and-submit-button-example/ 64565575fc175c06725394f0 Fri, 05 May 2023 13:33:00 +0000 기사 원문: HTML Form – Input Type and Submit Button Example

폼은 웹에서 가장 중요한 부분 중 하나입니다. 데이터를 수집하고 리소스를 검색하거나 중요한 정보를 받기 위해 회원가입 하는 경우 폼을 이용하면 가장 쉽습니다.

여러분은 HTML form 요소를 사용해 웹사이트에 폼을 포함할 수 있습니다. 폼 요소 내부에는 여러 가지 입력이 중첩되어 있습니다. 이러한 입력들은 폼 컨트롤이라고도 합니다.

이 튜토리얼에서는 HTML 폼 요소, 다양한 입력 유형 및 데이터를 제출하는 제출 버튼을 만드는 방법에 관해 설명합니다.

마지막에는 폼이 어떻게 작동하는지 알게 되고 자신있게 폼을 만들 수 있을 것입니다.

기본 HTML 폼 구문

<form action="mywebsite.com" method="POST">
    <!--Input of any type and textareas goes in here-->
</form>

기본 HTML 폼 입력 유형

HTML에서 다양한 폼 컨트롤을 만들기 위해 input 태그를 사용합니다. 이 태그는 인라인 요소이며 type, name,minLength,maxLength,placeHolder 등과 같은 속성을 사용합니다. 이렇게 각각의 속성에는 사용하는 특정한 값을 가집니다.

placeHolder 속성의 경우, 사용자가 항목을 입력하기 전에 입력 필드의 목적을 이해하는 데 도움이 되므로 중요합니다.

그럼, 입력 유형은 20가지가 있으며 하나씩 살펴보겠습니다.

텍스트 유형

이 유형의 입력은 "text" 값을 사용하며, 한 줄의 텍스트 입력을 만듭니다.

<input type="text" placeholder="Enter name" />

텍스트 유형의 입력은 아래 스크린샷과 같습니다:

텍스트 유형 이미지

비밀번호 유형

이름에서 알 수 있듯이, 이 유형을 입력하면 비밀번호가 생성됩니다. 그리고 자바스크립트로 조작하지 않는 한, 사용자가 자동으로 입력값을 볼 수 없습니다.

<input type="password" placeholder="Enter your password" />

비밀번호 유형 이미지

이메일 유형

이메일 유형의 모든 입력은 이메일 주소를 입력하기 위한 필드를 정의합니다.

<input type="email" placeholder="Enter your email" />

이메일 유형 이미지

숫자 유형

이 입력 유형을 사용하면 숫자만 입력할 수 있습니다.

<input type="number" placeholder="Enter a number" />

숫자 유형 이미지

라디오 유형

때에 따라 사용자는 다양한 옵션 중 하나를 선택해야 합니다. 유형 속성이 "radio"로 설정된 입력 필드를 사용하면 이 작업을 수행할 수 있습니다.

<input type="radio" />

라디오 유형 이미지

체크박스 유형

앞서 언급했다시피, 라디오 입력 유형을 통해 사용자는 다양한 옵션 중 하나를 선택할 수 있습니다. 하지만 다양한 옵션을 선택하고자 한다면 어떻게 해야 할까요? 이때, checkbox유형 속성을 사용하면 됩니다.

<input type="checkbox" />

체크박스 유형 이미지

제출 유형

이 유형을 사용하여 폼에 제출 버튼을 추가합니다. 사용자가 버튼을 클릭하면, 폼이 자동으로 제출됩니다. 값 속성을 사용해 버튼 안의 텍스트를 정의합니다.

<input type="submit" value="Enter to Win" />

제출 유형 이미지

버튼 유형

버튼으로 설정된 유형의 입력은 자바스크립트의 onClick 이벤트 리스너 유형으로 조작할 수 있는 버튼을 만듭니다. 기본적으로 이 유형은 값이 비어 있으므로 값을 지정해야 한다는 점을 제외하고는 제출 입력 유형과 동일한 버튼을 만듭니다.

<input type="button" value="Submit" />

버튼 유형 이미지

파일 유형

이 유형은 파일 제출을 위한 필드를 정의합니다. 사용자가 클릭하면, 원하는 파일 형식(이미지, PDF, 문서 파일 등)을 삽입하라는 메시지가 나타납니다.

<input type="file" />

파일 입력 유형의 결과는 다음과 같습니다:

파일 유형 이미지

색상 유형

이는 HTML5에서 소개된 화려한 입력 유형입니다. 예를 들어, 사용자는 자신이 가장 좋아하는 색상을 제출할 수 있습니다. 검은색(#000000)이 기본값이지만, 원하는 색의 값으로 재정의할 수 있습니다.

많은 개발자가 RGB, HSL 및 영숫자 형식으로 사용할 수 있는 다양한 색조를 선택하기 위한 속임수로 이 기능을 사용합니다.

<input type="color" />

색 입력 유형의 결과는 다음과 같습니다.

색상 유형 이미지

검색 유형

검색 유형이 있는 입력은 텍스트 입력 유형과 마찬가지로 텍스트 필드를 정의합니다. 하지만 이 유형은 정보를 검색하는 것일 유일한 목적입니다. 사용자가 입력을 시작하면 취소 버튼이 나타난다는 점에서 텍스트 유형과 다릅니다.

<input type="search" />

검색 유형 이미지

URL 유형

입력 태그의 유형 속성을 URL로 설정하면, 사용자가 URL을 입력할 수 있는 필드가 표시됩니다.

<input type="url" />

URL 유형 이미지

전화 유형

전화 유형을 사용하여 사용자로부터 전화번호를 수집할 수 있습니다.

<input type="tel" />

전화 유형 이미지

날짜 유형

당신은 특정 이벤트의 날짜를 요청한 웹사이트에 등록한 적이 있을 겁니다. 그 웹사이트에서 이 값을 얻기 위해 날짜로 설정된 유형 값이 있는 입력을 사용했을 것입니다.

<input type="date" />

날짜 유형이 있는 입력은 다음과 같습니다:

날짜 유형 이미지

Datetile-local 유형

이 입력 유형은 날짜 유형처럼 작동하지만, 사용자가 특정 시간의 날짜를 선택할 수도 있습니다.

<input type="datetime-local" />

datetile-local 유형 이미지

주 유형

이 입력 유형을 사용하면 특정 주를 선택할 수 있습니다.

<input type="week" />

주 유형 이미지

월 유형

월 유형의 입력은 사용자가 클릭했을 때 선택할 수 있는 월을 채웁니다.

<input type="month" />

월 유형 이미지

텍스트 영역

사용자가 텍스트 입력 유형에 적합하지 않은 여러 줄의 텍스트를 입력해야 하는 경우가 있습니다(텍스트 입력 유형은 한 줄 텍스트 필드를 지정하기 때문에).

텍스트 영역을 사용해 여러 줄의 텍스트 입력을 정의할 때 이 작업을 수행할 수 있습니다. 텍스트 영역의 고유한 속성으로, 행 수에 대해 cols, 열 수에 대해 rows가 있습니다.

<textarea cols="50" rows="20"></textarea>

텍스트 영역 유형 이미지

다중 선택 박스

smoothjjuu marked this conversation as resolved.

이것은 하나의 패키지에 라디오 버튼과 체크박스가 있는 것과 같습니다. 선택 요소와 옵션의 두 가지 요소가 페이지에 포함돼 있으며, 옵션은 항상 선택 요소 내부에 중첩되어 있습니다.

기본적으로 사용자는 옵션 중 하나만 선택할 수 있습니다. 그러나 여러 속성을 사용하면, 사용자가 둘 이상의 옵션을 선택할 수 있습니다.

<select>
      <option value="HTML">Select a Language</option>
      <option value="HTML">HTML</option>
      <option value="CSS">CSS</option>
      <option value="JavaScript">JavaScript</option>
      <option value="React">React</option>
</select>

다중 선택 박스 이미지

HTML 입력에 레이블 지정 방법

폼 컨트롤에 레이블을 할당하는 것은 중요합니다. for와 id 속성을 통해 입력 필드에 올바르게 연결되면, 사용자가 레이블 자체를 클릭해 입력에 접근할 수 있으므로 사용하기가 더 쉽습니다.

<label for="name">Name</label>
<input type="text" id="name" /> <br />
<label for="check">Agree with terms</label>
<input type="checkbox" id="check" />

레이블 데모 GIF

HTML 폼 작동 방법

사용자가 폼을 작성하고 제출 버튼으로 제출하면, 폼 컨트롤의 데이터가 GET 또는 POST HTTP 요청 메소드를 통해 서버로 전송됩니다.

그럼, 서버에 어떻게 표시될까요? 폼 요소는 서버의 URL에 지정해야 하는 액션 속성을 사용합니다. 또한, 서버에 값을 전달하는 데 사용하는 지정된 HTTP 메소드 속성도 사용합니다.

이 메소드는 GET 혹은 POST가 될 수 있습니다. GET 메소드를 사용해, 데이터가 제출되면 사용자가 입력한 값이 URL에 표시됩니다. 그러나 POST를 사용하면, 값이 HTTP 해더에 전송되므로 해당 값이 URL에 표시되지 않습니다.

만약 메소드 속성이 폼에서 사용되지 않으면, 자동으로 디폴트인 GET 메소드를 사용하려는 것으로 간주합니다.

그렇다면 언제 GET 혹은 POST 메소드를 사용해야 할까요? 중요하지 않은 데이터를 제출하거나, 서버에서 데이터를 검색하려면 GET 메소드를 사용합니다. 중요한 데이터나 파일을 제출할 때는 POST 요청을 사용합니다.

미니 프로젝트: 기본 연락처 폼 만들기

이제 폼에 대해 배운 내용을 가지고 간단한 연락처 폼을 만들어 보겠습니다. 그리고 이 모든 것을 정리하면서 몇 가지 새로운 개념을 소개하겠습니다.

HTML 코드는 아래와 같습니다:

<form action="example-server.com">
      <fieldset>
        <legend>Contact me</legend>
        <div class="form-control">
          <label for="name">Name</label>
          <input type="name" id="name" placeholder="Enter your name" required />
        </div>

        <div class="form-control">
          <label for="email">Email</label>
          <input
            type="email"
            id="email"
            placeholder="Enter your email"
            required
          />
        </div>

        <div class="form-control">
          <label for="message">Message</label>
          <textarea
            id="message"
            cols="30"
            rows="10"
            placeholder="Enter your message"
            required
          ></textarea>
        </div>
        <input type="submit" value="Send" class="submit-btn" />
      </fieldset>
</form>

HTML 코드에서 무슨 일이 일어나고 있습니까?

첫째, 폼 요소는 다른 모든 요소를 감쌉니다. 폼 데이터를 수신할 더미 서버인 "example-server.com"으로 설정된 액션이 있습니다.

폼 요소 다음, 다른 모든 요소도 바로 아래에 legend 태그가 있는 fieldset 요소로 둘러싸여 있습니다.

fieldset 요소를 사용해 관련 입력을 그룹화하고, legend 태그에는 폼이 무엇에 관한 것인지를 전달하는 캡션이 포함되어 있습니다.

name, email 그리고 textarea 입력 모두 폼 컨트롤 클래스가 있는 div에 있습니다. 따라서 CSS로 스타일링을 쉽게 하기 위해 블록 요소처럼 작동합니다.

또한 필수 속성으로 검증되므로, 해당 필드가 비어 있거나 사용자가 적절한 형식으로 값을 입력하지 못하면 양식이 제출되지 않습니다.

결과는 아래 스크린샷에서 확인할 수 있습니다:

HTML 스크린샷 이미지

스타일링 없는 HTML은 너무 안 예쁘네요. 그럼, 이제 스타일링을 적용해 보겠습니다!

CSS는 아래와 같습니다:

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    font-family: cursive;
  }
 input,
    textarea {
    width: 100%;
    padding: 5px;
    outline: none;
  }
  label {
    line-height: 1.9rem;
  }
  input[type="submit"] {
   transform: translate(2.2%);
   padding: 3px;
   margin-top: 0.6rem;
   font-family: cursive;
   font-weight: bold;
  }
 fieldset {
   padding: 20px 40px;
 }

CSS 코드 분석하기

Flexbox를 이용해 body의 모든 것을 수평으로, 뷰포트 높이를 100% 수직으로 중앙에 배치합니다. 그리고 font-family로 cursive 폰트를 사용했습니다.

입력과 텍스트 영역을 100% 너비로 지정해 모든 영역을 가로지르게 했습니다. 레이블은 최소 line-height로 1.9 rem(30.4px)으로 각각의 입력에 너무 가깝게 유지되지 않도록 헸습니다.

버튼(입력 타입 버튼)을 transform 속성으로 스타일을 지정해, 중앙에서 약간 벗어난 것처럼 중앙으로 밀어 넣었습니다. 3px의 padding을 주어 더 많은 간격을 두었고, font-family로 cursive를 font-weight는 bold로 굵게 선택했습니다.

버튼이 textarea에 너무 가깝기 때문에, margin-top을 0.6 rem으로 설정해 약간 아래로 밀었습니다.

fieldset 요소에 위쪽과 아래쪽에 20px의 padding을 지정했으며, 왼쪽과 오른쪽에 40px를 주어 감싸고 있는 폼 요소 주위에 생성된 테두리를 밀어냅니다.

결국에는 아래와 같은 아름다운 형태를 보이게 됩니다.

최종 폼 스크린샷

결론

이 튜토리얼이 폼이 어떻게 작동하는지를 이해하는 데 도움이 됐기를 바랍니다. 이제 이 글을 완독한 당신은 웹사이트에 데이터 수집을 시작할 수 있는 폼에 대한 지식을 갖췄습니다.

그럼 읽어주셔서 감사합니다. 즐거운 코딩 하세요.

]]> <![CDATA[ HTML Select 태그: 드롭다운 메뉴 또는 콤보 리스트를 만드는 방법 ]]> 에서 코드화됩니다. 또한 독립적인 요소로도 쓸 수 있는데, 이 요소는 여전히 특수 속성 중 하나인 form과 ]]> https://www.freecodecamp.org/korean/news/html-select-taegeu-deurobdaun-menyu-ddoneun-kombo-riseuteureul-mandeuneun-bangbeob/ 63d0cfb87a7b73070e7971ea Thu, 26 Jan 2023 08:15:45 +0000 기사 원문: HTML Select Tag – How to Make a Dropdown Menu or Combo List

1
여러분은 사용자가 원하는 값을 선택할 수 있도록 HTML select 태그를 이용해서 드롭다운 메뉴를 만듭니다. 이는 서버로 전송할 데이터를 수집하는 데 중요한 기능입니다.

select 태그는 보통 form 요소 안에 들어가며, 선택 항목은 또 다른 태그인 <option>에서 코드화됩니다. 또한 독립적인 요소로도 쓸 수 있는데, 이 요소는 여전히 특수 속성 중 하나인 form과 연관되어 있습니다.

이 튜토리얼에서는 select 태그로 여러분의 코딩 프로젝트에서 데이터를 수집할 수 있게 드롭다운 메뉴를 만드는 방법을 알려드립니다. select 태그는 스타일링이 어렵기로 악명이 높기 때문에 스타일링하는 방법도 가르쳐드릴 겁니다.

Select 태그의 속성

select 태그로 드롭다운 메뉴를 만드는 방법을 자세히 살펴보기 전에, select 태그가 가진 속성들에 대해 알아봐야 합니다.

속성은 다음과 같습니다.

  • name: 데이터가 서버에 제출된 후 데이터를 참조하는 데 사용되므로 모든 form 컨트롤에 name을 넣어야 합니다.
  • multiple: 이 속성은 사용자가 드롭다운 메뉴에서 여러 옵션을 선택할 수 있도록 합니다.
  • required: 이 속성은 일반적으로 유효성 검사를 위해 사용됩니다. 이 속성을 통해, 사용자가 드롭다운 메뉴에서 하나 이상의 옵션을 선택하지 않으면 form이 제출되지 않습니다.
  • disabled: 사용자가 옵션을 선택할 수 없도록 합니다.
  • size: 이 속성은 숫자로 표현되며, 한 번에 표시되는 옵션 수를 정하는데 사용됩니다.
  • autofocus: 이 속성은 페이지가 로드 될 때 포커스가 있어야 할 입력 요소를 지정합니다. select를 포함한 모든 form 요소들에 사용될 수 있습니다.

Select 태그를 사용하여 드롭다운 메뉴를 만드는 방법

select 태그로 드롭다운 메뉴를 만들려면, 먼저 form 요소가 필요합니다. 왜냐하면 서버에 데이터를 제출할 submit 버튼이 form 요소 안에 있기 때문입니다.

<form action="#">
  <label for="lang">Language</label>
  <select name="languages" id="lang">
    <option value="javascript">JavaScript</option>
    <option value="php">PHP</option>
    <option value="java">Java</option>
    <option value="golang">Golang</option>
    <option value="python">Python</option>
    <option value="c#">C#</option>
    <option value="C++">C++</option>
    <option value="erlang">Erlang</option>
  </select>
  <input type="submit" value="Submit" />
</form>

드롭다운과 버튼을 중앙에 놓고, body에 밝은 회색 배경을 주기 위해 몇 가지 간단한 CSS를 추가했습니다.

body {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  height: 100vh;
  background-color: #f1f1f1;
}
input {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

접근성을 높이기 위해서, select 박스를 label 요소에 붙일 수도 있습니다. 그러면 label 텍스트가 클릭 될 때 포커스가 됩니다.

아래의 코드와 같이 하실 수 있습니다.

<form action="#">
  <label for="lang">Language</label>
  <select name="languages" id="lang">
    <option value="javascript">JavaScript</option>
    <option value="php">PHP</option>
    <option value="java">Java</option>
    <option value="golang">Golang</option>
    <option value="python">Python</option>
    <option value="c#">C#</option>
    <option value="C++">C++</option>
    <option value="erlang">Erlang</option>
  </select>
  <input type="submit" value="Submit" />
</form>

저는 action 속성의 값으로 숫자 기호(#)를 넣었습니다. 이렇게 하면 submit 버튼을 눌렀을 때 404 에러가 나오지 않습니다.

하지만 이제 CSS를 약간 수정 해야 합니다.

body {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  height: 100vh;
  background-color: #f1f1f1;
}
input {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
label {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
select {
  margin-bottom: 10px;
  margin-top: 10px;
}

마침내, 결과가 나왔습니다.

회색 배경에 있는 드롭다운 요소가 작동하는 모습

저기서 끝이 아닙니다. 드롭다운 항목 중 하나가 기본값으로 보이고 있으며, 페이지에 도착한 사용자가 그냥 submit 버튼을 누른다면 바로 이 항목이 선택될 겁니다.

하지만 이건 좋은 사용자 경험이 아닙니다. 여러분은 드롭다운의 첫 번째를 “select a language”로 코딩해서 이를 방지할 수 있습니다.

<form action="#">
  <label for="lang">Language</label>
  <select name="languages" id="lang">
    <option value="select">Select a language</option>
    <option value="javascript">JavaScript</option>
    <option value="php">PHP</option>
    <option value="java">Java</option>
    <option value="golang">Golang</option>
    <option value="python">Python</option>
    <option value="c#">C#</option>
    <option value="C++">C++</option>
    <option value="erlang">Erlang</option>
  </select>
  <input type="submit" value="Submit" />
</form>

사용자가 select 박스를 클릭하여 항목을 선택할 때, 드롭다운이 submit 버튼도 가립니다- 좋은 사용자 환경에 부정적인 영향을 미치는 또 다른 요소입니다.

여러분은 크기 속성으로 이 부분을 바꿀 수 있습니다. 이 속성은 기본적으로 특정 항목의 개수를 보여주고 드롭다운의 다른 항목들을 위해 스크롤을 보여줄 겁니다.

또한 일부 항목들은 사용자들에게 자동으로 보여지기 때문에 가짜 첫 번째 항목을 제거할 수 있도록 해줍니다.

<form action="#">
  <label for="lang">Language</label>
  <select name="languages" id="lang" size="4">
    <option value="javascript">JavaScript</option>
    <option value="php">PHP</option>
    <option value="java">Java</option>
    <option value="golang">Golang</option>
    <option value="python">Python</option>
    <option value="c#">C#</option>
    <option value="C++">C++</option>
    <option value="erlang">Erlang</option>
  </select>
  <input type="submit" value="Submit" />
</form>

드롭다운에 스크롤이 작동하는 모습

multiple 속성으로 사용자가 드롭다운 메뉴에서 여러 항목을 선택할 수 있도록 할 수 있습니다.

<form action="#">
  <label for="lang">Language</label>
  <select name="languages" id="lang" multiple>
    <option value="javascript">JavaScript</option>
    <option value="php">PHP</option>
    <option value="java">Java</option>
    <option value="golang">Golang</option>
    <option value="python">Python</option>
    <option value="c#">C#</option>
    <option value="C++">C++</option>
    <option value="erlang">Erlang</option>
  </select>
  <input type="submit" value="Submit" />
</form>

이렇게 하면 기본적으로 4개의 항목이 표시됩니다. 여러 항목을 선택하기 위해서는 사용자가 Shift 또는 Ctrl 키를 누른 상태에서 마우스로 선택해야 합니다.

스크롤이 있는 드롭다운에서 여러 항목을 동시에 선택하는 모습

select와 <option> 태그로 할 수 있는 작업은 이뿐만이 아닙니다. <select> 태그 안에 <optgroup> 요소를 넣어 다층 선택 박스도 만들 수 있습니다.

이미 만든 드롭다운을 다음과 같이 다층 선택 상자로 변환할 수 있습니다.

<form action="#">
  <label for="lang">Language</label>
  <select name="languages" id="lang">
    <optgroup label="first-choice">
      <option value="select">Select a language</option>
      <option value="javascript">JavaScript</option>
      <option value="php">PHP</option>
      <option value="java">Java</option>
      <option value="golang">Golang</option>
    </optgroup>
    <optgroup label="second-choice">
      <option value="python">Python</option>
      <option value="c#">C#</option>
      <option value="C++">C++</option>
      <option value="erlang">Erlang</option>
    </optgroup>
  </select>
  <input type="submit" value="Submit" />
</form>

다층선택 요소가 있는 드롭다운 메뉴

Select 요소 스타일 하는 방법

select 요소를 스타일링하는 건 가끔 혼란스럽고 브라우저 안에서 일관성이 없게 만듭니다. 그러나 언제든 다음처럼 시도해볼 수 있습니다:

<form action="#">
  <label for="lang">Language</label>
  <select name="languages" id="lang">
    <option value="select">Select a Language</option>
    <option value="javascript">JavaScript</option>
    <option value="php">PHP</option>
    <option value="java">Java</option>
    <option value="golang">Golang</option>
    <option value="python">Python</option>
    <option value="c#">C#</option>
    <option value="C++">C++</option>
    <option value="erlang">Erlang</option>
  </select>
  <input type="submit" value="Submit" />
</form>

select {
  margin-bottom: 10px;
  margin-top: 10px;
  font-family: cursive, sans-serif;
  outline: 0;
  background: #2ecc71;
  color: #fff;
  border: 1px solid crimson;
  padding: 4px;
  border-radius: 9px;
}

저는 위의 CSS 코드에서 select 박스의 텍스트에 다음과 같은 모습을 주었습니다.

  • cursive 글꼴과 white 글자 색,
  • 포커스 될 때 생기는 못생긴 아웃라인을 없애기 위해 outline에 0,
  • 초록빛을 띤 배경,
  • 1 px 두께의 진홍색 테두리,
  • 모든 면의 약간 둥근 테두리를 위한 border-radius 4 px,
  • 그리고 약간의 공백을 위한 padding 4 px.

이제 select 박스가 훨씬 나아 보이네요.

초록빛 배경의 둥근 테두리를 가진 드롭박스에서 메뉴를 선택하는 모습

결론

select 태그는 HTML 안에 드롭다운과 콤보 리스트를 만들 때 정말 유용해요. 마치 라디오 버튼과 체크 박스가 하나의 패키지에 들어있는 거 같아요.

라디오 버튼으로는 리스트에서 하나의 항목만 선택할 수 있다는 거 기억하세요 - 그런데 체크박스로는 여러 항목을 선택할 수 있답니다. select는 하나의 항목 또는 여러 항목을 선택할 수 있게 설정할 수 있어 더 유연해요.

select 태그의 단 한 가지 문제점은 스타일링 하기가 무척 까다롭다는 거예요. 합리적인 해결방안은 훌륭한 유틸리티 클래스를 제공 select 요소와 form을 스타일링 할 수 있게 해주는 CSS 라이브러리를 사용하는 거예요.

이 튜토리얼을 통해 select 태그가 익숙해져 여러분의 프로젝트에 사용할 수 있기를 바라요.

읽어주셔서 감사하고 코딩 계속해주세요!

]]> <![CDATA[ HTML 폰트 크기 - CSS 인라인 스타일을 이용해서 폰트 크기를 변경하는 방법 ]]> https://www.freecodecamp.org/korean/news/html-ponteu-keugi-css-inrain-seutaileul-iyonghaeseo-ponteu-keugireul-byeongyeonghaneun-bangbeob/ 638009874d426206f9a4fd62 Wed, 07 Dec 2022 07:03:29 +0000 기사 원문: HTML Font Size – How to Change Text Size Using Inline CSS Style

HTML의 폰트는 웹 페이지의 모양과 전체적인 분위기에 있어서 중요한 역할을 합니다.

여러분은 폰트의 색상, 굵기, 크기 등을 고를 수 있습니다.
그리고 이 기능들은 여러분의 웹사이트와 앱을 더 나아 보이게 하고 유저에게 더 잘 받아들여지게 할 것입니다.
CSS에서 font-size 속성을 사용하여 웹 페이지에서 글자 크기를 크게 또는 작게 변경할 수 있습니다. 또한 외부 스타일, 내부 스타일, 또는 인라인 스타일 등 어떤 종류의 CSS에서도 font-size 속성을 사용할 수 있습니다.

인라인 CSS란 무엇일까요?

인라인 CSS는 HTML 요소를 스타일링하는 데 사용할 수 있는 세 가지 방법 중 하나입니다.

class나 id를 속성값으로 가진 요소를 선택하거나, 요소 자체를 선택자로 정의해서 스타일링을 적용하는 대신에, 모든 CSS 스타일들을 열린 태그에 넣는 것을 말합니다.

더불어 모든 스타일링 속성 값들은 style 속성 안에 들어가야 합니다. style 속성은 모든 HTML 태그에서 허용하는 수많은 속성 중 하나입니다.

아래 예제에서 저는 인라인 CSS를 사용하여 글자의 배경 색을 진홍색으로, 글자 색을 #f1f1f1 (연회색)으로, 그리고 글자 굵기는 bold로 변경했습니다.

<p style="background-color: crimson; color: #f1f1f1; font-weight: bold">
  Hello Campers...
</p>

폰트 컬러 예시 이미지

그나저나, 모든 것이 크게 보이는 이유는 제 브라우저가 400% 확대되어 있기 때문입니다. 저는 어떠한 추가 스타일링도 하지 않았습니다 :)

인라인 CSS를 사용하여 폰트 사이즈를 변경하는 방법

인라인 CSS에서 폰트 사이즈를 변경하기 위해서는, style 속성 값을 사용해야 합니다. font-size속성을 입력한 다음, 값을 지정합니다.

내장 값들로는 large, larger, medium, small, x-large 등이 있습니다.

스타일 속성값 이미지

아래의 코드에서, 저는 “Hello Campers…” 글자 크기를 font-size속성의 내장 값 중 하나인 x-large로 변경했습니다.

<p style="font-size: x-large">Hello Campers...</p>

버튼 이미지

또한 픽셀(px), rem 혹은 em과 같은 단위와 숫자를 함께 사용하여 font-size 속성의 값을 설정할 수도 있습니다.

숫자 값을 사용하면 원하는 폰트 크기를 자유롭게 선택할 수 있으므로 숫자 값을 사용하는 것이 좋습니다.

아래의 코드에서, 저는 인라인 CSS를 사용하여 글자 크기를 30px로 변경했습니다.

<p style="font-size: 30px">Hello Campers...</p>

버튼 이미지

결론

이 글에서 인라인 CSS를 사용하여 폰트 크기를 변경하는 방법과 font-size의 속성에 대해서 배웠습니다.

하지만 참고로 말하자면, 인라인 CSS는 스타일링에는 좋지만 여러분이 팀으로 일하고 있는 경우라면 HTML 코드를 읽기 어렵게 만들 수도 있습니다. 그래서 인라인 CSS 스타일링에 너무 의지해서는 안 됩니다. 여러분이 쓴 코드를 이해할 수 있는 사람이 오직 여러분 혼자이기를 원하지는 않을 테니까요.

또한 인라인 스타일은 내부 스타일과 외부 스타일보다 우선시 되어 코드를 덮어쓴다는 것에 주의하세요. 가독성을 위해서 HTML과 CSS 코드가 분리되는 외부 스타일이나 내부 스타일을 대신 사용해야 합니다.

font-size속성에 값을 할당할 때에는 px 대신 rem 단위를 사용하는 것이 좋습니다. rem을 사용하면 사용자가 화면을 확대하거나 축소할 때 브라우저가 글자 크기를 조정할 수 있는 데에 반해, px을 사용하면 그럴 수 없기 때문입니다.

읽어주셔서 감사합니다. 계속해서 코딩하세요.

]]> <![CDATA[ HTML을 사용해 새 탭에서 링크를 여는 방법 ]]> 앵커 요소 웹 페이지에 하이퍼링크를 생성하려면 텍스트 혹은 이미지 같은 요소를 앵커 ]]> https://www.freecodecamp.org/korean/news/how-to-use-html-to-open-link-in-new-tab/ 62de399eb9e7840586028fe0 Thu, 28 Jul 2022 04:52:32 +0000 기사 원문: How to Use HTML to Open a Link in a New Tab

브라우저 탭은 참 유용합니다. 탭은 여러 개의 온라인 작업을 동시에 수행하고 멀티태스킹하는 걸 가능하게 합니다.

탭은 이제 매우 보편화되어서 링크를 클릭하면 새 탭에서 열릴 가능성이 높습니다.

새 탭에서 링크를 열도록 하는 방법이 궁금하시다면 이 기사를 계속 읽어보시길 바랍니다!

<a>앵커 요소

웹 페이지에 하이퍼링크를 생성하려면 텍스트 혹은 이미지 같은 요소를 앵커 요소(<a>)로 감싸고 연결하고 싶은 URL을 href 속성에 설정해야 합니다.

<p>Check out <a href="https://www.freecodecamp.org/">freeCodeCamp</a>.</p>

Check out freeCodeCamp.

위의 링크를 클릭하면 브라우저가 현재 창 또는 현재 탭에서 링크를 엽니다. 이것은 모든 브라우저의 기본 동작입니다.

새 탭에서 링크를 열려면 앵커 요소의 다른 속성을 살펴봐야 합니다.

Target 속성

이 속성은 브라우저가 하이퍼링크를 어떻게 열지를 설정합니다.

새 탭에서 링크를 열도록 하려면, target 속성을 _blank로 설정합니다.

<p>Check out <a href="https://www.freecodecamp.org/" target="_blank">freeCodeCamp</a>.</p>

이제 다른 사용자가 링크를 클릭하면, 해당 사용자의 브라우저 설정에 따라 새 탭 또는 새 창에서 링크가 열립니다.

target="_blank"의 보안 문제점

target 속성을 사용할 때마다 앵커 요소에 항상 rel="noreferrer noopener" 속성을 적용하는 것을 권장드립니다.

<p>Check out <a href="https://www.freecodecamp.org/" target="_blank" rel="noopener noreferrer">freeCodeCamp</a>.</p>

출력되는 결과물은 다음과 같습니다.

Check out freeCodeCamp.

rel 속성은 현 페이지와 링크된 URL 사이의 관계를 설정합니다. 이를 noopener norefererer로 설정하면 탭내빙으로 알려진 피싱 공격을 막을 수 있습니다.

탭내빙(tabnabbing)은 무엇인가요?

'역 탭내빙(reverse tabnabbing)'이라고도 하는 '탭내빙(tabnabbing)'은 window.object API를 통해 당신의 웹 페이지에 부분적으로 접근하기 위해서 target="_blank"와 브라우저의 기본 동작을 이용하는 취약점 공격(exploit)입니다.

탭내빙을 사용하면, 연결한 페이지로 인해 당신의 페이지가 가짜 로그인 페이지로 재접속될 수 있습니다. 일반적으로 원래 탭이 아니라 방금 열린 탭에 집중하기 때문에 대부분의 사용자가 이 문제를 알아차리지 못합니다. 그런 다음 사용자가 원래 페이지로 다시 돌아오면 당신의 페이지 대신 가짜 로그인 페이지를 보게 될 것이고, 사용자는 가짜 로그인 페이지에 로그인 정보를 입력할지도 모릅니다.

탭내빙이 어떻게 작동하고 악의적인 행위자가 취약점 공격으로 무엇을 할 수 있는지 더 알고 싶다면 Alex Yumashev의 기사와 OWASP의 기사를 확인해 보십시오.

탭내빙의 안전한 적용 예시를 보고 싶다면, 이 페이지와 해당 깃허브 레포를 통해 취약점 공격 및 rel 속성에 대한 자세한 정보를 읽어보시길 바랍니다.

요약

HTML을 사용해 새 탭에서 링크를 여는 것은 매우 쉽습니다. 다음 세 가지 중요한 속성을 가진 앵커(<a>) 요소만 있으면 됩니다:

  1. href 속성을 연결하고 싶은 페이지의 URL로 설정,
  2. 브라우저의 설정에 따라 새 탭 또는 새 창에서 링크를 열도록 target 속성을 _blank로 설정,
  3. 링크한 페이지에서 발생할 수 있는 보안 공격을 방지하기 위해 rel 속성을 noreferrer noopener로 설정해야 합니다.

최종적으로 완성된 예시는 다음과 같습니다.

<p>Check out <a href="https://www.freecodecamp.org/" target="_blank" rel="noopener noreferrer">freeCodeCamp</a>.</p>

그 결과 브라우저에 다음과 같은 출력이 표시됩니다.

Check out freeCodeCamp.

이 기사를 읽어주셔서 감사합니다. 즐겁게 코딩하시길 바랍니다.

]]>