HTML 핵심 개념 문법 한 장 정리 - 링크, 텍스트, 리스트, 폼, 멀티미디어

주석

<!-- 주석처리 -->

 

링크

<a href="mailto:test@example.com">메일 보내기</a>
<a href="tel:+821012340123">전화 걸기</a>

페이지의 특정 부분을 가리키는 주소

팀 버너스리는 "인터넷 사용 자체가 인권"<a href="#note-1">[1]</a>이라고 말했다.
<p id="note-1">[1] 서울디지털포럼 2013 기조연설</p>

target 속성

<!-- 새 창으로 열기 -->
<a href="https://movie.naver.com" target="_blank">네이버 영화</a>

<!-- 현재 창 -->
<a href="https://movie.naver.com" target="_self">네이버 영화</a>

<!-- 내가 원하는 창 -->
<a href="https://movie.naver.com" target="movie">네이버 영화</a>

<!-- 내가 원하는 창 -->
<a href="https://movie.daum.net" target="movie">다음 영화</a>

<!-- 내가 원하는 창 -->
<a href="https://imbd.com" target="movie">imbd</a>

 

텍스트

제목 태그

<h1>한국 영화</h1>
<h2>한국 영화의 역사</h2>
<h3>1950년대: 침체기</h3>
<h4>1960년대: 황금기</h4>
<h5>1970년대: 쇠퇴기</h5>
<h6>1980년대: 암흑기</h6>

본문

<p>
    1950년대에는 한국전쟁이 일어나면서 영화계는 침체를 맞게 됩니다.
    하지만 1950년대 중반을 지나서 그 사이 발전된 기술에 힘입어
    점점 많은 영화가 나오기 시작하더니 1950년대 후반에 들어서는 1년에 100편 가까이 제작되었습니다.
</p>

줄바꿈

1950년대에는 한국전쟁이 일어나면서 영화계는 침체를 맞게 됩니다.<br>
하지만 1950년대 중반을 지나서 그 사이 발전된 기술에 힘입어<br>
점점 많은 영화가 나오기 시작하더니 1950년대 후반에 들어서는 1년에 100편 가까이 제작되었습니다.<br>

중요

<strong>상영 시작 10분 후에는 입장이 제한됨을 알려드립니다.</strong>

강조

제 이름은 윤 <em>여정</em>입니다. 요정도 아니고 유정도 아니고 여정이죠.

취소

<s>단체 관람을 원하시는 분들은 코드잇 홈페이지에서 예약해주세요.</s>

인용

<blockquote>
    또 감사드릴 분이... 저는 경쟁을 싫어합니다. 제가 어떻게 글렌 클로즈를
    이기겠어요? 저는 그녀의 영화를 수없이 많이 봤습니다. 5명 후보가 모두 각자 다른
    영화에서의 수상자입니다. 우리는 각자 다른 역을 연기했잖아요. 우리끼리 경쟁할
    순 없습니다. 오늘 제가 여기에 있는 것은 단지 조금 더 운이 좋았을 뿐이죠.
    여러분보다 조금 더 운이 좋았네요. 그리고 아마도 미국인들이 한국 배우를
    대접하는 방법일 수도 있죠. 아무튼 감사합니다.
    <br>
    - 윤여정, 오스카 수상소감 중에서
</blockquote>

윤여정은 오스카에서 김기영 감독에 대한 애정을 표시하기도 했습니다.
<q>저는 이 상을 저의 첫 번째 감독님, 김기영에게 바치고 싶습니다.<br>
   아주 천재적인 분이셨고 제 데뷔작을 함께 했습니다.<br>
</q>
수상 소감의 마지막을 그녀가 존경하는 한국의 천재 감독을 언급한 것이죠.

위 첨자, 아래 첨자

물의 화학식은 H<sub>2</sub>O이고, 3의 제곱(3<sup>2</sup>)은 9이다.

가로선

<p>
    윤여정은 오스카에서 김기영 감독에 대한 애정을 표시하기도 했습니다.
    <q>
        저는 이 상을 저의 첫 번째 감독님, 김기영에게 바치고 싶습니다.
        아주 천재적인 분이셨고 제 데뷔작을 함께 했습니다.<sup>[1]</sup>
    </q>
    수상 소감의 마지막을 그녀가 존경하는 한국의 천재 감독을 언급한 것이죠.
</p>
<hr>
<p>
    [1] "윤여정, 오스카 최고의 수상소감"…미국 '들썩', KBS뉴스 2021.04.27.
</p>

적혀있는 그대로 보여줌

<p>body 태그의 배경색과 글자색을 바꾸는 CSS 코드입니다.</p>
<pre>
    body {
        background-color: #000000;
        color: #ffffff;
    }
</pre>

코드

<code>body</code> 태그의 배경색과 글자색을 바꾸는 CSS 코드입니다.

 

리스트

순서가 있는 리스트

<h2>상영작 순위</h2>
<ol>
  <li>라라랜드</li>
  <li>명량</li>
  <li>극한직업</li>
  <li>신과함께: 죄와 벌</li>
  <li>국제시장</li>
  <li>어벤져스: 엔드게임</li>
</ol>

순서가 없는 리스트

<h2>카테고리</h2>
<ul>
  <li>한국 영화</li>
  <li>외국 영화</li>
  <li>드라마</li>
  <li>예능</li>
  <li>영화</li>
  <li>프로야구</li>
</ul>

리스트 스타일링

• type 값: a (a, b, c, d, e, …), i (i, ii, iii, iv, v, …), I (I, II, III, IV, V, …), 1 (1, 2, 3, 4, 5, …)

<ol type="I">
  <li>라라랜드</li>
  <li>명량</li>
  <li>극한직업</li>
  <li>신과함께: 죄와 벌</li>
  <li>국제시장</li>
  <li>어벤져스: 엔드게임</li>
</ol>

ul {
  list-style: none;                              /* 기호를 없애고 싶을 때 */
}

ul > li {
  display: inline-block;                         /* 리스트 항목을 한 줄로 쓰고 싶을 때 */
}

 

테이블

• 정보를 표로 나타낼 때는 <table> 태그를 사용합니다. 테이블의 행은 <tr> (Table Row)태그로 감쌉니다. 각 데이터들은 <td> (Table Data) 태그로 넣습니다.
• 표에서 머리글은 <thead> 태그로 감싸면 됩니다. 각 행 안에 있는 것들은 제목이기 때문에 <td>가 아니라 <th>라는 태그를 넣습니다. 본문에 해당하는 행들은 <tbody>라는 태그로 감쌉니다.
• 표에서 바닥글은  <tfoot> 태그로 감싸면 됩니다. <thead>와 마찬가지로 행은 <tr>로 감쌉니다. 제목으로 쓰는 칸은 <th> 태그를 넣습니다.

<table>
  <tr>
    <td></td>
    <td>Premium</td>
    <td>Standard</td>
    <td>Basic</td>
  </tr>
  <tr>
    <td></td>
    <td>₩15,900</td>
    <td>₩10,900</td>
    <td>₩8,900</td>
  </tr>
  <tr>
    <td>화질</td>
    <td>최대</td>
    <td>FHD</td>
    <td>HD</td>
  </tr>
  <tr>
    <td>다운로드</td>
    <td>무제한</td>
    <td>월 30회</td>
    <td>불가</td>
  </tr>
</table>

테이블 스타일링

table {
  border: 1px solid red;                   /* 테두리 넣기 */
  border-collapse: collapse;               /* 테두리 겹치기 */
  border-spacing: 10px;                    /* 테두리 간격 조절 */
}

 

멀티미디어

이미지

<img src="주소" width="넓이" height="높이" alt="설명">

비디오

• 자동 재생은 불쾌감을 줄 수 있기 때문에 일부 브라우저에서는 반드시 muted와 함께 써야 동작합니다.

<video autoplay muted controls src="주소" width="넓이" height="높이"></video>

오디오

<audio autoplay controls src="주소"></audio>

인라인 프레임

• 다른 HTML 문서를 문서 안에 집어넣을 때 사용합니다.

<iframe src="주소" width="넓이" height="높이"></iframe>

 

폼 형태

<form>
  <label for="username">아이디</label>
  <input id="username" name="username">
  <label for="password">비밀번호</label>
  <input id="password" name="password" type="password">
  <button>로그인</button>
</form>

action 속성

• 우선 먼저 폼 내용을 현재 페이지 주소 말고, 다른 주소로 쓰고 싶다면  action 속성을 사용하면 됩니다. 

<form action="https://google.com/search">
   <input name="q">
   <button>검색</button>
</form>

method 속성

• 웹 브라우저는 페이지를 이동하거나, 어떤 데이터를 전송할 때 서버에 "리퀘스트"라는 걸 보내는데, 리퀘스트 종류에는 GET과 POST가 있습니다. GET은 데이터를 받을 때 사용하고, POST 리퀘스트는 데이터를 보낼 때 씁니다.
• 참고로 눈치 채신 분들도 있겠지만 method 속성의 기본 값은 get입니다.

<form method="post">
    <label for="profile">프로필</label>
    <input id="profile" name="profile" type="file">
    <button>확인</button>
</form>

라벨

• <label> 태그로 <input>을 감싸면 라벨을 클릭했을 때 인풋에 포커싱이 됩니다. 혹은 라벨의 for 속성과 인풋의 id 속성을 일치시키면 클릭했을 때 인풋에 포커싱이 됩니다.

<label>
  아이디
  <input name="...">
</label>

<label for="username">아이디</label>
<input id="username" name="...">

인풋

• name 속성은 폼을 전송했을 때 입력한 값에 매칭되는 이름입니다. 예를 들어서 아래 코드에서는 인풋에 입력한 값이 username이라는 이름에 매칭됩니다.

<label for="...">아이디</label>
<input id="..." name="username">

• type 속성을 사용하면 다양한 인풋을 사용할 수 있습니다. 대표적으로 입력한 값을 가려주고 싶을 때는 type="password"를 사용합니다.

<label for="password">비밀번호</label>
<input id="password" name="password" type="password">

• 값이 비어있는 인풋에 설명이 적혀있는 것처럼 보이게 하려면 placeholder 속성을 사용합니다.

<input name="username" placeholder="값이 비어있는 인풋에 설명이 적혀있는 것">

• 폼에서 반드시 입력해야 하는 값이 있다면 required 속성을 써주면 됩니다. 만약 required인 인풋의 값이 비어있다면, 전송 버튼을 눌러도 전송되지 않습니다.

<input name="email" type="email" required>

• autocomplete이라는 속성을 지정해 두면 폼이 전송될 때마다 입력한 값을 웹 브라우저에 저장해 두고, 나중에 인풋에 값을 입력할 때 추천해 줍니다. 참고로 required와 달리 on이라는 값을 지정해 주어야 동작하니까 꼭 기억해 주세요.

<input name="search" type="text" autocomplete="on">

 

<head> 태그

• 페이지에 대한 정보를 담고 있는 태그입니다. 주로 이 페이지에 대한 데이터를 담고 있는데, 화면에 보여 주기보다는 웹 브라우저가 읽어서 처리하는 용도입니다.

<head>
    <meta charset="utf-8">
    <title>코드잇 캠핑장</title>
    <link rel="stylesheet" href="style.css">
    <link rel="favicon" href="favicon.ico">
  </head>

 

<link> 태그

• 외부에 있는 것을 불러올 때 사용하는 태그입니다. 어떤 목적인지를 rel 속성에 적습니다. 위치는 href로 지정하면 됩니다. 주로 <head> 태그 안에서 맨 마지막에 써 줍니다.

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

 

<script> 태그

• 자바스크립트 파일을 불러올 때 사용하는 태그입니다. 파일의 위치는 src로 적어 줍니다. 주로 <body> 태그 안에서 맨 마지막에 써 줍니다. 이때 종료 태그인 </script>를 쓰는 것도 꼭 기억해 주세요.

<body>
  <script src="like.js"></script>
</body>

 

시맨틱 태그

• <div>와 기능은 똑같지만, 의미가 담겨있는 태그들을 '시맨틱 태그'라고 합니다. 엄격한 사용법이 있는 건 아니고, 작성하는 사람의 의도가 중요합니다. 시맨틱 태그를 잘 활용하면 검색 엔진 최적화(SEO)나 접근성(Accessibility)을 높이는데 도움이 됩니다.
  • <header> 영역 위쪽에서 로고나 제목, 메뉴 같은 걸 담고 있는 도입부
  • <main> 사이트의 본격적인 내용으로 페이지에서 딱 한 번만 사용 가능
  • <footer> 영역 아래쪽에서 여러 가지 연락처나 관련 정보를 담고 있음
  • <article> 하나의 완성된, 독립적인 내용을 나타내는 영역
  • <section> 어떤 것의 일부분을 나타내는 영역
  • <figure> 이미지와, 이미지 설명을 담고 있는 영역

 

Reference

• https://www.codeit.kr/